@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  --navbar-height: 80px;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1024px) {
  :root {
    --navbar-height: 70px;
  }
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 60px;
  }
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
  transition: color 0.2s ease;
}

a:hover {
  color: #535bf2;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.5);
}

button:active {
  transform: translateY(0) scale(0.96);
}

button:focus,
button:focus-visible {
  outline: 4px auto rgba(99, 102, 241, 0.3);
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }

  button {
    background-color: #f9f9f9;
  }
}

/* 🧊 Interaction Feedback 1: Input/Form Shake (Error Rejection) */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

.shake {
  animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
  border: 1px solid #ef4444 !important;
}

/* 🧊 Interaction Feedback 2: Success Pulse (State Achievement) */
@keyframes successPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  70% {
    box-shadow: 0 0 0 30px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.success-pulse {
  animation: successPulse 1.5s infinite;
  border: 2px solid #22c55e !important;
}

/* 🧊 Interaction Feedback 3: Button Ripple (Tactile Response) handled by :active state *//* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
  }

  66% {
    transform: translateY(-15px) translateX(-20px) rotate(-5deg);
  }
}

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

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

@keyframes pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

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

/* ==================== PAGE CONTAINER ==================== */
.c-page-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--navbar-height) + 40px) 40px 60px;
  position: relative;
  overflow-x: hidden;
}

/* ==================== BACKGROUND ELEMENTS ==================== */
.c-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.c-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 4s infinite;
}

.c-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: float 25s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 40%;
  right: -10%;
  animation-delay: 8s;
}

.orb-3 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  bottom: -10%;
  left: 30%;
  animation-delay: 16s;
}

/* ==================== HERO SECTION ==================== */
.c-hero {
  text-align: center;
  margin-bottom: 70px;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
  width: 100%;
  max-width: 1200px;
}

.c-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
  animation: slideRight 0.8s ease-out 0.2s backwards;
}

.badge-icon {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.badge-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.c-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.c-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.c-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
}

/* ==================== CARD GRID ==================== */
.c-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 1400px;
  z-index: 1;
  margin-bottom: 80px;
}

/* ==================== CARD STYLES ==================== */
.c-card {
  animation: scaleIn 0.6s ease-out backwards;
}

.c-card-inner {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.c-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transition: left 0.6s;
}

.c-card.hovered .c-card-inner::before {
  left: 100%;
}

.c-card.hovered .c-card-inner {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

/* Card Header */
.c-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.c-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.c-card.hovered .c-card-icon {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.c-card-number {
  font-size: 48px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
}

/* Card Content */
.c-card-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.c-card-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Topics Pills */
.c-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 25px;
}

.topic-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.c-card.hovered .topic-pill {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Card Button */
.c-card-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.c-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.c-card-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* Card Overlay */
.c-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 24px;
}

.c-card.hovered .c-card-overlay {
  opacity: 0.05;
}

/* ==================== CTA SECTION ==================== */
.c-cta-section {
  width: 100%;
  max-width: 1400px;
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.c-cta-section h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.c-cta-section p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.c-cta-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.c-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon {
  font-size: 20px;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1200px) {
  .c-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 1024px) {
  .c-hero-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .c-page-container {
    padding: calc(var(--navbar-height) + 20px) 20px 40px;
  }

  .c-title {
    font-size: 32px;
    margin-top: 20px;
    margin-bottom: 16px;
  }

  .c-subtitle {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
  }

  .c-hero {
    margin-bottom: 50px;
  }

  .c-stats {
    flex-wrap: wrap;
    gap: 24px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 16px;
    justify-content: space-around;
  }

  .stat-box {
    min-width: 100px;
  }

  .stat-divider {
    display: none;
  }

  .c-card-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 50px;
  }

  .c-card-inner {
    padding: 24px 20px;
  }

  .c-card-header {
    margin-bottom: 16px;
  }

  .c-card-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }

  .c-card-number {
    font-size: 36px;
  }

  .c-cta-section {
    padding: 40px 24px;
  }

  .c-cta-section h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  .orb-1,
  .orb-2,
  .orb-3 {
    width: 250px;
    height: 250px;
    opacity: 0.2;
  }
}

@media (max-width: 480px) {
  .c-page-container {
    padding: 32px 16px;
  }

  .c-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .c-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .c-card-grid {
    gap: 16px;
  }

  .c-card-inner {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .c-card-title {
    font-size: 20px;
  }

  .c-card-icon {
    width: 54px;
    height: 54px;
    font-size: 24px;
    border-radius: 14px;
  }

  .c-card-number {
    font-size: 32px;
  }

  .c-card-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .c-cta-section {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .c-cta-section h2 {
    font-size: 24px;
  }

  .c-cta-section p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .c-cta-button {
    padding: 14px 28px;
    font-size: 16px;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
  }

  66% {
    transform: translateY(-15px) translateX(-20px) rotate(-5deg);
  }
}

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

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

@keyframes pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

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

/* ==================== PAGE CONTAINER ==================== */
.c-page-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--navbar-height) + 40px) 40px 60px;
  position: relative;
  overflow-x: hidden;
}

/* ==================== BACKGROUND ELEMENTS ==================== */
.c-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.c-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 4s infinite;
}

.c-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: float 25s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 40%;
  right: -10%;
  animation-delay: 8s;
}

.orb-3 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  bottom: -10%;
  left: 30%;
  animation-delay: 16s;
}

/* ==================== HERO SECTION ==================== */
.c-hero {
  text-align: center;
  margin-bottom: 70px;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
  width: 100%;
  max-width: 1200px;
}

.c-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
  animation: slideRight 0.8s ease-out 0.2s backwards;
}

.badge-icon {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.badge-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.c-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.c-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.c-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
}

/* ==================== CARD GRID ==================== */
.c-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 1400px;
  z-index: 1;
  margin-bottom: 80px;
}

/* ==================== CARD STYLES ==================== */
.c-card {
  animation: scaleIn 0.6s ease-out backwards;
}

.c-card-inner {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.c-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transition: left 0.6s;
}

.c-card.hovered .c-card-inner::before {
  left: 100%;
}

.c-card.hovered .c-card-inner {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

/* Card Header */
.c-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.c-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.c-card.hovered .c-card-icon {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.c-card-number {
  font-size: 48px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
}

/* Card Content */
.c-card-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.c-card-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Topics Pills */
.c-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 25px;
}

.topic-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.c-card.hovered .topic-pill {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Card Button */
.c-card-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.c-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.c-card-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* Card Overlay */
.c-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 24px;
}

.c-card.hovered .c-card-overlay {
  opacity: 0.05;
}

/* ==================== CTA SECTION ==================== */
.c-cta-section {
  width: 100%;
  max-width: 1400px;
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.c-cta-section h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.c-cta-section p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.c-cta-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.c-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon {
  font-size: 20px;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1200px) {
  .c-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 1024px) {
  .c-hero-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .c-page-container {
    padding: calc(var(--navbar-height) + 20px) 20px 40px;
  }

  .c-title {
    font-size: 36px;
    margin-top: 60px;
  }

  .c-subtitle {
    font-size: 16px;
  }

  .c-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .c-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .c-card-inner {
    padding: 30px 25px;
  }

  .c-cta-section {
    padding: 50px 25px;
  }

  .c-cta-section h2 {
    font-size: 28px;
  }

  .orb-1,
  .orb-2,
  .orb-3 {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .c-page-container {
    padding: 32px 16px;
  }

  .c-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .c-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .c-card-grid {
    gap: 16px;
  }

  .c-card-inner {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .c-card-title {
    font-size: 20px;
  }

  .c-card-icon {
    width: 54px;
    height: 54px;
    font-size: 24px;
    border-radius: 14px;
  }

  .c-card-number {
    font-size: 32px;
  }

  .c-card-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .c-cta-section {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .c-cta-section h2 {
    font-size: 24px;
  }

  .c-cta-section p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .c-cta-button {
    padding: 14px 28px;
    font-size: 16px;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
  }

  66% {
    transform: translateY(-15px) translateX(-20px) rotate(-5deg);
  }
}

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

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

@keyframes pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

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

/* ==================== PAGE CONTAINER ==================== */
.c-page-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--navbar-height) + 40px) 40px 60px;
  position: relative;
  overflow-x: hidden;
}

/* ==================== BACKGROUND ELEMENTS ==================== */
.c-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.c-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 4s infinite;
}

.c-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: float 25s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 40%;
  right: -10%;
  animation-delay: 8s;
}

.orb-3 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  bottom: -10%;
  left: 30%;
  animation-delay: 16s;
}

/* ==================== HERO SECTION ==================== */
.c-hero {
  text-align: center;
  margin-bottom: 70px;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
  width: 100%;
  max-width: 1200px;
}

.c-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
  animation: slideRight 0.8s ease-out 0.2s backwards;
}

.badge-icon {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.badge-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.c-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.c-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.c-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
}

/* ==================== CARD GRID ==================== */
.c-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 1400px;
  z-index: 1;
  margin-bottom: 80px;
}

/* ==================== CARD STYLES ==================== */
.c-card {
  animation: scaleIn 0.6s ease-out backwards;
}

.c-card-inner {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.c-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transition: left 0.6s;
}

.c-card.hovered .c-card-inner::before {
  left: 100%;
}

.c-card.hovered .c-card-inner {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

/* Card Header */
.c-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.c-card-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.c-card.hovered .c-card-icon {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.c-card-number {
  font-size: 48px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
}

/* Card Content */
.c-card-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.c-card-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Topics Pills */
.c-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 25px;
}

.topic-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.c-card.hovered .topic-pill {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Card Button */
.c-card-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.c-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.c-card-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* Card Overlay */
.c-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 24px;
}

.c-card.hovered .c-card-overlay {
  opacity: 0.05;
}

/* ==================== CTA SECTION ==================== */
.c-cta-section {
  width: 100%;
  max-width: 1400px;
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.c-cta-section h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.c-cta-section p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.c-cta-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.c-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon {
  font-size: 20px;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1200px) {
  .c-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 1024px) {
  .c-hero-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .c-page-container {
    padding: calc(var(--navbar-height) + 20px) 20px 40px;
  }

  .c-title {
    font-size: 36px;
  }

  .c-subtitle {
    font-size: 16px;
  }

  .c-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .c-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .c-card-inner {
    padding: 30px 25px;
  }

  .c-cta-section {
    padding: 50px 25px;
  }

  .c-cta-section h2 {
    font-size: 28px;
  }

  .orb-1,
  .orb-2,
  .orb-3 {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .c-page-container {
    padding: 32px 16px;
  }

  .c-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .c-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .c-card-grid {
    gap: 16px;
  }

  .c-card-inner {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .c-card-title {
    font-size: 20px;
  }

  .c-card-icon {
    width: 54px;
    height: 54px;
    font-size: 24px;
    border-radius: 14px;
  }

  .c-card-number {
    font-size: 32px;
  }

  .c-card-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .c-cta-section {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .c-cta-section h2 {
    font-size: 24px;
  }

  .c-cta-section p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .c-cta-button {
    padding: 14px 28px;
    font-size: 16px;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-30px) translateX(20px) rotate(5deg);
    }

    66% {
        transform: translateY(-15px) translateX(-20px) rotate(-5deg);
    }
}

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

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

@keyframes pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }

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

/* ==================== PAGE CONTAINER ==================== */
.c-page-container {
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--navbar-height) + 40px) 40px 60px;
    position: relative;
    overflow-x: hidden;
}

/* ==================== BACKGROUND ELEMENTS ==================== */
.c-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.c-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: pulse 4s infinite;
}

.c-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: float 25s infinite ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    top: 40%;
    right: -10%;
    animation-delay: 8s;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    bottom: -10%;
    left: 30%;
    animation-delay: 16s;
}

/* ==================== HERO SECTION ==================== */
.c-hero {
    text-align: center;
    margin-bottom: 70px;
    z-index: 1;
    animation: fadeInUp 0.8s ease-out;
    width: 100%;
    max-width: 1200px;
}

.c-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 25px;
    animation: slideRight 0.8s ease-out 0.2s backwards;
}

.badge-icon {
    font-size: 20px;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.badge-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.c-title {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
}

.highlight {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.c-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

.c-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 40px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

.stat-divider {
    width: 1px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
}

/* ==================== CARD GRID ==================== */
.c-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1400px;
    z-index: 1;
    margin-bottom: 80px;
}

/* ==================== CARD STYLES ==================== */
.c-card {
    animation: scaleIn 0.6s ease-out backwards;
}

.c-card-inner {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.c-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: left 0.6s;
}

.c-card.hovered .c-card-inner::before {
    left: 100%;
}

.c-card.hovered .c-card-inner {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

/* Card Header */
.c-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.c-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.c-card.hovered .c-card-icon {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.c-card-number {
    font-size: 48px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.08);
    line-height: 1;
}

/* Card Content */
.c-card-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
}

.c-card-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Topics Pills */
.c-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.topic-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.c-card.hovered .topic-pill {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Card Button */
.c-card-btn {
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.c-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.btn-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.c-card-btn:hover .btn-arrow {
    transform: translateX(5px);
}

/* Card Overlay */
.c-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: 24px;
}

.c-card.hovered .c-card-overlay {
    opacity: 0.05;
}

/* ==================== CTA SECTION ==================== */
.c-cta-section {
    width: 100%;
    max-width: 1400px;
    text-align: center;
    padding: 70px 40px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    z-index: 1;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.c-cta-section h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
}

.c-cta-section p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 35px;
}

.c-cta-button {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 15px;
    padding: 18px 40px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.c-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon {
    font-size: 20px;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1200px) {
    .c-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 1024px) {
    .c-hero-badge {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .c-page-container {
        padding: calc(var(--navbar-height) + 20px) 20px 40px;
    }

    .c-title {
        font-size: 36px;
        margin-top: 60px;
    }

    .c-subtitle {
        font-size: 16px;
    }

    .c-stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    .stat-divider {
        display: none;
    }

    .c-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .c-card-inner {
        padding: 30px 25px;
    }

    .c-cta-section {
        padding: 50px 25px;
    }

    .c-cta-section h2 {
        font-size: 28px;
    }

    .orb-1,
    .orb-2,
    .orb-3 {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 480px) {
    .c-page-container {
        padding: 32px 16px;
    }

    .c-title {
        font-size: 28px;
        letter-spacing: -0.5px;
    }

    .c-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .stat-number {
        font-size: 28px;
    }

    .stat-label {
        font-size: 11px;
    }

    .c-card-grid {
        gap: 16px;
    }

    .c-card-inner {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .c-card-title {
        font-size: 20px;
    }

    .c-card-icon {
        width: 54px;
        height: 54px;
        font-size: 24px;
        border-radius: 14px;
    }

    .c-card-number {
        font-size: 32px;
    }

    .c-card-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .c-cta-section {
        padding: 32px 20px;
        border-radius: 20px;
    }

    .c-cta-section h2 {
        font-size: 24px;
    }

    .c-cta-section p {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .c-cta-button {
        padding: 14px 28px;
        font-size: 16px;
    }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.python-container {
  display: flex;
  height: calc(100vh - var(--navbar-height, 80px));
  margin-top: var(--navbar-height, 80px);
  width: 100%;
  background: linear-gradient(135deg, #0a0f1f 0%, #1a1f35 50%, #0f1428 100%);
  font-family: "Poppins", sans-serif;
  color: #e0e0e0;
  overflow: hidden;
}

/* ========== SIDEBAR ========== */

.sidebar {
  width: 320px;
  background: linear-gradient(135deg, #0d1117 0%, #1a1f35 100%);
  border-right: 2px solid #2d3748;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
}

.sidebar-header {
  padding: 28px 24px;
  border-bottom: 2px solid #2d3748;
  background: linear-gradient(135deg, #3776AB 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(55, 118, 171, 0.3);
}

.sidebar-title {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  margin-top: 0;
  letter-spacing: 0.5px;
}

.sidebar-subtitle {
  color: #d0e7ff;
  font-size: 14px;
  margin: 0;
  font-weight: 400;
}

.sidebar-roadmap-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

.sidebar-roadmap-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sidebar-roadmap-link svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.4));
}

/* Search */

.search-container {
  padding: 20px 16px;
  border-bottom: 1px solid #2d3748;
  background: #0d1117;
}

.search-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #3d4758;
  border-radius: 10px;
  background: #1a1f35;
  color: #e0e0e0;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}

.search-input:focus {
  border-color: #3776AB;
  box-shadow: 0 0 0 4px rgba(55, 118, 171, 0.2);
  background: #1e2438;
}

.search-input::placeholder {
  color: #6b7280;
}

/* Topics List */

.topic-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Exercise and DIY Details Styling */

.exercise-details {
  margin-top: 24px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.details-subtitle {
  color: #fab1a0;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details-list li {
  color: #d0d7e0;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}

.details-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #fab1a0;
}

.details-list li code {
  background: rgba(250, 177, 160, 0.1);
  color: #fab1a0;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
}

.item-datatype {
  color: #74b9ff;
  font-family: 'Fira Code', monospace;
  font-size: 0.85em;
  font-weight: 500;
}

/* Datatype Detailed Styling */

.datatype-detailed-box {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 28px;
  margin: 32px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.datatype-detailed-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #fab1a0, #ff7675);
}

.datatype-detailed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.datatype-detailed-name {
  color: #fab1a0;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.datatype-pronunciation {
  background: rgba(250, 177, 160, 0.1);
  color: #fab1a0;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(250, 177, 160, 0.2);
}

.content-text {
  color: #d0d7e0;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.content-text-group {
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 4px 0;
}

.content-text.list-item {
  position: relative;
  padding: 14px 18px 14px 42px !important;
  margin-bottom: 2px !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border-radius: 8px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

.content-text.list-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-left-color: rgba(251, 191, 36, 0.5) !important;
  transform: translateX(4px);
}

.content-text.list-item::before {
  content: '→';
  position: absolute;
  left: 18px;
  color: #fbbf24;
  font-weight: 800;
  font-size: 18px;
}

.text-highlight {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.highlight-warning {
  color: #ff7675;
  font-weight: 800;
  background: rgba(255, 118, 117, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border-bottom: 2px solid rgba(255, 118, 117, 0.3);
}

.highlight-tip {
  color: #81ecec;
  font-weight: 700;
  border-bottom: 1px dashed rgba(129, 236, 236, 0.4);
}

.datatype-detailed-desc {
  color: #d0d7e0;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.datatype-examples-section {
  margin-bottom: 24px;
  background: rgba(0, 0, 0, 0.15);
  padding: 20px;
  border-radius: 12px;
}

.examples-title {
  color: #74b9ff;
  font-size: 15px;
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.examples-list li {
  color: #b0b8c8;
  font-size: 14px;
  padding-left: 20px;
  position: relative;
}

.examples-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #55efc4;
}

.datatype-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.spec-item {
  background: rgba(255, 255, 255, 0.02);
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.spec-label {
  color: #81ecec;
  font-size: 13px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spec-value {
  color: #fff;
  font-size: 15px;
  margin: 0;
  font-weight: 500;
}

.datatype-code-section {
  margin-top: 24px;
}

.datatype-code-section .code-title {
  color: #fab1a0;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 600;
}

.list-container {
  margin: 24px 0;
}

.list-title {
  color: #fab1a0;
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}

.topic-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topic-list li {
  margin-bottom: 6px;
}

.topic-button {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: #b0b8c8;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-align: left;
  font-family: "Poppins", sans-serif;
  position: relative;
}

.topic-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #3776AB;
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.topic-button:hover {
  background: rgba(55, 118, 171, 0.15);
  color: #d0e0ff;
  transform: translateX(4px);
}

.topic-button.active {
  background: linear-gradient(135deg, #3776AB 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(55, 118, 171, 0.4);
  transform: translateX(4px);
}

.topic-button.active::before {
  opacity: 1;
}

.topic-number {
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2d3748;
  color: #8892a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.topic-button.active .topic-number {
  background: #ffffff;
  color: #3776AB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.topic-title {
  font-weight: 500;
  flex: 1;
}

/* Sidebar Footer */

.sidebar-footer {
  padding: 18px;
  border-top: 1px solid #2d3748;
  background: #0d1117;
  text-align: center;
}

.footer-text {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* ========== MAIN CONTENT ========== */

.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 40px;
  box-sizing: border-box;
}

/* Content Header */

.content-header {
  margin-bottom: 36px;
  animation: fadeInDown 0.6s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.content-title {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  margin-top: 0;
  letter-spacing: -0.5px;
  word-wrap: break-word;
}

.title-underline {
  height: 5px;
  width: 80px;
  background: linear-gradient(90deg, #3776AB, #2563eb);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(55, 118, 171, 0.4);
}

/* Content Card */

.content-card {
  background: linear-gradient(135deg, #1a1f35 0%, #151929 100%);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid #2d3748;
  animation: fadeIn 0.6s ease;
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* Text Content */

.content-text {
  font-size: 18px;
  /* Incremented from 17px */
  line-height: 1.9;
  /* Incremented from 1.8 */
  color: #d0d7e0;
  margin-bottom: 32px;
  /* Incremented from 24px */
  font-weight: 400;
  letter-spacing: 0.015em;
  /* Added for clarity */
}

.content-heading {
  font-size: 28px;
  /* Incremented from 24px */
  font-weight: 600;
  color: #ffffff;
  margin-top: 40px;
  /* Incremented from 32px */
  margin-bottom: 24px;
  /* Incremented from 16px */
  padding-bottom: 12px;
  border-bottom: 2px solid #2d3748;
  display: inline-block;
}

.content-heading:first-child {
  margin-top: 0;
}

/* Lists */

.content-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.content-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 18px;
  /* Incremented from 14px */
  color: #d0d7e0;
  line-height: 1.8;
  /* Incremented from 1.7 */
  font-size: 17px;
  /* Incremented from 16px */
  letter-spacing: 0.01em;
}

.content-list li::before {
  content: "→";
  position: absolute;
  left: 8px;
  color: #3776AB;
  font-weight: 700;
  font-size: 18px;
}

/* Code Blocks - ENHANCED */

.code-block {
  background: #0d1117;
  padding: 20px 24px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 24px 0;
  border: 2px solid #2d3748;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  font-family: "Fira Code", "Consolas", "Monaco", "Courier New", monospace;
  counter-reset: line;
  max-height: 600px;
  overflow-y: auto;
}

.code-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, rgba(55, 118, 171, 0.1), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

.code-block code {
  font-family: "Fira Code", "Consolas", "Monaco", monospace;
  font-size: 14px;
  color: #a0c4ff;
  line-height: 1.8;
  display: block;
  white-space: pre;
  position: relative;
  z-index: 1;
  tab-size: 4;
  letter-spacing: 0.02em;
}

/* Enhanced code container with title */

.code-container {
  margin: 32px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #3d4758;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  background: #0d1117;
}

.code-title {
  background: linear-gradient(135deg, #1a1e26 0%, #232a34 100%);
  color: #fab1a0;
  padding: 14px 22px;
  font-size: 14px;
  font-family: 'Fira Code', monospace;
  border-bottom: 2px solid #3d4758;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.code-title::before {
  content: '📝';
  font-size: 16px;
}

/* Code block scrollbar */

.code-block::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-block::-webkit-scrollbar-track {
  background: #1a1f2e;
  border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb {
  background: #3d4758;
  border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb:hover {
  background: #4a5568;
}

/* Data Type Box */

.datatype-box {
  background: #0d1117;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  border: 2px solid #2d3748;
  transition: all 0.3s ease;
}

.datatype-box:hover {
  border-color: #3776AB;
  box-shadow: 0 4px 16px rgba(55, 118, 171, 0.2);
  transform: translateY(-2px);
}

.datatype-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2d3748;
}

.datatype-name {
  font-weight: 600;
  font-size: 16px;
  color: #3776AB;
}

.datatype-desc {
  font-size: 14px;
  color: #8892a0;
  font-style: italic;
}

.datatype-box .code-block {
  margin: 12px 0 0 0;
}

/* Method Box */

.method-box {
  background: #0d1117;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  border: 2px solid #2d3748;
  transition: all 0.3s ease;
}

.method-box:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
  transform: translateY(-2px);
}

.method-name {
  font-weight: 600;
  font-size: 16px;
  color: #2563eb;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2d3748;
  font-family: 'Fira Code', monospace;
}

.method-box .code-block {
  margin: 12px 0 0 0;
  background: #161b22;
  border: 1px solid #3d4758;
}

.method-box .code-block code {
  font-size: 13px;
  line-height: 1.7;
}

/* Navigation Buttons */

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  gap: 20px;
}

.nav-button {
  padding: 14px 32px;
  background: #2d3748;
  border: 2px solid #3d4758;
  color: #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav-button:hover:not(:disabled) {
  background: #3d4758;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.nav-button-next {
  background: linear-gradient(135deg, #3776AB 0%, #2563eb 100%);
  border: none;
  color: #ffffff;
}

.nav-button-next:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #3776AB 100%);
}

.nav-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Scrollbar Styling */

.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  width: 10px;
}

.sidebar::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
  background: #0d1117;
}

.sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
  background: #2d3748;
  border-radius: 5px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
  background: #3d4758;
}

/* Responsive Design */

@media (max-width: 1024px) {
  .sidebar {
    width: 280px;
  }

  .content-wrapper {
    padding: 32px 24px;
  }

  .content-card {
    padding: 32px 24px;
  }
}

@media (max-width: 768px) {
  .python-container {
    flex-direction: column;
    margin-top: 60px;
    height: auto;
    overflow: visible;
  }

  /* Fixed Navigation/Sidebar Style for Mobile */
  .sidebar {
    width: 100%;
    height: auto;
    max-height: 300px;
    /* Reduced height for better UX */
    border-right: none;
    border-bottom: 2px solid #2d3748;
    position: relative;
    z-index: 10;
  }

  .sidebar-header {
    padding: 16px 20px;
    /* Compact header */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .sidebar-title {
    font-size: 20px;
    margin: 0;
  }

  .sidebar-subtitle {
    display: none;
    /* Hide subtitle to save space */
  }

  .search-container {
    padding: 12px 16px;
  }

  .topic-list {
    padding: 8px 16px;
  }

  /* Show all topics on mobile - was previously restricted */
  /* .topic-list li:not(:has(.topic-button.active)) {
    display: none;
  } */

  /* Ensure the active one stands out or indicates it's the current one */
  .topic-button.active {
    background: linear-gradient(135deg, #3776AB 0%, #2563eb 100%);
    border-radius: 8px;
    margin: 0;
    width: 100%;
  }

  .main-content {
    flex: none;
    overflow: visible;
  }

  .content-wrapper {
    padding: 24px 16px;
    /* More breathing room */
  }

  .content-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .content-text {
    font-size: 16px;
    line-height: 1.7;
  }

  .nav-buttons {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }

  .nav-button {
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    justify-content: center;
  }

  /* Table responsiveness */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    /* Negative margin to allow full-width scroll */
    padding: 0 16px;
  }

  .content-table {
    min-width: 600px;
    /* Force horizontal scroll */
  }
}

/* ========== NEW SECTION TYPES ========== */

.analogy-box {
  background: rgba(55, 118, 171, 0.1);
  border-left: 4px solid #3776AB;
  padding: 32px;
  /* Incremented */
  border-radius: 12px;
  margin: 32px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  /* Added pop */
}

.analogy-title {
  color: #3776AB;
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
}

.analogy-content {
  color: #d0d7e0;
  line-height: 1.8;
  font-size: 17px;
}

.callout-box {
  background: rgba(255, 255, 255, 0.05);
  padding: 24px;
  border-radius: 12px;
  margin: 24px 0;
  border: 1px dashed #3d4758;
}

.callout-box.mindshift {
  border-left: 4px solid #9c27b0;
  background: rgba(156, 39, 176, 0.05);
}

.callout-box.motivational {
  border-left: 4px solid #4caf50;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(55, 118, 171, 0.1) 100%);
}

.callout-box.summary {
  border-left: 4px solid #2196f3;
  background: rgba(33, 150, 243, 0.05);
}

.callout-box.important {
  border-left: 4px solid #ff9800;
  background: rgba(255, 152, 0, 0.05);
}

.callout-box.pro-tip {
  border-left: 4px solid #8bc34a;
  background: rgba(139, 195, 74, 0.05);
}

.callout-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}

.callout-content {
  color: #e0e0e0;
  font-size: 16px;
  line-height: 1.6;
}

.list-item-complex {
  margin-bottom: 20px;
  padding-left: 4px;
}

.list-item-complex strong {
  color: #fab1a0;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 4px;
}

.item-explanation {
  margin-top: 8px;
  color: #b0b8c8;
  font-size: 15px;
  line-height: 1.5;
}

.item-explanation p {
  margin: 4px 0;
}

.content-subheading {
  color: #fff;
  font-size: 20px;
  margin-top: 32px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.pillar-card {
  background: rgba(255, 255, 255, 0.03);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(55, 118, 171, 0.4);
}

.pillar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pillar-icon {
  font-size: 24px;
}

.pillar-name {
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}

.pillar-concept {
  color: #e0e0e0;
  line-height: 1.5;
  margin-bottom: 12px;
  font-size: 15px;
}

.pillar-realworld {
  font-size: 14px;
  color: #b0b8c8;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px;
  border-radius: 8px;
}

.exercise-box {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(248, 152, 32, 0.3);
  padding: 35px;
  border-radius: 24px;
  margin: 50px 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(248, 152, 32, 0.05);
  backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.exercise-box:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(248, 152, 32, 0.6);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(248, 152, 32, 0.2);
}

.exercise-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #f89820, #f97316, #fbbf24);
  z-index: 1;
}

.exercise-box::after {
  content: '⚡';
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 120px;
  opacity: 0.03;
  transform: rotate(-15deg);
  pointer-events: none;
}

.exercise-badge {
  background: linear-gradient(90deg, rgba(248, 152, 32, 0.2), rgba(249, 115, 22, 0.2));
  color: #fbbf24;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 50px;
  letter-spacing: 2px;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(248, 152, 32, 0.4);
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.exercise-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 10px #fbbf24;
  animation: pulse 2s infinite;
}

.exercise-title {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.exercise-title span {
  background: linear-gradient(90deg, #f89820, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.exercise-content {
  color: #cad4e0;
  line-height: 1.8;
  font-size: 17px;
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.exercise-tasks {
  margin-top: 32px;
}

.exercise-details {
  background: rgba(15, 23, 42, 0.6);
  padding: 24px;
  border-radius: 16px;
  margin-top: 24px;
  border: 1px solid rgba(248, 152, 32, 0.1);
  position: relative;
}

.details-subtitle {
  color: #fbbf24;
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.details-subtitle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.2), transparent);
}

.details-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.details-list li {
  color: #cbd5e1;
  font-size: 15px;
  padding: 12px 16px 12px 45px;
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.details-list li:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(248, 152, 32, 0.2);
  transform: translateX(5px);
}

.details-list li::before {
  content: '🎯';
  position: absolute;
  left: 15px;
  font-size: 16px;
}

.details-list li code {
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  color: #fbbf24;
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.hints-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.hint-item {
  color: #94a3b8;
  font-size: 14px;
  padding: 18px;
  background: rgba(251, 191, 36, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.1);
  line-height: 1.6;
  position: relative;
  transition: all 0.3s ease;
}

.hint-item:hover {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.3);
  color: #e2e8f0;
}

.hint-bullet {
  color: #fbbf24;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.code-container {
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #3d4758;
}

.code-title {
  background: #1a1e26;
  color: #fab1a0;
  padding: 10px 20px;
  font-size: 14px;
  font-family: 'Fira Code', monospace;
  border-bottom: 1px solid #3d4758;
}

.code-container .code-block {
  margin: 0;
  border-radius: 0;
}

.inline-code {
  background: linear-gradient(135deg, rgba(250, 177, 160, 0.15), rgba(250, 177, 160, 0.08));
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
  color: #fab1a0;
  border: 1px solid rgba(250, 177, 160, 0.2);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Code highlighting for keywords - basic visual enhancement */

.code-block code {
  /* Python keywords */
  --keyword-color: #ff79c6;
  --string-color: #50fa7b;
  --comment-color: #6272a4;
  --function-color: #8be9fd;
  --number-color: #bd93f9;
}

/* Diagram and ASCII art specific styling */

.diagram-content,
.diagram-container pre {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #a0c4ff;
  letter-spacing: 0;
  white-space: pre;
  overflow-x: auto;
}

/* Better contrast for code in different contexts */

.method-item-example code,
.example-code code,
.item-explanation code {
  background: none;
  padding: 0;
  border: none;
  color: #fab1a0;
  font-size: 13px;
}

/* Quote Box Styles */

.quote-box {
  background: linear-gradient(135deg, rgba(55, 118, 171, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
  border-left: 4px solid #3776AB;
  padding: 32px;
  border-radius: 16px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}

.quote-box::before {
  content: '"';
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 80px;
  color: rgba(55, 118, 171, 0.2);
  font-family: serif;
  line-height: 1;
}

.quote-content {
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
  font-style: italic;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.quote-author {
  font-size: 16px;
  color: #3776AB;
  font-weight: 600;
  text-align: right;
  display: block;
}

/* Diagram Container Styles */

.diagram-container {
  background: #1e222d;
  border: 1px solid #3d4758;
  border-radius: 12px;
  padding: 24px;
  margin: 30px 0;
}

.diagram-title {
  color: #fab1a0;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
  border-bottom: 1px solid #3d4758;
  padding-bottom: 10px;
}

.diagram-content {
  color: #e4e7eb;
  font-family: 'Fira Code', monospace;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 14px;
}

/* Method Reference Styles */

.method-reference-container {
  margin: 30px 0;
}

.method-reference-title {
  color: #fab1a0;
  font-size: 20px;
  margin-bottom: 20px;
}

.method-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.method-item {
  background: #1e222d;
  border: 1px solid #3d4758;
  border-radius: 12px;
  padding: 24px;
}

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

.method-item-name {
  color: #55efc4;
  font-size: 16px;
  font-family: 'Fira Code', monospace;
  background: rgba(85, 239, 196, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}

.hoisted-badge {
  background: #e67e22;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.method-item-desc {
  color: #e4e7eb;
  margin-bottom: 15px;
  line-height: 1.5;
}

.method-item-characteristics {
  background: rgba(255, 255, 255, 0.03);
  padding: 15px;
  border-radius: 8px;
  color: #b2bec3;
  font-size: 14px;
  white-space: pre-wrap;
  margin-bottom: 15px;
}

.method-item-example {
  background: #161b22;
  padding: 15px;
  border-radius: 8px;
  margin: 0;
}

.method-item-example code {
  color: #fab1a0;
  font-size: 13px;
}

/* QA Container Styles */

.qa-container {
  margin: 30px 0;
}

.qa-title {
  color: #fab1a0;
  font-size: 20px;
  margin-bottom: 20px;
}

.qa-item {
  background: #1e222d;
  border-left: 4px solid #55efc4;
  border-radius: 0 12px 12px 0;
  padding: 20px;
  margin-bottom: 20px;
}

.qa-question {
  color: #55efc4;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
}

.qa-answer {
  color: #e4e7eb;
  line-height: 1.6;
}

/* Summary Box Styles */

.summary-box {
  background: linear-gradient(135deg, rgba(85, 239, 196, 0.1) 0%, rgba(0, 184, 148, 0.1) 100%);
  border: 1px solid rgba(85, 239, 196, 0.3);
  border-radius: 16px;
  padding: 24px;
  margin: 40px 0;
}

.summary-title {
  color: #55efc4;
  font-size: 18px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.summary-list li {
  color: #e4e7eb;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.summary-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #55efc4;
}

/* Insight Box Style */

.callout-box.insight {
  border-left-color: #a29bfe;
  background: rgba(162, 155, 254, 0.05);
}

.callout-box.insight .callout-title {
  color: #a29bfe;
}

/* Data grid/card placeholder styles */

.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.data-card {
  background: #1e222d;
  border: 1px solid #3d4758;
  border-radius: 12px;
  padding: 20px;
}

/* Table Styles */

.table-container {
  overflow-x: auto;
  margin: 30px 0;
  background: #1e222d;
  border-radius: 12px;
  border: 1px solid #3d4758;
  padding: 20px;
}

.table-title {
  color: #fab1a0;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
}

.content-table {
  width: 100%;
  border-collapse: collapse;
  color: #e4e7eb;
}

.content-table th,
.content-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #3d4758;
}

.content-table th {
  background: rgba(55, 118, 171, 0.1);
  color: #3776AB;
  font-weight: 600;
}

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

/* Comparison Styles */

.comparison-container {
  display: flex;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.comparison-column {
  flex: 1;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.03);
  padding: 24px;
  border-radius: 12px;
  border-top: 4px solid #3d4758;
}

.comparison-column.blue {
  border-top-color: #3776AB;
  background: linear-gradient(180deg, rgba(55, 118, 171, 0.1) 0%, transparent 100%);
}

.comparison-column.green {
  border-top-color: #00b894;
  background: linear-gradient(180deg, rgba(0, 184, 148, 0.1) 0%, transparent 100%);
}

.comparison-title {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-list li {
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
  color: #d0d7e0;
  font-size: 15px;
}

.comparison-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: bold;
}

.comparison-column.blue .comparison-list li::before {
  color: #3776AB;
}

.comparison-column.green .comparison-list li::before {
  color: #00b894;
}

/* Focus Box */

.focus-box {
  background: #0d1117;
  border: 1px solid #3776AB;
  border-radius: 12px;
  padding: 30px;
  margin: 30px 0;
  box-shadow: 0 0 20px rgba(55, 118, 171, 0.15);
  position: relative;
  overflow: hidden;
}

.focus-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3776AB, #2563eb);
}

.focus-title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.focus-title::before {
  content: "🎯";
}

.focus-content {
  color: #d0d7e0;
  margin-bottom: 20px;
  line-height: 1.7;
}

/* Method Category Box */

.method-category-box {
  margin: 40px 0;
}

.category-title {
  color: #74b9ff;
  font-size: 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(116, 185, 255, 0.3);
  padding-bottom: 10px;
}

/* DIY Question Item */

.list-item-diy {
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  border-left: 3px solid #fab1a0;
  transition: transform 0.2s;
}

/* Ensure specific overrides for when inside content-list */

.content-list .list-item-diy {
  padding: 16px;
  list-style: none;
}

.content-list .list-item-diy::before {
  content: none;
}

.list-item-diy:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.05);
}

.list-item-diy strong {
  color: #fab1a0;
}

/* Loading State & Animation */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  color: #a0aec0;
  font-size: 1.5rem;
  gap: 1.5rem;
}

.loading-icon {
  font-size: 3.5rem;
  animation: spin 2s linear infinite;
}

.loading-icon.python {
  color: #3776AB;
}

.loading-icon.javascript {
  color: #F7DF1E;
}

.loading-icon.java {
  color: #f89820;
}

/* ========== ENHANCED CONTENT STYLING ========== */

/* Better spacing for text paragraphs */

.content-text {
  font-size: 17px;
  line-height: 1.85;
  color: #d0d7e0;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}

.content-text:last-child {
  margin-bottom: 0;
}

/* Enhanced headings with better visual hierarchy */

.content-heading {
  font-size: 26px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 48px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid #3776AB;
  display: block;
  position: relative;
}

.content-heading::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, transparent);
}

.content-subheading {
  color: #a0c4ff;
  font-size: 20px;
  margin-top: 36px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(160, 196, 255, 0.2);
  padding-bottom: 10px;
  font-weight: 500;
}

/* Enhanced list styling */

.content-list {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

.content-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  color: #d0d7e0;
  line-height: 1.75;
  font-size: 16px;
}

.content-list li::before {
  content: "→";
  position: absolute;
  left: 4px;
  color: #3776AB;
  font-weight: 700;
  font-size: 16px;
}

/* List container with title */

.list-container {
  margin: 32px 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.list-title {
  color: #fab1a0;
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(250, 177, 160, 0.2);
}

/* Code Snippets in Lists and Boxes */

.item-code-snippet {
  margin: 10px 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border-left: 3px solid #f7df1e;
  padding: 12px;
}

.item-code-snippet pre {
  margin: 0;
  overflow-x: auto;
}

.item-code-snippet code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 14px;
  color: #e0e0e0;
}

.focus-code-wrap {
  margin-top: 12px;
}

.focus-code-wrap pre {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.operator-example-wrap {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
}

.operator-example-wrap pre {
  margin: 0;
}

.operator-example-wrap code {
  color: #f7df1e;
  font-size: 13px;
}

/* Security Grid Styles */

.security-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 32px 0;
}

.security-item {
  background: rgba(13, 17, 23, 0.4);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.security-title {
  color: #ffffff;
  font-size: 19px;
  margin-bottom: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.security-danger {
  color: #ff7f7f;
  margin-bottom: 16px;
  font-size: 15px;
  background: rgba(255, 127, 127, 0.1);
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #ff7f7f;
}

.code-bad,
.code-good {
  margin: 16px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.example-label {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.code-bad .example-label {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4d4d;
}

.code-good .example-label {
  background: rgba(46, 213, 115, 0.2);
  color: #2ecc71;
}

.code-bad pre,
.code-good pre {
  margin: 0;
  padding: 16px;
  background: #0d1117;
  white-space: pre-wrap;
  word-break: break-word;
}

.code-bad pre {
  border-left: 4px solid #ff4757;
}

.code-good pre {
  border-left: 4px solid #2ed573;
}

.code-bad code,
.code-good code {
  font-family: 'Fira Code', monospace;
  font-size: 14px;
}

.code-bad code {
  color: #ff9f43;
}

.code-good code {
  color: #a0c4ff;
}

.security-note {
  font-size: 14px;
  color: #b0b8c8;
  margin-top: 16px;
  font-style: italic;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

/* Focus Box Code Wrap Improvement */

.focus-code-wrap pre {
  white-space: pre-wrap !important;
  word-break: break-word;
}

/* Enhanced code blocks */

.code-container {
  margin: 32px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #3d4758;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.code-title {
  background: linear-gradient(135deg, #1a1e26 0%, #232a34 100%);
  color: #fab1a0;
  padding: 14px 22px;
  font-size: 14px;
  font-family: 'Fira Code', monospace;
  border-bottom: 1px solid #3d4758;
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-title::before {
  content: '📝';
}

.code-block {
  background: #0d1117;
  padding: 22px 26px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 28px 0;
  border: 2px solid #2d3748;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
}

.code-block code {
  font-family: "Fira Code", "Consolas", "Monaco", monospace;
  font-size: 14px;
  color: #a0c4ff;
  line-height: 1.7;
  display: block;
  white-space: pre;
  position: relative;
  z-index: 1;
  tab-size: 4;
}

/* Enhanced analogy boxes */

.analogy-box {
  background: linear-gradient(135deg, rgba(55, 118, 171, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
  border-left: 5px solid #3776AB;
  padding: 28px 32px;
  border-radius: 0 14px 14px 0;
  margin: 36px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.analogy-title {
  color: #74b9ff;
  font-size: 19px;
  margin-bottom: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.analogy-content {
  color: #e0e0e0;
  line-height: 1.8;
  font-size: 16px;
}

/* Enhanced callout boxes */

.callout-box {
  background: rgba(255, 255, 255, 0.04);
  padding: 26px 28px;
  border-radius: 14px;
  margin: 32px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 5px solid #3d4758;
}

.callout-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}

.callout-content {
  color: #d0d7e0;
  font-size: 16px;
  line-height: 1.7;
}

/* Enhanced exercise boxes */

.exercise-box {
  background: linear-gradient(135deg, rgba(0, 184, 148, 0.08) 0%, rgba(85, 239, 196, 0.05) 100%);
  border: 2px dashed rgba(0, 184, 148, 0.4);
  padding: 28px;
  border-radius: 16px;
  margin: 40px 0;
}

.exercise-title {
  color: #00b894;
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.exercise-content {
  color: #d0d7e0;
  white-space: pre-line;
  line-height: 1.75;
  font-size: 16px;
}

/* Enhanced table styling */

.table-container {
  overflow-x: auto;
  margin: 36px 0;
  background: #1a1f2e;
  border-radius: 14px;
  border: 1px solid #3d4758;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.table-title {
  color: #fab1a0;
  font-size: 19px;
  margin-bottom: 20px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(250, 177, 160, 0.2);
}

.content-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: #e4e7eb;
}

.content-table th,
.content-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #3d4758;
}

.content-table th {
  background: rgba(55, 118, 171, 0.15);
  color: #74b9ff;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.content-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

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

/* Enhanced comparison boxes */

.comparison-container {
  display: flex;
  gap: 24px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.comparison-column {
  flex: 1;
  min-width: 280px;
  background: rgba(255, 255, 255, 0.03);
  padding: 28px;
  border-radius: 14px;
  border-top: 5px solid #3d4758;
}

.comparison-title {
  font-size: 19px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-list li {
  margin-bottom: 14px;
  padding-left: 24px;
  position: relative;
  color: #d0d7e0;
  font-size: 15px;
  line-height: 1.6;
}

/* Diagram container styling */

.diagram-container {
  background: #161b22;
  border: 1px solid #3d4758;
  border-radius: 14px;
  padding: 28px;
  margin: 36px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.diagram-title {
  color: #fab1a0;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
  border-bottom: 1px solid #3d4758;
  padding-bottom: 12px;
}

.diagram-content {
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  color: #a0c4ff;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

/* Enhanced method grid */

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.method-item {
  background: #161b22;
  border: 1px solid #3d4758;
  border-radius: 12px;
  padding: 22px;
  transition: all 0.3s ease;
}

.method-item:hover {
  border-color: #3776AB;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(55, 118, 171, 0.15);
}

.method-item-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #3d4758;
}

.method-item-name {
  color: #74b9ff;
  font-family: 'Fira Code', monospace;
  font-size: 15px;
  font-weight: 600;
}

.method-item-desc {
  color: #d0d7e0;
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 14px;
}

.method-item-example {
  background: #0d1117;
  padding: 14px 16px;
  border-radius: 8px;
  margin-top: 12px;
}

.method-item-example code {
  color: #fab1a0;
  font-size: 13px;
  font-family: 'Fira Code', monospace;
}

.method-item-usecase {
  color: #8892a0;
  font-size: 13px;
  margin-top: 12px;
  font-style: italic;
}

/* Enhanced pillars grid */

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 36px 0;
}

.pillar-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  padding: 28px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(55, 118, 171, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Nested section styling */

.nested-section {
  margin: 28px 0;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border-left: 3px solid #3776AB;
}

.nested-section .content-heading {
  margin-top: 0;
}

/* Hero box for intro content */

.hero-box {
  background: linear-gradient(135deg, rgba(55, 118, 171, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
  padding: 36px;
  border-radius: 16px;
  margin: 32px 0;
  border: 1px solid rgba(55, 118, 171, 0.3);
}

.hero-content {
  font-size: 18px;
  line-height: 1.8;
  color: #e0e8f0;
  margin: 0;
}

/* Error and empty state refinements */

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  padding: 40px;
  color: #e0e0e0;
}

.error-state h3 {
  color: #ff7675;
  margin-bottom: 16px;
}

.error-state button {
  margin-top: 20px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #3776AB, #2563eb);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.error-state button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(55, 118, 171, 0.4);
}

/* Complex list item improvements */

.list-item-complex {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border-left: 3px solid #fab1a0;
}

.list-item-complex strong {
  color: #fab1a0;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}

.item-explanation {
  margin-top: 10px;
  color: #b0b8c8;
  font-size: 14px;
  line-height: 1.6;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

/* DIY question items */

.list-item-diy {
  background: rgba(250, 177, 160, 0.05);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 16px;
  border-left: 4px solid #fab1a0;
  transition: all 0.3s ease;
}

.list-item-diy:hover {
  transform: translateX(6px);
  background: rgba(250, 177, 160, 0.08);
}

.content-list .list-item-diy {
  padding: 20px;
  list-style: none;
}

.content-list .list-item-diy::before {
  content: none;
}

/* ========== CRITICAL GLOBAL OVERFLOW FIXES ========== */

/* Ensure all text content wraps properly */

.content-text,
.analogy-content,
.callout-content,
.exercise-content,
.pillar-concept,
.pillar-realworld,
.method-item-desc,
.item-explanation,
.focus-content,
.diagram-content,
.hero-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Ensure code blocks scroll horizontally but don't overflow */

.code-block {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.code-block code {
  display: block;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* All containers should clip overflow */

.analogy-box,
.callout-box,
.exercise-box,
.focus-box,
.table-container,
.comparison-container,
.diagram-container,
.list-container,
.method-category-box,
.pillars-grid,
.code-container,
.real-world-container,
.nested-section,
.hero-box,
.datatype-box,
.method-box {
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Table cells should handle long text */

.content-table td,
.content-table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

/* List items should wrap text */

.content-list li,
.comparison-list li,
.summary-list li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Inline code should not break containers */

.inline-code {
  word-break: break-all;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

/* Method grid items should not overflow */

.method-grid {
  overflow: hidden;
}

.method-item {
  overflow: hidden;
  word-wrap: break-word;
}

/* Pillar cards should contain their content */

.pillar-card {
  overflow: hidden;
  word-wrap: break-word;
}

/* Comparison columns */

.comparison-column {
  overflow: hidden;
  word-wrap: break-word;
}

/* Ensure pre elements with diagrams don't break layout */

pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Real world container styling */

.real-world-container {
  background: rgba(55, 118, 171, 0.08);
  border-radius: 14px;
  padding: 28px;
  margin: 36px 0;
  border-left: 4px solid #3776AB;
}

.real-world-container h4 {
  color: #74b9ff;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 16px;
}

.real-world-container .scenario {
  color: #d0d7e0;
  line-height: 1.75;
  margin-bottom: 20px;
}

.real-world-container .breakdown {
  background: rgba(0, 0, 0, 0.2);
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
}

/* Explanation and elaboration boxes */

.explanation,
.elaboration {
  background: rgba(255, 255, 255, 0.03);
  padding: 16px 20px;
  border-radius: 10px;
  margin-top: 16px;
  border-left: 3px solid rgba(160, 196, 255, 0.4);
  color: #b0b8c8;
  line-height: 1.7;
}

/* Challenge box styling */

.challenge-box {
  background: linear-gradient(135deg, rgba(0, 184, 148, 0.1), rgba(85, 239, 196, 0.05));
  border: 1px dashed rgba(0, 184, 148, 0.4);
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

.challenge-box strong {
  color: #00b894;
  display: block;
  margin-bottom: 10px;
}

/* Complex and nested item improvements */

.complex-item {
  margin-bottom: 12px;
}

.complex-item strong {
  color: #fab1a0;
  display: block;
  margin-bottom: 6px;
}

/* Learner and pro notes */

.learner-note,
.pro-note,
.simple-note,
.advanced-note {
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 18px;
  border-radius: 10px;
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.7;
}

.learner-note {
  border-left: 3px solid #55efc4;
}

.pro-note {
  border-left: 3px solid #a29bfe;
}

.simple-note {
  border-left: 3px solid #74b9ff;
}

.advanced-note {
  border-left: 3px solid #fab1a0;
}

.learner-icon,
.pro-icon,
.simple-icon,
.advanced-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Ensure images don't break layout */

img {
  max-width: 100%;
  height: auto;
}

/* Responsive adjustments for smaller screens */

@media (max-width: 768px) {
  .content-card {
    padding: 24px 20px;
  }

  .content-wrapper {
    padding: 24px 16px;
  }

  .code-block {
    padding: 16px;
    font-size: 12px;
  }

  .method-grid {
    grid-template-columns: 1fr;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .comparison-container {
    flex-direction: column;
  }

  .comparison-column {
    min-width: 100%;
  }
}

/* ========== COMPREHENSIVE CODE SCROLLING ========== */

/* Ensure ALL code elements are scrollable */

/* Main code blocks */

.code-block,
.code-block pre,
pre.code-block {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100%;
  white-space: pre;
  word-wrap: normal;
}

/* Code containers */

.code-container,
.code-container pre,
.code-container .code-block {
  overflow-x: auto !important;
  max-width: 100%;
}

/* Method and example code */

.method-box .code-block,
.method-item-example,
.method-item-example pre,
.example-code,
.example-code pre {
  overflow-x: auto !important;
  max-width: 100%;
}

/* Inline and special code blocks */

.real-world-container .code-block,
.exercise-box .code-block,
.challenge-box .code-block,
.explanation code,
.elaboration code,
.breakdown code {
  overflow-x: auto !important;
  max-width: 100%;
}

/* Diagram and ASCII art */

.diagram-content,
.diagram-container pre,
pre.diagram-content {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100%;
  white-space: pre;
}

/* Data type boxes */

.datatype-box .code-block,
.datatype-box pre {
  overflow-x: auto !important;
  max-width: 100%;
}

/* Any pre element in content */

.content-card pre,
.content-wrapper pre,
.python-container pre {
  overflow-x: auto !important;
  max-width: 100%;
  white-space: pre;
}

/* Import styles and special sections */

.import-style-example pre,
.example-code,
.code-deep-dive pre,
.code-lab pre,
.code-workshop pre {
  overflow-x: auto !important;
  max-width: 100%;
}

/* Nested section code */

.nested-section pre,
.nested-section .code-block {
  overflow-x: auto !important;
  max-width: 100%;
}

/* List item code examples */

.list-item-complex code,
.list-item-diy code {
  word-break: break-all;
  white-space: normal;
}

/* Ensure code tags don't break layout but scroll if needed */

code {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Pre elements should never break container */

pre {
  overflow-x: auto !important;
  max-width: 100%;
  white-space: pre !important;
  word-wrap: normal !important;
}

/* Custom scrollbar for all pre and code elements */

pre::-webkit-scrollbar,
.code-block::-webkit-scrollbar,
.diagram-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

pre::-webkit-scrollbar-track,
.code-block::-webkit-scrollbar-track,
.diagram-content::-webkit-scrollbar-track {
  background: #1a1f2e;
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb,
.code-block::-webkit-scrollbar-thumb,
.diagram-content::-webkit-scrollbar-thumb {
  background: #3d4758;
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover,
.code-block::-webkit-scrollbar-thumb:hover,
.diagram-content::-webkit-scrollbar-thumb:hover {
  background: #4a5568;
}

/* ========== PROFESSIONAL WORKFLOW TIP ========== */

.pro-workflow-tip {
  margin-top: 24px;
  padding: 24px;
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  animation: fadeIn 0.8s ease;
}

.pro-tip-icon {
  font-size: 24px;
  background: rgba(99, 102, 241, 0.1);
  padding: 10px;
  border-radius: 12px;
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pro-tip-content h5 {
  color: #fff;
  font-size: 17px;
  margin-bottom: 6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pro-tip-content p {
  color: #aab4c4;
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}

.pro-tip-content strong {
  color: #6366f1;
  font-weight: 600;
}

/* ========== PROFESSIONAL WORKFLOW SECTION (IN-LEARNING) ========== */

.learning-workflow-section {
  margin-top: 40px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.learning-workflow-header {
  margin-bottom: 25px;
  text-align: center;
}

.learning-workflow-header h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.learning-workflow-header h3 span {
  background: linear-gradient(135deg, #3776ab 0%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.learning-workflow-header p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.learning-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.learning-workflow-step {
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.learning-workflow-step:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-5px);
}

.learning-step-number {
  position: absolute;
  top: -10px;
  left: 20px;
  width: 25px;
  height: 25px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.learning-step-icon {
  font-size: 30px;
  margin-bottom: 12px;
  display: block;
}

.learning-workflow-step h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.learning-workflow-step p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 1024px) {
  .hoisted-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .learning-workflow-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

@media (max-width: 480px) {

  .content-wrapper {
    padding: 24px 16px;
  }

  .content-header {
    margin-bottom: 24px;
  }

  .content-title {
    font-size: 26px;
  }

  .content-card {
    padding: 24px 16px;
    border-radius: 14px;
  }

  .content-text {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 24px;
  }

  .content-heading {
    font-size: 22px;
    margin-top: 32px;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }

  .content-subheading {
    font-size: 18px;
    margin-top: 28px;
    margin-bottom: 14px;
  }

  .content-list li {
    font-size: 15px;
    padding-left: 24px;
    margin-bottom: 12px;
  }

  .code-container {
    margin: 24px 0;
    border-radius: 10px;
  }

  .code-title {
    padding: 10px 16px;
    font-size: 13px;
  }

  .code-block {
    padding: 16px;
  }

  .analogy-box,
  .quote-box,
  .hero-box {
    padding: 20px;
    margin: 24px 0;
    border-radius: 12px;
  }

  .analogy-title,
  .callout-title,
  .focus-title {
    font-size: 17px;
  }

  .analogy-content,
  .callout-content,
  .focus-content,
  .quote-content,
  .hero-content {
    font-size: 15px;
  }

  .quote-box::before {
    font-size: 60px;
    top: 5px;
    left: 10px;
  }

  .exercise-box {
    padding: 20px;
    margin: 24px 0;
  }

  .exercise-title {
    font-size: 18px;
  }

  .table-container {
    padding: 16px;
    margin: 24px 0;
  }

  .table-title {
    font-size: 17px;
    margin-bottom: 16px;
  }

  .content-table th,
  .content-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .method-item {
    padding: 16px;
  }

  .method-item-name {
    font-size: 14px;
  }

  .method-item-desc {
    font-size: 13px;
  }

  .pillar-card {
    padding: 20px;
  }

  .pillar-name {
    font-size: 17px;
  }

  .pillar-concept,
  .pillar-realworld {
    font-size: 14px;
  }

  .learning-workflow-section {
    padding: 20px;
    margin-top: 32px;
  }

  .learning-workflow-header h3 {
    font-size: 19px;
  }

  .learning-workflow-step {
    padding: 16px;
  }

  .learning-step-icon {
    font-size: 26px;
  }

  .learning-workflow-step h4 {
    font-size: 15px;
  }

  .learning-workflow-step p {
    font-size: 12px;
  }
}

/* ================= MOBILE OPTIMIZATIONS ================= */

/* Mobile Topic Header - Sticky top bar for topic context */

.mobile-topic-header {
  display: none;
  /* Hidden on desktop */
  background: #0d1117;
  padding: 16px 20px;
  border-bottom: 1px solid #2d3748;
  position: sticky;
  top: var(--navbar-height, 80px);
  z-index: 90;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mobile-topic-header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-topic-label {
  font-size: 11px;
  color: #3776AB;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.mobile-topic-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Toggle Button for Mobile */

.mobile-menu-btn {
  background: transparent;
  border: 1px solid #2d3748;
  color: #e0e0e0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  flex-shrink: 0;
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3776AB;
}

/* Sidebar Overlay */

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

@media (max-width: 900px) {
  .python-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  /* Redesigned Sidebar as a Drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    border-right: 1px solid #2d3748;
    border-bottom: none;
    /* Override 768px style */
    max-height: none;
    /* Override 768px style */
    display: flex;
    /* Restore flex column layout */
    flex-direction: column;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.visible {
    display: block;
  }

  .sidebar-header {
    padding: 24px;
    display: block;
    /* RESTORE stacked layout, override flex from 768px */
    border-bottom: 2px solid #2d3748;
  }

  .sidebar-subtitle {
    display: block;
    /* RESTORE subtitle, override none from 768px */
    margin-top: 4px;
  }

  .sidebar-title {
    font-size: 22px;
  }

  .search-container {
    display: block;
    /* Show search in drawer */
    padding: 16px;
  }

  /* Ensure topic list looks good in drawer */
  .topic-list {
    padding: 16px;
  }

  .topic-button.active {
    width: 100%;
    /* Ensure full width in drawer */
    margin: 0;
  }

  .main-content {
    overflow-y: visible;
    height: auto;
  }

  .mobile-topic-header {
    display: flex;
  }

  .content-wrapper {
    padding: 20px 16px;
  }
}.bot-fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    animation: slideInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.bot-fab {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0;
}

.bot-fab-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 2;
}

.bot-fab:hover {
    transform: translateY(-5px) rotate(8deg);
    box-shadow: 0 12px 40px rgba(168, 85, 247, 0.5);
    filter: brightness(1.1);
}

.bot-fab:disabled {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.8);
    opacity: 0.8;
}

.bot-fab:active {
    transform: translateY(-2px) scale(0.95);
}

.bot-icon-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Pulsing effect to catch attention */
.bot-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    opacity: 0.6;
    z-index: -1;
    animation: botPulse 2s infinite;
}

@keyframes botPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Premium Tooltip */
.bot-tooltip {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.bot-fab:hover .bot-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Hide toggle on small screens or adjust size */
@media (max-width: 768px) {
    .bot-fab-container {
        bottom: 20px;
        right: 20px;
    }

    .bot-fab {
        width: 56px;
        height: 56px;
    }

    .bot-tooltip {
        display: none;
        /* Tooltips don't work great on touch */
    }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* ==================== NO RESULTS ==================== */
.no-results-state {
  text-align: center;
  padding: 80px 20px;
  animation: fadeInUp 0.6s ease-out;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-results-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* ==================== PAGINATION ==================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 60px 0;
  z-index: 10;
  position: relative;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.pagination button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
}

.pagination button:hover:not(:disabled) {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.4);
  color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.pagination button:active:not(:disabled) {
  transform: translateY(0);
}

.pagination button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

.pagination span {
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.2);
  color: #667eea;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 15px rgba(102, 126, 234, 0.05);
  min-width: 120px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-25px) translateX(15px) rotate(3deg);
  }

  66% {
    transform: translateY(-12px) translateX(-15px) rotate(-3deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

/* ==================== CONTAINER ==================== */
.practice-questions-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  padding: 80px 40px;
  position: relative;
  overflow-x: hidden;
}

/* ==================== BACKGROUND ==================== */
.practice-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.practice-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 6s infinite;
}

.practice-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 25s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -15%;
  left: -10%;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  bottom: -10%;
  right: -12%;
  animation-delay: 12s;
}

/* ==================== HEADER ==================== */
.practice-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
}

.badge-icon {
  font-size: 20px;
}

.badge-text {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.practice-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.practice-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Stats Row */
.practice-stats-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-number.solved {
  background: linear-gradient(135deg, #43e97b, #38d167);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-number.easy {
  background: linear-gradient(135deg, #43e97b, #38d167);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-number.medium {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-number.hard {
  background: linear-gradient(135deg, #f5576c, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ==================== FILTERS ==================== */
.filters-section {
  max-width: 1400px;
  margin: 0 auto 30px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.search-bar {
  flex: 1;
  min-width: 300px;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 20px;
  font-size: 20px;
  opacity: 0.6;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 16px 55px 16px 55px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  color: white;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.clear-search {
  position: absolute;
  right: 15px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
}

.clear-search:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.difficulty-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.filter-chip:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.3);
  color: #667eea;
  transform: translateY(-2px);
}

.filter-chip.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* Results Info */
.results-info {
  max-width: 1400px;
  margin: 0 auto 25px;
  text-align: left;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 1;
}

/* ==================== QUESTIONS GRID ==================== */
.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 25px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* ==================== QUESTION CARD ==================== */
.question-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: scaleIn 0.6s ease-out backwards;
}

.question-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.08), transparent);
  transition: left 0.7s;
}

.question-card.hovered::before {
  left: 100%;
}

.question-card.hovered {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

.question-card.solved {
  border-left: 4px solid #43e97b;
}

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

.question-number {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 14px;
  border-radius: 10px;
}

.solved-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(67, 233, 123, 0.15);
  color: #43e97b;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.check-icon {
  font-size: 14px;
}

.question-card-title {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
  line-height: 1.3;
}

.question-card-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.question-tag {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #667eea;
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.question-card.hovered .question-tag {
  background: rgba(102, 126, 234, 0.25);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.question-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.difficulty-pill {
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.meta-icon {
  font-size: 14px;
}

.try-now-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
  .header-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .practice-questions-container {
    padding: 90px 16px 40px;
    /* Clears navbar */
  }

  .practice-title {
    font-size: 32px;
    margin-bottom: 12px;
  }

  .practice-subtitle {
    font-size: 15px;
    margin-bottom: 32px;
    padding: 0 10px;
  }

  /* Filters Optimization */
  .filters-section {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 24px;
  }

  .search-bar {
    width: 100%;
  }

  .difficulty-filters {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    /* Space for scrollbar if needed */
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .filter-chip {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .questions-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .question-card {
    padding: 20px;
  }

  .card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .question-meta {
    justify-content: space-between;
    width: 100%;
  }

  .try-now-btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .practice-questions-container {
    padding: 32px 16px;
  }

  .practice-header {
    margin-bottom: 40px;
  }

  .practice-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .practice-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-card {
    padding: 12px 16px;
    gap: 4px;
    flex: 1;
    min-width: calc(50% - 10px);
  }

  .stat-number {
    font-size: 24px;
  }

  .stat-label {
    font-size: 11px;
  }

  .search-input {
    padding: 12px 45px 12px 45px;
    font-size: 14px;
    border-radius: 12px;
  }

  .search-icon {
    left: 15px;
    font-size: 16px;
  }

  .filter-chip {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 10px;
  }

  .results-info {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .question-card {
    padding: 20px;
    border-radius: 16px;
  }

  .question-card-title {
    font-size: 18px;
  }

  .question-card-description {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .question-tags {
    margin-bottom: 12px;
  }

  .question-tag {
    padding: 4px 10px;
    font-size: 11px;
  }

  .pagination {
    gap: 10px;
    margin: 40px 0;
  }

  .pagination button {
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 10px;
  }

  .pagination span {
    padding: 8px 16px;
    font-size: 12px;
    min-width: 100px;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-25px) translateX(15px) rotate(3deg);
  }

  66% {
    transform: translateY(-12px) translateX(-15px) rotate(-3deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

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

/* ==================== CONTAINER ==================== */
.projects-container {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0f1f 0%, #1a1f35 50%, #0f1428 100%);
  color: #fff;
  padding: 80px 40px;
  position: relative;
  overflow-x: hidden;
}

/* ==================== BACKGROUND ELEMENTS ==================== */
.background-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(79, 172, 254, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 172, 254, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  animation: pulse 5s infinite;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 25s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  top: -15%;
  left: -10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: 40%;
  right: -12%;
  animation-delay: 8s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  bottom: -10%;
  left: 35%;
  animation-delay: 16s;
}

/* ==================== HEADER SECTION ==================== */
.projects-header {
  text-align: center;
  margin-bottom: 60px;
  z-index: 1;
  position: relative;
  animation: fadeInUp 0.8s ease-out;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 172, 254, 0.1);
  border: 1px solid rgba(79, 172, 254, 0.3);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
  animation: slideRight 0.8s ease-out 0.2s backwards;
}

.badge-icon {
  font-size: 20px;
}

.badge-text {
  font-size: 14px;
  color: #4facfe;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.main-title {
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  color: #aab4c4;
  max-width: 750px;
  margin: 0 auto 40px;
  font-size: 18px;
  line-height: 1.7;
}

/* Stats */
.projects-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.15);
}

/* Filter Buttons */
.filter-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.filter-btn:hover {
  background: rgba(79, 172, 254, 0.1);
  border-color: rgba(79, 172, 254, 0.3);
  color: #4facfe;
  transform: translateY(-2px);
}

.filter-btn.active {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.3);
}

/* ==================== PROJECTS GRID ==================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
}

/* ==================== PROJECT CARD ==================== */
.project-card {
  animation: fadeUp 0.6s ease forwards;
  opacity: 0;
}

.card-inner {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.08), transparent);
  transition: left 0.7s;
}

.project-card.hovered .card-inner::before {
  left: 100%;
}

.project-card.hovered .card-inner {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  border-color: rgba(79, 172, 254, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

/* Project Icon */
.project-icon-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.project-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

.project-card.hovered .project-icon {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.difficulty-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.project-card.hovered .difficulty-badge {
  transform: scale(1.05);
}

/* Project Header */
.project-header {
  margin-bottom: 15px;
}

.project-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}

.project-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  padding: 5px 12px;
  border-radius: 10px;
}

.duration-icon {
  font-size: 16px;
}

/* Project Description */
.project-description {
  color: #b7c3d7;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Tech Tags */
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 25px;
}

.tech-tag {
  background: rgba(79, 172, 254, 0.1);
  border: 1px solid rgba(79, 172, 254, 0.2);
  color: #4facfe;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.project-card.hovered .tech-tag {
  background: rgba(79, 172, 254, 0.15);
  border-color: rgba(79, 172, 254, 0.3);
}

/* Card Actions */
.card-actions {
  display: flex;
  gap: 12px;
}

.try-button {
  flex: 1;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.try-button.primary {
  color: #fff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.try-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.try-button.secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.try-button.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.try-button:hover .btn-arrow {
  transform: translateX(5px);
}

/* Card Overlay */
.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 24px;
}

.project-card.hovered .card-overlay {
  opacity: 0.03;
}

/* ==================== NO RESULTS ==================== */
.no-results {
  text-align: center;
  padding: 80px 20px;
  animation: fadeInUp 0.6s ease-out;
}

.no-results-icon {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.no-results h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.no-results p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

/* ==================== CTA SECTION ==================== */
.projects-cta {
  max-width: 1400px;
  margin: 80px auto 0;
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.projects-cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.projects-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.cta-button {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(79, 172, 254, 0.3);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(79, 172, 254, 0.4);
}

.cta-icon {
  font-size: 20px;
}

/* ==================== SUBMISSION WORKFLOW ==================== */
.workflow-section {
  max-width: 1400px;
  margin: 80px auto;
  padding: 60px 40px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 1;
}

.workflow-header {
  text-align: center;
  margin-bottom: 50px;
}

.workflow-header h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #fff 0%, #aab4c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.workflow-header p {
  color: #aab4c4;
  font-size: 16px;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.workflow-step {
  padding: 40px 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.workflow-step:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(79, 172, 254, 0.3);
  transform: translateY(-5px);
}

.step-number {
  position: absolute;
  top: -15px;
  left: 20px;
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.step-icon {
  font-size: 40px;
  margin-bottom: 20px;
  display: block;
}

.workflow-step h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}

.workflow-step p {
  font-size: 14px;
  color: #aab4c4;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .workflow-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
  .header-badge {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .projects-container {
    padding: 50px 20px;
  }

  .main-title {
    font-size: 36px;
  }

  .subtitle {
    font-size: 16px;
  }

  .projects-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card-inner {
    padding: 30px 25px;
  }

  .card-actions {
    flex-direction: column;
  }

  .projects-cta {
    padding: 50px 25px;
  }

  .projects-cta h2 {
    font-size: 28px;
  }

  .orb-1,
  .orb-2,
  .orb-3 {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .projects-container {
    padding: 32px 16px;
  }

  .main-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .filter-buttons {
    gap: 10px;
  }

  .filter-btn {
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 10px;
  }

  .projects-grid {
    gap: 16px;
  }

  .card-inner {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .project-name {
    font-size: 20px;
  }

  .project-icon {
    width: 54px;
    height: 54px;
    font-size: 26px;
    border-radius: 14px;
  }

  .difficulty-badge {
    padding: 4px 12px;
    font-size: 11px;
  }

  .projects-cta {
    padding: 32px 20px;
    border-radius: 20px;
    margin-top: 40px;
  }

  .projects-cta h2 {
    font-size: 24px;
  }

  .projects-cta p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .cta-button {
    padding: 14px 28px;
    font-size: 16px;
  }

  .workflow-section {
    padding: 32px 20px;
    border-radius: 20px;
    margin: 40px auto;
  }

  .workflow-header h2 {
    font-size: 24px;
  }

  .workflow-step {
    padding: 32px 20px;
  }

  .step-icon {
    font-size: 32px;
  }
}

/* ==================== PAGINATION ==================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 60px 0;
  z-index: 1;
  position: relative;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.pagination button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
}

.pagination button:hover:not(:disabled) {
  background: rgba(79, 172, 254, 0.15);
  border-color: rgba(79, 172, 254, 0.4);
  color: #4facfe;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.pagination button:active:not(:disabled) {
  transform: translateY(0);
}

.pagination button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

.pagination span {
  background: rgba(79, 172, 254, 0.1);
  border: 1px solid rgba(79, 172, 254, 0.2);
  color: #4facfe;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 15px rgba(79, 172, 254, 0.05);
  min-width: 120px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
  }

  66% {
    transform: translateY(-15px) translateX(-20px) rotate(-5deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

.roadmap-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.roadmap-container {
  position: relative;
  min-height: 100vh;
  padding: 80px 40px;
  background: #0d1117;
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
}

.roadmap-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 6s infinite;
}

.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 25s infinite ease-in-out;
}

.sphere-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -15%;
  left: -10%;
}

.sphere-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 50%;
  right: -12%;
  animation-delay: 8s;
}

.sphere-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  bottom: -10%;
  left: 40%;
  animation-delay: 16s;
}

.roadmap-hero {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
}

.badge-icon {
  font-size: 20px;
}

.badge-text {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.roadmap-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roadmap-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Stats */
.roadmap-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.15);
}

.learning-path-section,
.projects-showcase,
.course-outcome-section {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto 80px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.modules-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.timeline-item {
  display: flex;
  gap: 30px;
  animation: slideInRight 0.6s ease-out backwards;
}

.timeline-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-dot {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  z-index: 1;
}

.connector-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #667eea, #764ba2);
  position: absolute;
  top: 50px;
  opacity: 0.3;
}

.module-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 25px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.6s;
}

.module-card.hovered::before {
  left: 100%;
}

.module-card.hovered {
  transform: translateX(10px);
  box-shadow: 0 20px 50px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.module-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  transition: transform 0.4s ease;
}

.module-card.hovered .module-icon {
  transform: scale(1.1) rotate(5deg);
}

.module-content {
  flex: 1;
}

.module-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.module-description {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.module-meta {
  display: flex;
  gap: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.meta-icon {
  font-size: 16px;
}

.module-arrow {
  font-size: 28px;
  color: #667eea;
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.module-card.hovered .module-arrow {
  transform: translateX(10px);
  opacity: 1;
}

/* ==================== PROJECTS GRID ==================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.project-showcase-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 35px 30px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  animation: scaleIn 0.6s ease-out backwards;
}

.project-showcase-card.hovered {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.project-icon-large {
  font-size: 64px;
  margin-bottom: 20px;
  transition: transform 0.4s ease;
}

.project-showcase-card.hovered .project-icon-large {
  transform: scale(1.2) rotate(10deg);
}

.project-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.project-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.project-difficulty {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.time-icon {
  font-size: 16px;
}

.project-start-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.project-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.project-start-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* ==================== COURSE OUTCOME ==================== */
.course-outcome-section {
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.outcome-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 60px 50px;
}

.outcome-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.outcome-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: 40px;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.outcome-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  animation: scaleIn 0.6s ease-out backwards;
}

.outcome-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.outcome-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.outcome-text {
  flex: 1;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.outcome-check {
  font-size: 24px;
  color: #43e97b;
  font-weight: bold;
}

/* ==================== CTA SECTION ==================== */
.roadmap-cta {
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

.roadmap-cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.roadmap-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.cta-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon {
  font-size: 20px;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
  .hero-badge {
    display: none !important;
  }

  .timeline-item {
    gap: 20px;
  }

  .module-card {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .roadmap-container {
    padding: 50px 20px;
  }

  .roadmap-title {
    font-size: 36px;
  }

  .roadmap-subtitle {
    font-size: 16px;
  }

  .roadmap-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .section-title {
    font-size: 32px;
  }

  .timeline-item {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .timeline-connector {
    width: 100%;
    height: 50px;
  }

  .connector-line {
    width: 2px;
    height: 100%;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
  }

  .module-card {
    width: 100%;
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .roadmap-container {
    padding: 32px 16px;
  }

  .roadmap-hero {
    margin-bottom: 40px;
  }

  .roadmap-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .roadmap-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .roadmap-stats {
    gap: 15px;
  }

  .stat-box {
    flex: 1;
    min-width: calc(50% - 10px);
  }

  .section-title {
    font-size: 24px;
  }

  .section-subtitle {
    font-size: 13px;
  }

  .timeline-dot {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .module-card {
    padding: 20px;
    border-radius: 16px;
  }

  .module-icon {
    width: 60px;
    height: 60px;
    font-size: 32px;
    border-radius: 14px;
  }

  .module-title {
    font-size: 18px;
  }

  .module-description {
    font-size: 13px;
    line-height: 1.5;
  }

  .module-meta {
    justify-content: center;
    gap: 15px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-showcase-card {
    padding: 24px 20px;
  }

  .project-icon-large {
    font-size: 48px;
  }

  .project-name {
    font-size: 18px;
  }

  .outcome-content {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .outcome-title {
    font-size: 24px;
  }

  .outcome-subtitle {
    font-size: 14px;
  }

  .outcome-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .outcome-card {
    padding: 20px;
    gap: 15px;
  }

  .outcome-icon {
    font-size: 32px;
  }

  .outcome-text {
    font-size: 14px;
  }

  .roadmap-cta {
    padding: 40px 20px;
    border-radius: 24px;
  }

  .roadmap-cta h2 {
    font-size: 24px;
  }

  .roadmap-cta p {
    font-size: 14px;
  }

  .cta-button {
    padding: 14px 28px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }
}/* ==================== GLOBAL RESET ==================== */


/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-25px) translateX(15px) rotate(3deg);
  }

  66% {
    transform: translateY(-12px) translateX(-15px) rotate(-3deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* ==================== CONTAINER ==================== */
.interview-container {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  padding: 80px 40px;
  position: relative;
  overflow-x: hidden;
}

/* ==================== BACKGROUND ==================== */
.interview-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.interview-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 6s infinite;
}

.interview-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 25s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -15%;
  left: -10%;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  bottom: -10%;
  right: -12%;
  animation-delay: 12s;
}

/* ==================== HEADER ==================== */
.interview-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

.header-badge-interview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
}

.badge-icon-interview {
  font-size: 20px;
}

.badge-text-interview {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.interview-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight-interview {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.interview-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Stats */
.interview-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card-interview {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.stat-card-interview:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-number-interview {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label-interview {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ==================== FILTERS ==================== */
.interview-filters {
  max-width: 1200px;
  margin: 0 auto 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.search-bar-interview {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon-interview {
  position: absolute;
  left: 20px;
  font-size: 20px;
  opacity: 0.6;
  pointer-events: none;
}

.search-input-interview {
  width: 100%;
  padding: 16px 55px 16px 55px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  color: white;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.search-input-interview::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-input-interview:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.clear-search-interview {
  position: absolute;
  right: 15px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
}

.clear-search-interview:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.category-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-chip-interview {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.filter-chip-interview:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.3);
  color: #667eea;
  transform: translateY(-2px);
}

.filter-chip-interview.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* Results Count */
.results-count-interview {
  max-width: 1200px;
  margin: 0 auto 25px;
  text-align: left;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 1;
}

/* ==================== QUESTIONS LIST ==================== */
.questions-list {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.question-item {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 25px 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.question-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.08), transparent);
  transition: left 0.6s;
}

.question-item:hover::before {
  left: 100%;
}

.question-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateX(5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.question-item.expanded {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(102, 126, 234, 0.4);
}

.question-header-interview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.question-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.question-number-interview {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.question-text {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.5;
}

.question-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.difficulty-tag-interview {
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.expand-icon {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.expand-icon.rotated {
  transform: rotate(180deg);
}

.question-answer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideDown 0.3s ease-out;
}

.answer-label {
  font-size: 14px;
  font-weight: 700;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.answer-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
  font-family: 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 8px;
  border-left: 3px solid #667eea;
}

.answer-footer {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.category-badge-interview {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #667eea;
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 600;
}

/* No Results */
.no-results-interview {
  text-align: center;
  padding: 80px 20px;
  position: relative;
  z-index: 1;
}

.no-results-icon-interview {
  font-size: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.no-results-interview h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.no-results-interview p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}

/* CTA */
.interview-cta {
  max-width: 1200px;
  margin: 80px auto 0;
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.interview-cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.interview-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.cta-button-interview {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.cta-button-interview:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon-interview {
  font-size: 20px;
}

@media (max-width: 1024px) {
  .header-badge-interview {
    display: none !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .interview-container {
    padding: 50px 20px;
  }

  .interview-title {
    font-size: 36px;
  }

  .interview-subtitle {
    font-size: 16px;
  }

  .interview-stats {
    gap: 15px;
  }

  .question-header-interview {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .question-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .question-right {
    width: 100%;
    justify-content: space-between;
  }

  .interview-cta {
    padding: 50px 25px;
    margin-top: 60px;
  }

  .interview-cta h2 {
    font-size: 28px;
  }

  .cta-button-interview {
    padding: 14px 28px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .interview-container {
    padding: 32px 16px;
  }

  .interview-header {
    margin-bottom: 40px;
  }

  .interview-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .interview-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-card-interview {
    padding: 12px 16px;
    gap: 4px;
    flex: 1;
    min-width: calc(50% - 10px);
  }

  .stat-number-interview {
    font-size: 24px;
  }

  .stat-label-interview {
    font-size: 11px;
  }

  .search-input-interview {
    padding: 12px 45px 12px 45px;
    font-size: 14px;
    border-radius: 12px;
  }

  .search-icon-interview {
    left: 15px;
    font-size: 16px;
  }

  .filter-chip-interview {
    padding: 8px 16px;
    font-size: 13px;
  }

  .results-count-interview {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .question-item {
    padding: 16px 20px;
    border-radius: 14px;
  }

  .question-number-interview {
    padding: 6px 12px;
    font-size: 12px;
  }

  .question-text {
    font-size: 15px;
  }

  .answer-text {
    font-size: 13px;
    padding: 12px;
  }

  .interview-cta {
    padding: 40px 20px;
    border-radius: 20px;
  }

  .interview-cta h2 {
    font-size: 24px;
  }

  .interview-cta p {
    font-size: 14px;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==================== ANIMATIONS ==================== */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ==================== CONTAINER ==================== */
.practice-solve-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  overflow: hidden;
  padding-top: 80px;
  /* Space for fixed navbar */
}

/* ==================== QUESTION PANEL (LEFT) ==================== */
.question-panel-split {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 12px 20px;
  margin: 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-3px);
}

.back-icon {
  font-size: 18px;
}

.question-header-split {
  padding: 0 30px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.question-title-split {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin: 0;
  flex: 1;
}

.difficulty-badge-split {
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.question-stats-split {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-item-split {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.stat-icon-split {
  font-size: 16px;
}

.stat-divider-split {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
}

.question-tabs-split {
  display: flex;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-button-split {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab-button-split:hover {
  color: white;
  background: rgba(255, 255, 255, 0.03);
}

.tab-button-split.active {
  color: white;
  border-bottom-color: #667eea;
}

.question-content-split {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.question-content-split::-webkit-scrollbar {
  width: 8px;
}

.question-content-split::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.question-content-split::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.5);
  border-radius: 4px;
}

.content-section-split {
  color: white;
}

.section-title-split {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-bottom: 15px;
  margin-top: 25px;
}

.section-title-split:first-child {
  margin-top: 0;
}

.question-description-split {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.topics-container-split {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.topic-tag-split {
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #667eea;
  padding: 6px 14px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 600;
}

.example-box-split {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
}

.example-box-split h4 {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.code-block-split {
  background: rgba(0, 0, 0, 0.3);
  color: #00f2fe;
  padding: 15px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  border: 1px solid rgba(0, 242, 254, 0.2);
  overflow-x: auto;
}

/* ==================== IDE PANEL (RIGHT) ==================== */
.ide-panel-split {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #1e1e1e;
  overflow: hidden;
}

.ide-toolbar-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 15px;
  flex-wrap: wrap;
}

.toolbar-left-split {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-right-split {
  display: flex;
  align-items: center;
  gap: 12px;
}

.language-selector-split,
.theme-selector-split {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.language-selector-split option,
.theme-selector-split option {
  background: #2d2d2d;
}


/* Gemini Buttons Styles */
.gemini-button-split {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 8px;
}

.gemini-button-split:hover:not(:disabled) {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.gemini-button-split:disabled {
  background: #4B5563;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Existing styles remain the same */
.practice-solve-container {
  display: flex;
  height: 100vh;
  background: #0f0f23;
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ... rest of your existing CSS ... */

.font-slider-split {
  width: 80px;
  cursor: pointer;
}

.run-button-split {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #43e97b, #38d167);
  border: none;
  color: white;
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(67, 233, 123, 0.3);
}

.practice-solve-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.practice-solve-container * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.run-button-split:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(67, 233, 123, 0.4);
}

.run-button-split:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.run-button-split.running {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.run-icon-split {
  font-size: 14px;
}

.spinner-split {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.submit-button-split {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.submit-button-split:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.status-indicator-container {
  display: flex;
  align-items: center;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
}

.editor-section-split {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- Resizer Styles --- */
.resizer-split {
  height: 8px;
  background: #2a2a2a;
  cursor: row-resize;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
  flex-shrink: 0;
  z-index: 10;
}

.resizer-split:hover {
  background: #444;
}

.resizer-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.output-section-split {
  /* Height is now controlled by inline styles in JSX */
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  /* border-top removed as handled by resizer */
  flex-shrink: 0;
}

.output-header-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.output-title-split {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.output-icon-split {
  font-size: 16px;
}

.execution-time-split {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.output-content-split {
  flex: 1;
  overflow: auto;
  padding: 15px 20px;
}

.output-content-split::-webkit-scrollbar {
  width: 6px;
}

.output-content-split::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.output-content-split::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.5);
  border-radius: 3px;
}

.output-loading-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
}

.loading-spinner-split {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(102, 126, 234, 0.3);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.output-loading-split p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.output-placeholder-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
}

.placeholder-icon-split {
  font-size: 40px;
  opacity: 0.5;
}

.output-placeholder-split p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.output-text-split {
  color: #d4d4d4;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}




.permission-alert {
  background-color: #ffdddd;
  border: 1px solid #ff5c5c;
  color: #a10000;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 10px;
  font-weight: 500;
}




/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
  .practice-solve-container {
    flex-direction: column;
    padding-top: 60px;
    height: auto;
    overflow-y: auto;
  }

  .question-panel-split,
  .ide-panel-split {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 500px;
  }

  .question-panel-split {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .question-title-split {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .back-button {
    margin: 15px;
    padding: 10px 16px;
    font-size: 14px;
  }

  .question-header-split {
    padding: 0 20px 15px;
  }

  .header-top-split {
    flex-direction: column;
    gap: 12px;
  }

  .question-tabs-split {
    padding: 0 15px;
  }

  .tab-button-split {
    padding: 12px 15px;
    font-size: 13px;
  }

  .question-content-split {
    padding: 20px;
  }

  .ide-toolbar-split {
    padding: 10px 15px;
    gap: 10px;
  }

  .run-button-split,
  .submit-button-split {
    padding: 8px 16px;
    font-size: 14px;
    flex: 1;
    justify-content: center;
  }

  .toolbar-left-split,
  .toolbar-right-split {
    width: 100%;
    justify-content: space-between;
  }

  .output-section-split {
    height: 250px !important;
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  .question-title-split {
    font-size: 18px;
  }

  .difficulty-badge-split {
    padding: 6px 14px;
    font-size: 11px;
  }

  .ide-toolbar-split {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-left-split {
    order: 2;
  }

  .toolbar-right-split {
    order: 1;
    gap: 8px;
  }

  .language-selector-split,
  .theme-selector-split {
    padding: 6px 10px;
    font-size: 12px;
    flex: 1;
  }

  .gemini-button-split {
    width: 100%;
    margin-right: 0;
    margin-bottom: 5px;
  }
}


.fullscreen-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.fullscreen-button {
  background: #0A84FF;
  color: white;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0px 4px 15px rgba(10, 132, 255, 0.4);
  transition: all 0.25s ease;
}

.fullscreen-button:hover {
  background: #0066CC;
  box-shadow: 0px 4px 20px rgba(0, 102, 204, 0.5);
  transform: translateY(-2px);
}

.fullscreen-button:active {
  transform: scale(0.97);
}

/* ==================== FILE TABS ==================== */
.file-tabs-bar {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 10px;
  height: 40px;
}

.file-tabs-scroll {
  display: flex;
  overflow-x: auto;
  gap: 2px;
  flex: 1;
}

.file-tabs-scroll::-webkit-scrollbar {
  height: 4px;
}

.file-tabs-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.file-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  height: 34px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  margin-top: 6px;
}

.file-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.file-tab.active {
  background: #1e1e1e;
  color: white;
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid #667eea;
}

.file-icon {
  font-size: 14px;
}

.file-close {
  font-size: 10px;
  opacity: 0.5;
  padding: 2px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.file-close:hover {
  background: rgba(255, 0, 0, 0.2);
  opacity: 1;
}

.add-file-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.add-file-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}
/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
  }

  66% {
    transform: translateY(-15px) translateX(-20px) rotate(-5deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

/* ==================== CONTAINER ==================== */
.roadmap-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  padding: 80px 40px;
  position: relative;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
}

/* ==================== BACKGROUND ELEMENTS ==================== */
.roadmap-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 6s infinite;
}

.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 25s infinite ease-in-out;
}

.sphere-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -15%;
  left: -10%;
}

.sphere-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 50%;
  right: -12%;
  animation-delay: 8s;
}

.sphere-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  bottom: -10%;
  left: 40%;
  animation-delay: 16s;
}

/* ==================== HERO SECTION ==================== */
.roadmap-hero {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
}

.badge-icon {
  font-size: 20px;
}

.badge-text {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.roadmap-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roadmap-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Stats */
.roadmap-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.15);
}

/* ==================== SECTION HEADERS ==================== */
.learning-path-section,
.projects-showcase,
.course-outcome-section {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto 80px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==================== TIMELINE MODULES ==================== */
.modules-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.timeline-item {
  display: flex;
  gap: 30px;
  animation: slideInRight 0.6s ease-out backwards;
}

.timeline-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-dot {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  z-index: 1;
}

.connector-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #667eea, #764ba2);
  position: absolute;
  top: 50px;
  opacity: 0.3;
}

.module-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 25px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.6s;
}

.module-card.hovered::before {
  left: 100%;
}

.module-card.hovered {
  transform: translateX(10px);
  box-shadow: 0 20px 50px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.module-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  transition: transform 0.4s ease;
}

.module-card.hovered .module-icon {
  transform: scale(1.1) rotate(5deg);
}

.module-content {
  flex: 1;
}

.module-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.module-description {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.module-meta {
  display: flex;
  gap: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.meta-icon {
  font-size: 16px;
}

.module-arrow {
  font-size: 28px;
  color: #667eea;
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.module-card.hovered .module-arrow {
  transform: translateX(10px);
  opacity: 1;
}

/* ==================== PROJECTS GRID ==================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.project-showcase-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 35px 30px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  animation: scaleIn 0.6s ease-out backwards;
}

.project-showcase-card.hovered {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.project-icon-large {
  font-size: 64px;
  margin-bottom: 20px;
  transition: transform 0.4s ease;
}

.project-showcase-card.hovered .project-icon-large {
  transform: scale(1.2) rotate(10deg);
}

.project-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.project-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.project-difficulty {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.time-icon {
  font-size: 16px;
}

.project-start-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.project-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.project-start-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* ==================== COURSE OUTCOME ==================== */
.course-outcome-section {
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.outcome-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 60px 50px;
}

.outcome-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.outcome-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: 40px;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.outcome-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  animation: scaleIn 0.6s ease-out backwards;
}

.outcome-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.outcome-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.outcome-text {
  flex: 1;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.outcome-check {
  font-size: 24px;
  color: #43e97b;
  font-weight: bold;
}

/* ==================== CTA SECTION ==================== */
.roadmap-cta {
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

.roadmap-cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.roadmap-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.cta-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon {
  font-size: 20px;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
  .hero-badge {
    display: none !important;
  }

  .timeline-item {
    gap: 20px;
  }

  .module-card {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .roadmap-container {
    padding: 50px 20px;
  }

  .roadmap-title {
    font-size: 36px;
  }

  .roadmap-subtitle {
    font-size: 16px;
  }

  .roadmap-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .section-title {
    font-size: 32px;
  }

  .timeline-item {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .timeline-connector {
    width: 100%;
    height: 50px;
  }

  .connector-line {
    width: 2px;
    height: 100%;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
  }

  .module-card {
    width: 100%;
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .roadmap-container {
    padding: 32px 16px;
  }

  .roadmap-hero {
    margin-bottom: 40px;
  }

  .roadmap-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .roadmap-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .roadmap-stats {
    gap: 15px;
  }

  .stat-box {
    flex: 1;
    min-width: calc(50% - 10px);
  }

  .section-title {
    font-size: 24px;
  }

  .section-subtitle {
    font-size: 13px;
  }

  .timeline-dot {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .module-card {
    padding: 20px;
    border-radius: 16px;
  }

  .module-icon {
    width: 60px;
    height: 60px;
    font-size: 32px;
    border-radius: 14px;
  }

  .module-title {
    font-size: 18px;
  }

  .module-description {
    font-size: 13px;
    line-height: 1.5;
  }

  .module-meta {
    justify-content: center;
    gap: 15px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-showcase-card {
    padding: 24px 20px;
  }

  .project-icon-large {
    font-size: 48px;
  }

  .project-name {
    font-size: 18px;
  }

  .outcome-content {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .outcome-title {
    font-size: 24px;
  }

  .outcome-subtitle {
    font-size: 14px;
  }

  .outcome-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .outcome-card {
    padding: 20px;
    gap: 15px;
  }

  .outcome-icon {
    font-size: 32px;
  }

  .outcome-text {
    font-size: 14px;
  }

  .roadmap-cta {
    padding: 40px 20px;
    border-radius: 24px;
  }

  .roadmap-cta h2 {
    font-size: 24px;
  }

  .roadmap-cta p {
    font-size: 14px;
  }

  .cta-button {
    padding: 14px 28px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) translateX(20px) rotate(5deg);
  }

  66% {
    transform: translateY(-15px) translateX(-20px) rotate(-5deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

/* ==================== CONTAINER ==================== */
.roadmap-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  padding: 80px 40px;
  position: relative;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
}

/* ==================== BACKGROUND ELEMENTS ==================== */
.roadmap-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 6s infinite;
}

.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 25s infinite ease-in-out;
}

.sphere-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -15%;
  left: -10%;
}

.sphere-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 50%;
  right: -12%;
  animation-delay: 8s;
}

.sphere-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  bottom: -10%;
  left: 40%;
  animation-delay: 16s;
}

/* ==================== HERO SECTION ==================== */
.roadmap-hero {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 25px;
}

.badge-icon {
  font-size: 20px;
}

.badge-text {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.roadmap-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.highlight {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roadmap-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Stats */
.roadmap-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.15);
}

/* ==================== SECTION HEADERS ==================== */
.learning-path-section,
.projects-showcase,
.course-outcome-section {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto 80px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==================== TIMELINE MODULES ==================== */
.modules-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.timeline-item {
  display: flex;
  gap: 30px;
  animation: slideInRight 0.6s ease-out backwards;
}

.timeline-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-dot {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  z-index: 1;
}

.connector-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, #667eea, #764ba2);
  position: absolute;
  top: 50px;
  opacity: 0.3;
}

.module-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 25px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.6s;
}

.module-card.hovered::before {
  left: 100%;
}

.module-card.hovered {
  transform: translateX(10px);
  box-shadow: 0 20px 50px rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.module-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  transition: transform 0.4s ease;
}

.module-card.hovered .module-icon {
  transform: scale(1.1) rotate(5deg);
}

.module-content {
  flex: 1;
}

.module-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.module-description {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.module-meta {
  display: flex;
  gap: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.meta-icon {
  font-size: 16px;
}

.module-arrow {
  font-size: 28px;
  color: #667eea;
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.module-card.hovered .module-arrow {
  transform: translateX(10px);
  opacity: 1;
}

/* ==================== PROJECTS GRID ==================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.project-showcase-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 35px 30px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  animation: scaleIn 0.6s ease-out backwards;
}

.project-showcase-card.hovered {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.project-icon-large {
  font-size: 64px;
  margin-bottom: 20px;
  transition: transform 0.4s ease;
}

.project-showcase-card.hovered .project-icon-large {
  transform: scale(1.2) rotate(10deg);
}

.project-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.project-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.project-difficulty {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.time-icon {
  font-size: 16px;
}

.project-start-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.project-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.project-start-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* ==================== COURSE OUTCOME ==================== */
.course-outcome-section {
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.outcome-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 60px 50px;
}

.outcome-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.outcome-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: 40px;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.outcome-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  animation: scaleIn 0.6s ease-out backwards;
}

.outcome-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.outcome-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.outcome-text {
  flex: 1;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.outcome-check {
  font-size: 24px;
  color: #43e97b;
  font-weight: bold;
}

/* ==================== CTA SECTION ==================== */
.roadmap-cta {
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

.roadmap-cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
}

.roadmap-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 35px;
}

.cta-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 15px;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.cta-icon {
  font-size: 20px;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
  .hero-badge {
    display: none !important;
  }

  .timeline-item {
    gap: 20px;
  }

  .module-card {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .roadmap-container {
    padding: 50px 20px;
  }

  .roadmap-title {
    font-size: 36px;
  }

  .roadmap-subtitle {
    font-size: 16px;
  }

  .roadmap-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .section-title {
    font-size: 32px;
  }

  .timeline-item {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .timeline-connector {
    width: 100%;
    height: 50px;
  }

  .connector-line {
    width: 2px;
    height: 100%;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
  }

  .module-card {
    width: 100%;
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .roadmap-container {
    padding: 32px 16px;
  }

  .roadmap-hero {
    margin-bottom: 40px;
  }

  .roadmap-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .roadmap-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 11px;
  }

  .roadmap-stats {
    gap: 15px;
  }

  .stat-box {
    flex: 1;
    min-width: calc(50% - 10px);
  }

  .section-title {
    font-size: 24px;
  }

  .section-subtitle {
    font-size: 13px;
  }

  .timeline-dot {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .module-card {
    padding: 20px;
    border-radius: 16px;
  }

  .module-icon {
    width: 60px;
    height: 60px;
    font-size: 32px;
    border-radius: 14px;
  }

  .module-title {
    font-size: 18px;
  }

  .module-description {
    font-size: 13px;
    line-height: 1.5;
  }

  .module-meta {
    justify-content: center;
    gap: 15px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-showcase-card {
    padding: 24px 20px;
  }

  .project-icon-large {
    font-size: 48px;
  }

  .project-name {
    font-size: 18px;
  }

  .outcome-content {
    padding: 32px 20px;
    border-radius: 20px;
  }

  .outcome-title {
    font-size: 24px;
  }

  .outcome-subtitle {
    font-size: 14px;
  }

  .outcome-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .outcome-card {
    padding: 20px;
    gap: 15px;
  }

  .outcome-icon {
    font-size: 32px;
  }

  .outcome-text {
    font-size: 14px;
  }

  .roadmap-cta {
    padding: 40px 20px;
    border-radius: 24px;
  }

  .roadmap-cta h2 {
    font-size: 24px;
  }

  .roadmap-cta p {
    font-size: 14px;
  }

  .cta-button {
    padding: 14px 28px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==================== ANIMATIONS ==================== */
@keyframes float {

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

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

@keyframes floatRandom1 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(30px, -30px) rotate(90deg);
  }

  50% {
    transform: translate(-20px, -50px) rotate(180deg);
  }

  75% {
    transform: translate(40px, -20px) rotate(270deg);
  }
}

@keyframes floatRandom2 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-40px, 30px) rotate(-90deg);
  }

  50% {
    transform: translate(30px, 60px) rotate(-180deg);
  }

  75% {
    transform: translate(-30px, 20px) rotate(-270deg);
  }
}

@keyframes gridPulse {

  0%,
  100% {
    opacity: 0.05;
  }

  50% {
    opacity: 0.15;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

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

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

@keyframes shine {
  0% {
    left: -150%;
  }

  100% {
    left: 150%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4),
      0 0 40px rgba(102, 126, 234, 0.2),
      0 8px 32px rgba(102, 126, 234, 0.3);
  }

  50% {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.6),
      0 0 60px rgba(102, 126, 234, 0.4),
      0 12px 48px rgba(102, 126, 234, 0.5);
  }
}

@keyframes pulseScale {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* ==================== CONTAINER ==================== */
.daily-quiz-container {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* Security Alert */
.security-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}

.security-alert .alert-icon {
  width: 18px;
  height: 18px;
}

.cheat-count {
  font-size: 0.85em;
  opacity: 0.9;
}

.security-info {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}

.security-info .security-icon {
  width: 16px;
  height: 16px;
}

@keyframes slideDown {
  from {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* Ensure fullscreen compatibility */
.daily-quiz-container:fullscreen {
  width: 100vw;
  height: 100vh;
}

.daily-quiz-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}

.daily-quiz-container:-moz-full-screen {
  width: 100vw;
  height: 100vh;
}

.daily-quiz-ide-container {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ==================== BACKGROUND ==================== */
.quiz-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.quiz-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridPulse 4s infinite;
}

.quiz-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  animation: float 20s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  left: -10%;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #43e97b, #38d167);
  bottom: -10%;
  right: -10%;
  animation-delay: 10s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 50%;
  left: 50%;
  animation-delay: 5s;
}

/* ==================== FLOATING ELEMENTS ==================== */
.floating-elements {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.float-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.float-icon .icon {
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.6);
}

.float-1 {
  top: 15%;
  left: 10%;
  animation: floatRandom1 25s infinite ease-in-out;
}

.float-2 {
  top: 25%;
  right: 15%;
  animation: floatRandom2 30s infinite ease-in-out;
  animation-delay: 2s;
}

.float-3 {
  bottom: 20%;
  left: 15%;
  animation: floatRandom1 28s infinite ease-in-out;
  animation-delay: 4s;
}

/* ==================== LOADING ==================== */
.loading-wrapper,
.error-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(102, 126, 234, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

.loading-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.error-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.error-icon {
  width: 60px;
  height: 60px;
  color: #f5576c;
}

.error-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* ==================== LOCKED STATE ==================== */
.locked-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 60px 40px;
  animation: scaleIn 0.6s ease-out;
}

.locked-icon-wrapper {
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  background: rgba(67, 233, 123, 0.15);
  border: 2px solid rgba(67, 233, 123, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseScale 2s infinite;
}

.locked-icon {
  width: 50px;
  height: 50px;
  color: #43e97b;
}

.locked-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  color: white;
}

.locked-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin-bottom: 24px;
}

.locked-timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.timer-icon {
  width: 18px;
  height: 18px;
  color: #667eea;
}

/* ==================== QUIZ CARD ==================== */
.quiz-card {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: scaleIn 0.6s ease-out;
}

/* ==================== HEADER ==================== */
.quiz-header {
  text-align: center;
  margin-bottom: 30px;
  animation: fadeInUp 0.8s ease-out 0.1s backwards;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 50px;
  padding: 8px 20px;
  margin-bottom: 20px;
}

.badge-icon {
  width: 18px;
  height: 18px;
  color: #667eea;
}

.badge-text {
  font-size: 13px;
  color: #8b9bff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.quiz-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 16px;
}

.gradient-text {
  background: linear-gradient(135deg, #667eea, #f093fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quiz-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.date-icon {
  width: 16px;
  height: 16px;
}

/* ==================== STATUS MESSAGE ==================== */
.status-message {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 30px;
  font-size: 14px;
  color: #8b9bff;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.status-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==================== QUESTION SECTION ==================== */
.question-section {
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out 0.3s backwards;
}

.question-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.question-icon {
  width: 28px;
  height: 28px;
  color: #667eea;
  flex-shrink: 0;
  margin-top: 2px;
}

.question-title {
  font-size: 22px;
  font-weight: 700;
  color: white;
  line-height: 1.4;
  flex: 1;
}

.question-description {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 12px;
  border-left: 3px solid rgba(102, 126, 234, 0.5);
  margin-top: 16px;
}

/* ==================== SOLVE IN IDE BUTTON ==================== */
.solve-ide-button {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 30px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  z-index: 1;
  transition: all 0.4s ease;
}

.solve-ide-button:hover .button-background {
  background: linear-gradient(135deg, #764ba2, #f093fb);
  transform: scale(1.02);
}

.solve-ide-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 60px rgba(102, 126, 234, 0.6);
}

.solve-ide-button:active {
  transform: translateY(-2px) scale(0.98);
}

.button-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 40px;
}

.button-icon {
  width: 28px;
  height: 28px;
  color: white;
}

.button-text {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.button-shine {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shine 3s infinite;
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}

/* ==================== FOOTER ==================== */
.quiz-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease-out 0.5s backwards;
}

.footer-icon {
  width: 20px;
  height: 20px;
  color: #ffd700;
}

.footer-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .header-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .daily-quiz-container {
    padding: 30px 15px;
  }

  .quiz-card {
    padding: 30px 20px;
  }

  .quiz-title {
    font-size: 28px;
  }

  .question-title {
    font-size: 18px;
  }

  .question-description {
    padding: 16px;
  }

  .button-content {
    padding: 18px 32px;
  }

  .button-text {
    font-size: 18px;
  }

  .button-icon {
    width: 24px;
    height: 24px;
  }

  .float-icon {
    width: 50px;
    height: 50px;
  }

  .float-icon .icon {
    width: 24px;
    height: 24px;
  }

  .locked-wrapper {
    padding: 40px 30px;
  }

  .locked-title {
    font-size: 28px;
  }

  .locked-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .locked-icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .daily-quiz-container {
    padding: 24px 12px;
  }

  .quiz-card {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .quiz-title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .header-badge {
    padding: 6px 16px;
    margin-bottom: 16px;
    display: none !important;
  }

  .badge-text {
    font-size: 11px;
  }

  .question-header {
    flex-direction: column;
    gap: 8px;
  }

  .question-title {
    font-size: 16px;
  }

  .question-description {
    padding: 12px;
    font-size: 14px;
    margin-top: 12px;
  }

  .solve-ide-button {
    margin-bottom: 20px;
  }

  .button-content {
    padding: 14px 24px;
  }

  .button-text {
    font-size: 16px;
  }

  .button-icon {
    width: 20px;
    height: 20px;
  }

  .locked-wrapper {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .locked-title {
    font-size: 22px;
  }

  .locked-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }

  .locked-icon {
    width: 30px;
    height: 30px;
  }

  .locked-text {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .locked-timer {
    padding: 10px 16px;
    font-size: 13px;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==================== ANIMATIONS ==================== */
@keyframes float {

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

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

@keyframes floatRandom1 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(30px, -30px) rotate(90deg);
  }

  50% {
    transform: translate(-20px, -50px) rotate(180deg);
  }

  75% {
    transform: translate(40px, -20px) rotate(270deg);
  }
}

@keyframes floatRandom2 {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-40px, 30px) rotate(-90deg);
  }

  50% {
    transform: translate(30px, 60px) rotate(-180deg);
  }

  75% {
    transform: translate(-30px, 20px) rotate(-270deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5),
      0 0 40px rgba(102, 126, 234, 0.3),
      0 0 60px rgba(102, 126, 234, 0.2);
  }

  50% {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.7),
      0 0 60px rgba(102, 126, 234, 0.5),
      0 0 90px rgba(102, 126, 234, 0.3);
  }
}

@keyframes gridPulse {

  0%,
  100% {
    opacity: 0.05;
  }

  50% {
    opacity: 0.15;
  }
}

/* ==================== CONTAINER ==================== */
.no-premium-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* ==================== BACKGROUND ==================== */
.premium-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.premium-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridPulse 4s infinite;
}

.premium-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  animation: float 20s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  left: -10%;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  bottom: -10%;
  right: -10%;
  animation-delay: 10s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  top: 50%;
  left: 50%;
  animation-delay: 5s;
}

/* ==================== FLOATING ELEMENTS ==================== */
.floating-elements {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.float-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.float-icon .icon {
  width: 30px;
  height: 30px;
  color: rgba(255, 255, 255, 0.6);
}

.float-1 {
  top: 15%;
  left: 10%;
  animation: floatRandom1 25s infinite ease-in-out;
}

.float-2 {
  top: 25%;
  right: 15%;
  animation: floatRandom2 30s infinite ease-in-out;
  animation-delay: 2s;
}

.float-3 {
  bottom: 20%;
  left: 15%;
  animation: floatRandom1 28s infinite ease-in-out;
  animation-delay: 4s;
}

.float-4 {
  bottom: 30%;
  right: 10%;
  animation: floatRandom2 32s infinite ease-in-out;
  animation-delay: 6s;
}

/* ==================== MAIN CONTENT ==================== */
.premium-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  animation: fadeInUp 0.8s ease-out;
}

/* ==================== LOCK ICON ==================== */
.lock-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  animation: fadeInUp 0.8s ease-out 0.1s backwards;
}

.lock-circle {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: glow 3s infinite;
}

.lock-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(102, 126, 234, 0.6);
  animation: pulseRing 2s infinite;
}

.lock-pulse.pulse-2 {
  animation-delay: 1s;
}

.lock-icon {
  width: 60px;
  height: 60px;
  color: #667eea;
  filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5));
  animation: float 3s infinite ease-in-out;
}

/* ==================== BADGE ==================== */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 50px;
  padding: 10px 24px;
  margin-bottom: 25px;
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.badge-icon {
  width: 20px;
  height: 20px;
  color: #ffd700;
}

.badge-text {
  font-size: 13px;
  color: #ffd700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ==================== TITLE ==================== */
.premium-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  line-height: 1.1;
  animation: fadeInUp 0.8s ease-out 0.3s backwards;
}

.gradient-text {
  background: linear-gradient(135deg, #667eea, #f093fb, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==================== SUBTITLE ==================== */
.premium-subtitle {
  font-size: clamp(16px, 3vw, 20px);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 40px;
  line-height: 1.6;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* ==================== FEATURES ==================== */
.premium-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out 0.5s backwards;
}

.feature-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.feature-icon-wrapper {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feature-item:hover .feature-icon-wrapper {
  background: linear-gradient(135deg, #667eea, #764ba2);
  transform: rotate(10deg) scale(1.1);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
  border-color: rgba(255, 255, 255, 0.4);
}

.feature-icon {
  width: 22px;
  height: 22px;
  color: #667eea;
  transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
  color: white;
}

.feature-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

/* ==================== BUTTON ==================== */
.upgrade-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 18px 40px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.upgrade-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #764ba2, #f093fb);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upgrade-button:hover::before {
  opacity: 1;
}

.upgrade-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 50px rgba(102, 126, 234, 0.6);
}

.button-icon {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

.upgrade-button span {
  position: relative;
  z-index: 1;
}

.button-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shine 3s infinite;
}

/* ==================== NOTE ==================== */
.premium-note {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 30px;
  animation: fadeInUp 0.8s ease-out 0.7s backwards;
}

.highlight {
  color: #ffd700;
  font-weight: 700;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .no-premium-container {
    padding: 30px 15px;
  }

  .lock-circle {
    width: 110px;
    height: 110px;
  }

  .lock-icon {
    width: 45px;
    height: 45px;
  }

  .premium-title {
    font-size: 30px;
  }

  .premium-subtitle {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .premium-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .upgrade-button {
    width: 100%;
    justify-content: center;
    padding: 16px 32px;
    font-size: 16px;
  }

  .float-icon {
    width: 50px;
    height: 50px;
  }

  .float-icon .icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480px) {
  .premium-title {
    font-size: 26px;
  }

  .premium-badge {
    padding: 8px 18px;
  }

  .badge-text {
    font-size: 11px;
  }

  .feature-item {
    padding: 16px;
  }

  .feature-text {
    font-size: 13px;
  }

  .premium-note {
    font-size: 13px;
  }
}/* ==================== LIVE COURSES PREMIUM STYLES ==================== */

:root {
    --primary-accent: #6366f1;
    --secondary-accent: #f472b6;
    --bg-deep: #080718;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

@keyframes blobMotion {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-30px, 50px) scale(1.1);
    }
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pulseLive {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.course-page-optimized {
    min-height: 100vh;
    background: var(--bg-deep);
    color: #fff;
    font-family: 'Inter', sans-serif;
    position: relative;
    padding: 0 5%;
    scroll-behavior: smooth;
    overflow: hidden;
    /* Prevent blobs from causing scroll */
}

/* Fix for Double Scrollbar & Root Constraints */
:root:has(.course-page-optimized) {
    overflow-x: hidden;
}

:root:has(.course-page-optimized) body {
    overflow: visible !important;
    margin: 0;
    padding: 0;
}

#root:has(.course-page-optimized) {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.page-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    filter: blur(100px);
    opacity: 0.15;
    z-index: 0;
    animation: blobMotion 20s infinite ease-in-out;
}

.blob-1 {
    background: var(--primary-accent);
    top: -10%;
    right: -10%;
}

.blob-2 {
    background: var(--secondary-accent);
    bottom: 0;
    left: -10%;
    animation-delay: -5s;
}

/* ==================== NAVIGATION ==================== */
.nav-back-fixed {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 1000;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.nav-back-fixed:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-5px);
    border-color: var(--primary-accent);
}

/* ==================== PROFILE CIRCLE (Consolidated) ==================== */
.profile-circle {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-circle:hover {
    transform: scale(1.05);
}

.profile-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.profile-text {
    font-size: 20px;
    font-weight: 700;
    color: white;
    z-index: 1;
}

.profile-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    border: 2px solid #080718;
    z-index: 2;
    animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

.nav-back-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.nav-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-5px);
}

.course-main-content {
    position: relative;
    z-index: 5;
    padding-bottom: 40px;
}

/* Hero Section V2 */
.course-hero-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 0;
    gap: 60px;
}

.hero-content-wrap {
    flex: 1;
    max-width: 600px;
    animation: textReveal 0.8s ease-out;
}

.hero-tag {
    color: var(--secondary-accent);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.2rem;
    margin-bottom: 16px;
}

.hero-main-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.highlight-text {
    background: linear-gradient(135deg, #818cf8, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    color: #94a3b8;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.join-now-action {
    background: linear-gradient(135deg, var(--primary-accent), #4f46e5);
    border: none;
    color: #fff;
    padding: 16px 36px;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.join-now-action:hover:not(:disabled) {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.6);
}

.join-now-action:disabled {
    opacity: 0.8;
    cursor: wait;
}

.join-loader {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
}

.live-status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.1);
    padding: 8px 16px;
    border-radius: 100px;
    color: #ef4444;
    font-weight: 900;
    font-size: 12px;
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulseLive 2s infinite;
}

.hero-visual {
    flex: 0.8;
    display: flex;
    justify-content: center;
}

.visual-card {
    width: 300px;
    height: 300px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.python-logo-fancy {
    font-size: 120px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.5));
}

.visual-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1), transparent);
}

/* Feature Tiles */
.course-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 60px 0;
}

.feature-tile {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 32px;
    border-radius: 24px;
    transition: all 0.3s ease;
}

.feature-tile:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
}

.feature-tile.primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(244, 114, 182, 0.1));
    border-color: rgba(99, 102, 241, 0.3);
}

.tile-icon {
    color: var(--primary-accent);
    margin-bottom: 20px;
}

.feature-tile h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.feature-tile p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Curriculum Preview */
.curriculum-preview {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.curriculum-category {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-accent);
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    padding-left: 5px;
    border-left: 3px solid var(--secondary-accent);
}

.section-heading {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
}

.curriculum-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.curriculum-item {
    background: rgba(255, 255, 255, 0.02);
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.3s;
}

.curriculum-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
    border-color: rgba(99, 102, 241, 0.2);
}

.curriculum-icon-wrap {
    width: 28px;
    height: 28px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.curriculum-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.check-icon {
    color: #10b981;
}

.course-error-boundary {
    margin-top: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 20px;
    border-radius: 12px;
    color: #ef4444;
    text-align: center;
    font-weight: 600;
}

/* ==================== LIVE SESSION INTERFACE ==================== */
.live-session-container {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.session-hud {
    height: 60px;
    background: rgba(15, 12, 41, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: relative;
    z-index: 100;
}

.hud-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.live-chip {
    background: #ef4444;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.room-name {
    font-weight: 600;
    color: #cbd5e1;
    font-size: 14px;
}

.hud-close-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 700;
    font-size: 13px;
}

.hud-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.dyte-viewport {
    flex: 1;
    position: relative;
}

/* Loading/Error Overlays */
.live-session-overlay {
    position: fixed;
    inset: 0;
    background: #080718;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.quantum-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(99, 102, 241, 0.1);
    border-top: 4px solid #6366f1;
    border-radius: 50%;
    animation: loaderSpin 1s infinite linear;
    margin: 0 auto 30px;
}

.error-card {
    max-width: 400px;
    padding: 40px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.1);
    border-radius: 24px;
}

.error-icon {
    color: #ef4444;
    margin-bottom: 24px;
}

.exit-btn {
    margin-top: 30px;
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .course-hero-v2 {
        flex-direction: column;
        text-align: center;
        padding: 40px 0;
    }

    .course-features-grid {
        grid-template-columns: 1fr;
    }

    .curriculum-cards {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        display: none;
    }
}

/* ==================== COURSE VERIFICATION ==================== */
.course-verification-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 400px;
}

.course-transaction-verification {
    display: flex;
    gap: 10px;
    width: 100%;
}

.course-transaction-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.course-transaction-input:focus {
    border-color: #3776ab;
    background: rgba(55, 118, 171, 0.1);
}

.course-verify-btn {
    background: #3776ab;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.course-verify-btn:hover {
    background: #4b8bbe;
    transform: translateY(-2px);
}

.course-verification-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    font-style: italic;
    margin: 0;
}

.course-reopen-link {
    background: none;
    border: none;
    color: #ffd343;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    text-align: left;
    width: fit-content;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.course-reopen-link:hover {
    opacity: 1;
}

.course-verification-error {
    color: #ff6b6b;
    font-size: 12px;
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    padding-left: 4px;
    animation: fadeIn 0.3s ease;
}

/* Python Logo Container */
.python-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    animation: floating 3s ease-in-out infinite;
}

.python-svg {
    filter: drop-shadow(0 0 20px rgba(55, 118, 171, 0.4));
    max-width: 100%;
    height: auto;
}

.python-card-svg {
    filter: drop-shadow(0 0 10px rgba(55, 118, 171, 0.3));
    transition: transform 0.3s ease;
    max-width: 100%;
    height: auto;
}

.premium-card:hover .python-card-svg {
    transform: rotate(10deg) scale(1.1);
}

@keyframes floating {

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

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

/* Course Detailed Info Cards */
.course-info-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.info-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 32px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.info-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-8px);
    border-color: var(--primary-accent);
}

.info-icon-wrap {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--primary-accent);
}

.info-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.info-card p {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1.6;
}

.info-highlight {
    color: var(--secondary-accent);
    font-weight: 800;
}

@media (max-width: 768px) {
    .course-info-details {
        grid-template-columns: 1fr;
    }

}

.schedule-detail-note {
    display: block;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--secondary-accent);
    font-weight: 600;
    opacity: 0.9;
}

/* Faculty Section Styles (based on ScheduleInterview) */
.faculty-section {
    margin-top: 80px;
    text-align: center;
}

.faculty-grid {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.faculty-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 350px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.6s ease-out backwards;
}

.faculty-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-accent);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.card-compact-header {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.interviewer-avatar-small {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    overflow: hidden;
}

.avatar-img-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-info {
    flex: 1;
    min-width: 0;
}

.name-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.interviewer-name-compact {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.card-badge-compact {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-icon-tiny {
    width: 12px;
    height: 12px;
    color: #0f0c29;
}

.interviewer-role-compact {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.company-badge-compact {
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #818cf8;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.stats-row-compact {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.availability-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4ade80;
}

.availability-dot-small {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 10px #4ade80;
}

.tags-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.skill-tag-compact {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.linkedin-btn-faculty {
    margin-left: auto;
    color: #0A66C2;
    transition: 0.2s;
}

.linkedin-btn-faculty:hover {
    transform: scale(1.1);
}/* ==================== GLOBAL RESET ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== ANIMATIONS ==================== */
@keyframes float {

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

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

@keyframes floatRandom1 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -30px) rotate(90deg);
    }

    50% {
        transform: translate(-20px, -50px) rotate(180deg);
    }

    75% {
        transform: translate(40px, -20px) rotate(270deg);
    }
}

@keyframes floatRandom2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-40px, 30px) rotate(-90deg);
    }

    50% {
        transform: translate(30px, 60px) rotate(-180deg);
    }

    75% {
        transform: translate(-30px, 20px) rotate(-270deg);
    }
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.05;
    }

    50% {
        opacity: 0.15;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes shine {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
    }
}

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

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

/* ==================== CONTAINER ==================== */
.schedule-interview-container {
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 60px;
    position: relative;
    overflow-x: hidden;
}

/* ==================== BACKGROUND ==================== */
.premium-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.premium-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridPulse 4s infinite;
}

.premium-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    animation: float 20s infinite ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    top: -10%;
    left: -10%;
}

.orb-2 {
    width: 450px;
    height: 450px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    bottom: -10%;
    right: -10%;
    animation-delay: 10s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    top: 50%;
    left: 50%;
    animation-delay: 5s;
}

/* ==================== FLOATING ELEMENTS ==================== */
.floating-elements {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.float-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.float-icon .icon {
    width: 30px;
    height: 30px;
    color: rgba(255, 255, 255, 0.6);
}

.float-1 {
    top: 15%;
    left: 10%;
    animation: floatRandom1 25s infinite ease-in-out;
}

.float-2 {
    top: 25%;
    right: 15%;
    animation: floatRandom2 30s infinite ease-in-out;
    animation-delay: 2s;
}

.float-3 {
    bottom: 20%;
    left: 15%;
    animation: floatRandom1 28s infinite ease-in-out;
    animation-delay: 4s;
}

.float-4 {
    bottom: 30%;
    right: 10%;
    animation: floatRandom2 32s infinite ease-in-out;
    animation-delay: 6s;
}

/* ==================== PROFILE CIRCLE ==================== */
.profile-circle {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    cursor: pointer;
    text-decoration: none;
}

.avatar-img-small {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
}

.linkedin-btn {
    margin-left: 8px;
    color: #0A66C2;
    transition: 0.2s ease-in-out;
    display: flex;
    align-items: center;
}

.linkedin-btn:hover {
    color: #004182;
    transform: scale(1.1);
}

.availability-linkedin {
    margin-left: 10px;
    display: flex;
    align-items: center;
    color: #0A66C2;
    transition: 0.2s;
}

.availability-linkedin:hover {
    color: #004182;
    transform: scale(1.1);
}


.profile-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.profile-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
}

.profile-text {
    font-size: 24px;
}

.profile-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #4ade80;
    border: 2px solid #0f0c29;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* ==================== MAIN CONTENT ==================== */
.interview-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    animation: fadeInUp 0.8s ease-out;
}

/* ==================== HEADER ==================== */
.interview-header {
    text-align: center;
    margin-bottom: 50px;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50px;
    padding: 10px 24px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease-out 0.1s backwards;
    transition: all 0.3s ease;
}

.header-badge:hover {
    background: rgba(255, 215, 0, 0.25);
    transform: translateY(-2px);
}

.badge-icon {
    width: 20px;
    height: 20px;
    color: #ffd700;
    animation: rotate 20s linear infinite;
}

.badge-text {
    font-size: 13px;
    color: #ffd700;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.interview-title {
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
    line-height: 1.1;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.gradient-text {
    background: linear-gradient(135deg, #667eea, #f093fb, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: float 3s infinite ease-in-out;
}

.interview-subtitle {
    font-size: clamp(16px, 3vw, 20px);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease-out 0.3s backwards;
}

/* ==================== FEATURES GRID ==================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    transition: all 0.4s ease;
    animation: scaleIn 0.6s ease-out backwards;
    cursor: pointer;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.4);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.feature-icon-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-circle {
    transform: rotate(360deg) scale(1.1);
}

.feature-icon {
    width: 28px;
    height: 28px;
    color: white;
}

.feature-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.feature-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* ==================== INTERVIEWERS GRID - COMPACT ==================== */
.interviewers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

/* ==================== INTERVIEWER CARD - COMPACT ==================== */
.interviewer-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.6s ease-out backwards;
    cursor: pointer;
}

.interviewer-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.interviewer-card.selected {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
}

.card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.interviewer-card:hover .card-shine {
    left: 200%;
}

/* ==================== COMPACT HEADER ==================== */
.card-compact-header {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

/* ==================== INTERVIEWER AVATAR - FIX ==================== */
.interviewer-avatar-small {
    width: 50px;
    height: 50px;
    /* REMOVE the gradient background */
    /* background: linear-gradient(135deg, #667eea, #764ba2); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    /* ADD overflow hidden to show image properly */
    overflow: hidden;
}

/* Add this new class for the actual image */
.avatar-img-small {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    /* Remove any conflicting styles */
    border: none !important;
}





.interviewer-card:hover .interviewer-avatar-small {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}



.header-info {
    flex: 1;
    min-width: 0;
}

.name-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.interviewer-name-compact {
    font-size: 16px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-badge-compact {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-icon-tiny {
    width: 12px;
    height: 12px;
    color: #0f0c29;
}

.interviewer-role-compact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-badge-compact {
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}

/* ==================== COMPACT STATS ==================== */
.stats-row-compact {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.stat-compact {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.stat-icon-small {
    width: 14px;
    height: 14px;
    color: #667eea;
}

.stat-compact:first-child .stat-icon-small {
    color: #ffd700;
}

.availability-compact {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #4ade80;
    margin-left: auto;
}

.availability-dot-small {
    width: 6px;
    height: 6px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* ==================== COMPACT TAGS ==================== */
.tags-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.skill-tag-compact {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    transition: all 0.2s ease;
}

.skill-tag-compact:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

/* ==================== COMPACT FOOTER ==================== */
.card-footer-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.price-compact {
    flex: 1;
}

.price-value-compact {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.google-form-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.google-form-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.google-form-btn:disabled {
    opacity: 0.8;
    cursor: wait;
}

.google-form-btn.loading {
    padding: 8px 32px;
}

.join-loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

.btn-icon-small {
    width: 14px;
    height: 14px;
}

/* ==================== TRANSACTION VERIFICATION ==================== */
.card-footer-compact.verification-active {
    flex-direction: column;
    align-items: flex-start;
}

.card-footer-compact.verification-active .price-compact {
    display: none;
    /* Hide price to give more space for verification flow */
}

.transaction-verification-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.transaction-verification {
    display: flex;
    gap: 8px;
    width: 100%;
}

.verification-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    font-style: italic;
}

.reopen-form-link {
    background: none;
    border: none;
    color: #ffd700;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    text-align: left;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.reopen-form-link:hover {
    opacity: 1;
}

.transaction-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: all 0.3s;
}

.transaction-input:focus {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.verify-id-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.verify-id-btn:hover {
    background: #764ba2;
    transform: translateY(-2px);
}

/* ==================== INFO BOX ==================== */
.info-box {
    display: flex;
    gap: 24px;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 35px;
    animation: fadeInUp 0.8s ease-out 0.8s backwards;
    margin-bottom: 40px;
    transition: all 0.3s ease;
}

.info-box:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.info-icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.info-box:hover .info-icon-wrapper {
    transform: rotate(10deg) scale(1.1);
}

.info-icon {
    width: 35px;
    height: 35px;
    color: white;
}

.info-content {
    flex: 1;
}

.info-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.info-text {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.highlight {
    color: #ffd700;
    font-weight: 700;
    background: rgba(255, 215, 0, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

.course-error-boundary {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 15px;
    border-radius: 12px;
    color: #ef4444;
    text-align: center;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* ==================== STATS BANNER ==================== */
.stats-banner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px 30px;
    animation: fadeInUp 0.8s ease-out 0.9s backwards;
}

.banner-stat {
    text-align: center;
    transition: all 0.3s ease;
}

.banner-stat:hover {
    transform: translateY(-5px);
}

.banner-number {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #f093fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1;
}

.banner-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.banner-divider {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .interviewers-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .header-badge {
        display: none !important;
    }

    .interviewers-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .schedule-interview-container {
        padding: 60px 15px 40px;
    }

    .interview-title {
        font-size: 32px;
    }

    .interview-subtitle {
        font-size: 16px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .interviewers-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    .info-box {
        flex-direction: column;
        text-align: center;
        padding: 30px;
        gap: 20px;
    }

    .info-icon-wrapper {
        margin: 0 auto;
    }

    .stats-banner {
        flex-wrap: wrap;
        gap: 30px;
        padding: 30px 20px;
    }

    .banner-divider {
        display: none;
    }

    .banner-stat {
        flex: 1 1 45%;
    }
}

@media (max-width: 480px) {
    .interview-title {
        font-size: 26px;
    }

    .interview-subtitle {
        font-size: 14px;
    }

    .interviewers-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .banner-stat {
        flex: 1 1 100%;
    }

    .banner-number {
        font-size: 34px;
    }

    .info-title {
        font-size: 18px;
    }

    .info-text {
        font-size: 14px;
    }
}.device-restriction-overlay {
    display: none;
    /* Hidden by default on larger screens */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    /* Dark semi-transparent background */
    backdrop-filter: blur(15px);
    /* Strong blur effect */
    z-index: 99999;
    /* Ensure it's on top of everything */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: white;
}

.device-restriction-content {
    max-width: 600px;
    background: rgba(30, 30, 30, 0.6);
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.device-restriction-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.device-restriction-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff 0%, #a5a5a5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.device-restriction-message {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
}

/* Show on screens smaller than 1025px (Tablets and Mobiles) */
@media screen and (max-width: 1024px) {
    .device-restriction-overlay {
        display: flex;
    }
}.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 40px;
    box-sizing: border-box;
}

.navbar.scrolled {
    height: calc(var(--navbar-height) - 10px);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.navbar-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.navbar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    letter-spacing: -0.5px;
    justify-self: start;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}

.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-links {
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    justify-self: center;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.nav-item:hover,
.nav-clickable:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.nav-icon {
    font-size: 18px;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}

.navbar-auth {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 6px 6px 6px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.nav-profile:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.profile-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.profile-rank {
    color: #6366f1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-avatar-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-nav {
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-badge-nav {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #161b22;
    border: 1px solid #39d353;
    color: #39d353;
    border-radius: 50px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.nav-profile:hover .streak-badge-nav {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(57, 211, 83, 0.3);
}

.auth-btns {
    display: flex;
    gap: 12px;
}

.btn-login,
.btn-signup {
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 44px !important;
    /* Lock height for perfect vertical alignment */
    line-height: 1 !important;
    /* Ensure text is centered within height */
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.btn-login {
    color: #ffffff !important;
    background: transparent !important;
    padding: 0 20px !important;
    /* Match horizontal sizing flow */
    opacity: 0.9;
}

.btn-login:hover {
    color: #fff !important;
    opacity: 1;
    transform: translateY(-1px);
}

.btn-signup {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
    color: #ffffff !important;
    height: 44px !important;
    padding: 0 28px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
}

.btn-signup:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5) !important;
    filter: brightness(1.1);
}

.navbar-mobile-toggle {
    display: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
}

@media (max-width: 1024px) {
    .navbar {
        padding: 0 20px;
    }

    .navbar-container {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }

    .navbar-logo {
        justify-self: start;
        order: 1;
    }

    .navbar-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 2;
        justify-self: center;
        margin-left: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .navbar-actions {
        order: 3;
        justify-self: end;
    }

    .navbar-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(12px);
        padding: 20px;
        gap: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        animation: slideDown 0.3s ease-out forwards;
        box-sizing: border-box;
    }

    .navbar-links.mobile-active {
        display: flex;
    }

    .nav-item {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.03);
    }

    .profile-info {
        display: none;
    }
}

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

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

@media (max-width: 768px) {
    .navbar {
        padding: 0 16px;
    }

    .navbar-container {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }

    .logo-img {
        height: 32px;
    }

    .navbar-logo {
        font-size: 18px;
    }

    .navbar-mobile-toggle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .btn-login,
    .btn-signup {
        font-size: 14px !important;
        height: 38px !important;
    }

    .btn-login {
        padding: 0 12px !important;
    }

    .btn-signup {
        padding: 0 20px !important;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0 12px;
    }

    .navbar-container {
        grid-template-columns: auto 1fr auto;
        gap: 6px;
    }

    .navbar-logo span:not(.gradient-text) {
        display: none;
        /* Hide "Coding" text to save space */
    }

    .navbar-logo {
        gap: 8px;
    }

    .navbar-mobile-toggle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .auth-btns {
        gap: 8px;
    }

    .btn-login,
    .btn-signup {
        font-size: 13px !important;
        height: 34px !important;
        font-weight: 600 !important;
    }

    .btn-login {
        padding: 0 8px !important;
    }

    .btn-signup {
        padding: 0 14px !important;
    }
}

/* Organization Corner Styles */
.organization-corner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.3s ease;
    cursor: pointer;
}

.organization-corner:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

.org-icon {
    font-size: 18px;
    color: #a855f7;
}

.org-text {
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .organization-corner {
        padding: 6px 12px;
        font-size: 12px;
        margin-right: 8px;
    }

    .org-icon {
        font-size: 16px;
    }
}.org-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.org-modal-content {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 24px;
    padding: 40px;
    max-width: 480px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.org-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-modal-close:hover {
    color: #fff;
    transform: rotate(90deg);
}

.org-modal-header {
    text-align: center;
    margin-bottom: 32px;
}

.org-modal-icon {
    font-size: 48px;
    color: #a855f7;
    margin-bottom: 16px;
}

.org-modal-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.org-modal-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.org-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.org-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.org-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.org-form-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    color: #fff;
    transition: all 0.3s ease;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.org-form-input:focus {
    outline: none;
    border-color: #6366f1;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.org-form-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.org-password-wrapper {
    position: relative;
}

.org-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.org-password-toggle:hover {
    color: #fff;
}

.org-submit-btn {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-top: 8px;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.org-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.org-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.org-loading-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.org-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .org-modal-content {
        padding: 32px 24px;
    }

    .org-modal-title {
        font-size: 24px;
    }

    .org-submit-btn {
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* Global Styles for Auth Pages (Signin, Signup, ForgotPassword, ResetPassword) */
:root {
    --auth-bg: #030712;
    --card-bg: rgba(17, 24, 39, 0.75);
    --accent-primary: #8b5cf6;
    --accent-secondary: #c084fc;
    --accent-glow: rgba(139, 92, 246, 0.3);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --input-bg: rgba(255, 255, 255, 0.03);
    --input-border: rgba(255, 255, 255, 0.08);
    --input-focus: #8b5cf6;
    --button-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --success: #10b981;
    --error: #ef4444;
}
/* Animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-30px) rotate(2deg);
    }

    66% {
        transform: translateY(-15px) rotate(-2deg);
    }
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
    }
}
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-6px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(6px);
    }
}
.shake {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
/* Main Container */
.auth-page-container {
    width: 100%;
    min-height: 100vh;
    background-color: var(--auth-bg);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
    padding: 100px 20px 60px;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}
/* Background Animated Elements */
.auth-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.auth-floating-code {
    position: absolute;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: rgba(139, 92, 246, 0.15);
    white-space: nowrap;
    animation: float 15s infinite ease-in-out;
    user-select: none;
}
/* Premium Card Style */
.auth-card {
    background: var(--card-bg);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: 32px;
    width: 100%;
    max-width: 900px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 10;
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0.5;
}
/* Header Sections */
.auth-header {
    text-align: center;
    padding: 48px 48px 32px;
}
.auth-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--button-gradient);
    border-radius: 20px;
    margin-bottom: 24px;
    font-size: 28px;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    transform: rotate(-5deg);
    transition: transform 0.3s ease;
}
.auth-logo-box:hover {
    transform: rotate(0deg) scale(1.1);
}
.auth-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    background: linear-gradient(to bottom right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 400;
}
/* Form Layout */
.auth-form-body {
    padding: 0 64px 40px;
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    text-align: left !important;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.auth-form-body::-webkit-scrollbar {
    width: 6px;
}
.auth-form-body::-webkit-scrollbar-track {
    background: transparent;
}
.auth-form-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.auth-form-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}
.auth-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 32px;
}
.auth-form.single-col {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    text-align: left !important;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Closely spaced as requested */
}
.form-group.full-width {
    grid-column: 1 / -1;
}
.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 4px;
}
.input-container {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-page-container input,
.auth-page-container select,
.auth-page-container textarea,
.auth-input {
    text-align: left !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
}
.auth-input {
    width: 100% !important;
    display: block !important;
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 18px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-family: 'Outfit', sans-serif !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: left !important;
}
.auth-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--input-focus) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2) !important;
}
.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    text-align: left !important;
}
/* Browser-specific placeholder alignment */
.auth-input::-webkit-input-placeholder {
    text-align: left !important;
}
.auth-input::-moz-placeholder {
    text-align: left !important;
}
.auth-input:-ms-input-placeholder {
    text-align: left !important;
}
/* Select Styling */
select.auth-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 45px;
}
select.auth-input option {
    background: #111827;
    color: #fff;
}
/* OTP Controls */
.otp-wrapper {
    display: flex;
    gap: 12px;
    width: 100%;
}
.otp-action-btn {
    padding: 0 24px;
    border-radius: 16px;
    border: 1px solid var(--accent-primary);
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-secondary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}
.otp-action-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 0 15px var(--accent-glow);
}
.otp-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--input-border);
}
.verification-status {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--success);
    padding: 12px 20px;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeIn 0.5s ease;
}
/* Password Requirements Component */
.pw-requirements-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 20px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.pw-req-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.pw-req-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.pw-req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s;
}
.pw-req-item.active {
    color: var(--success);
}
.pw-req-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}
.pw-req-item.active .pw-req-dot {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}
/* Checkbox Styling */
.auth-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.95rem;
    user-select: none;
}
.auth-custom-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--input-border);
    background: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-top: 2px;
}
input[type="checkbox"]:checked+.auth-custom-checkbox {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
input[type="checkbox"]:checked+.auth-custom-checkbox::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}
.auth-checkbox-text a {
    color: var(--accent-secondary);
    text-decoration: none;
    font-weight: 600;
}
.auth-checkbox-text a:hover {
    text-decoration: underline;
}
/* Submit Button */
.auth-submit-btn {
    grid-column: 1 / -1;
    background: var(--button-gradient);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.4);
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}
.auth-submit-btn:hover:not(:disabled) {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.5);
    filter: brightness(1.1);
}
.auth-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}
.auth-submit-btn:disabled {
    background: #334155;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.auth-submit-btn.loading {
    color: transparent;
}
.auth-submit-btn.loading::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rotate 0.8s infinite linear;
}
@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}
/* Footer Section */
.auth-footer {
    padding: 32px 64px 48px;
    text-align: center;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.auth-footer-text {
    color: var(--text-secondary);
    font-size: 1rem;
}
.auth-redirect-link {
    color: var(--accent-secondary);
    text-decoration: none;
    font-weight: 700;
    margin-left: 8px;
    transition: all 0.3s;
}
.auth-redirect-link:hover {
    color: #fff;
    text-shadow: 0 0 8px var(--accent-glow);
}
/* Organization Dropdown Custom */
.org-dropdown-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #111827;
    border: 1px solid var(--accent-primary);
    border-radius: 16px;
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.2s ease;
}
.org-item {
    padding: 12px 20px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.org-item:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #fff;
}
/* Responsive Scaling */
@media (max-width: 1024px) {
    .auth-card {
        max-width: 800px;
    }
}
@media (max-width: 768px) {
    .auth-page-container {
        padding: 80px 16px 40px;
        align-items: flex-start;
    }

    .auth-card {
        border-radius: 24px;
    }

    .auth-header {
        padding: 40px 32px 24px;
    }

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

    .auth-form-body {
        padding: 0 32px 32px;
    }

    .auth-form {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .auth-footer {
        padding: 32px;
    }
}
@media (max-width: 480px) {
    .auth-header {
        padding: 32px 20px 20px;
    }

    .auth-title {
        font-size: 1.6rem;
    }

    .auth-subtitle {
        font-size: 0.95rem;
    }

    .auth-form-body {
        padding: 0 20px 24px;
    }

    .auth-input {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .auth-submit-btn {
        padding: 16px;
        font-size: 1rem;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        gap: 12px;
    }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}










/* ==================== DESKTOP BENTO LAYOUT ==================== */
@media (min-width: 1025px) {
  .main-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px;
  }

  .main-card {
    height: 300px !important;
  }
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -30px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes particle-float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes scale-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* ==================== CONTAINER ==================== */
.home-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0118 0%, #1e0d3d 50%, #0f0a1e 100%);
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
  position: relative;
  overflow: hidden;
}



.profile-circle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
}

.profile-circle:hover {
  transform: translateY(-2px);
}

.profile-avatar {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 20px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  position: relative;
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.profile-circle:hover .profile-avatar {
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.profile-text {
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border-radius: 50%;
  border: 3px solid #0f0a1e;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
  animation: pulse-status 2s infinite;
}

@keyframes pulse-status {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}




















/* ==================== BACKGROUND ELEMENTS ==================== */
.background-wrapper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.background-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
  animation: pulse 8s infinite;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 20s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  left: -10%;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  bottom: -10%;
  right: -10%;
  animation-delay: 7s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  top: 50%;
  left: 50%;
  animation-delay: 14s;
}

/* Floating Particles */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  background: rgba(102, 126, 234, 0.6);
  border-radius: 50%;
  animation: particle-float linear infinite;
}

/* ==================== CONTENT WRAPPER ==================== */
.home-container .content-wrapper {
  position: relative;
  z-index: 10;
  padding: var(--navbar-height) 40px;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* ==================== HERO SECTION ==================== */
.hero-section {
  text-align: center;
  margin-bottom: 100px;
  animation: fadeInUp 0.8s ease-out;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  backdrop-filter: blur(10px);
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.hero-badge:hover {
  background: rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.badge-icon {
  width: 18px;
  height: 18px;
  color: #facc15;
}

.badge-text {
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(to right, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-title {
  font-size: 64px;
  font-weight: 800;
  margin-bottom: 24px;
  line-height: 1.1;
  letter-spacing: -2px;
}

.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
}

.hero-subtitle {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 40px;
  line-height: 1.7;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.btn-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-primary:hover .btn-icon {
  transform: translateX(4px);
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(102, 126, 234, 0.2);
}

.stat-icon {
  width: 32px;
  height: 32px;
  color: #22d3ee;
}

.stat-content {
  text-align: left;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(to right, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==================== FEATURES SECTION ==================== */
.features-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 80px;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.feature-card {
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
}

.feature-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-icon svg {
  width: 28px;
  height: 28px;
}

.feature-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==================== MAIN CARDS ==================== */
.main-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 32px;
  margin-bottom: 10px;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}


.main-card {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  height: 300px;
  border-radius: 28px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.main-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.card-background {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  transition: opacity 0.5s ease;
}

.card-bg-1 {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.card-bg-2 {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.main-card:hover .card-background {
  opacity: 0.2;
}

.card-content {
  position: relative;
  height: 100%;
  padding: 40px 32px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.main-card:hover .card-content {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.card-icon-wrapper {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.5s ease;
}

.main-card:hover .card-icon-wrapper {
  transform: scale(1.15) rotate(8deg);
}

.card-icon {
  width: 36px;
  height: 36px;
  color: white;
}

.card-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.main-card:hover .card-title {
  background: linear-gradient(to right, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-description {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: auto;
}

.card-footer {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-link-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.main-card:hover .card-link-text {
  color: #22d3ee;
}

.card-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.main-card:hover .card-arrow {
  transform: translateX(6px);
}

.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.main-card:hover .card-shine {
  opacity: 1;
  animation: shine 1.5s ease-in-out;
}

/* ==================== TRENDING SECTION ==================== */
.trending-section {
  margin-bottom: 80px;
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 20px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 32px;
  height: 32px;
  color: #22d3ee;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 4px;
}

.section-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.view-all-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.view-all-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.link-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.view-all-link:hover .link-arrow {
  transform: translateX(4px);
}

/* ==================== TRENDING GRID ==================== */
.trending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.trending-card {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 28px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}

.trending-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(102, 126, 234, 0.2);
}

.trending-card-bg {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  z-index: 0;
  transition: opacity 0.5s ease;
}

.trending-card:hover .trending-card-bg {
  opacity: 0.25;
}

.trending-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trending-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: white;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.trending-card:hover .trending-icon {
  transform: scale(1.1) rotate(6deg);
}

.trending-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: white;
}

.popularity-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.popularity-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
}

.trending-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ffd700;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 12px;
}

.badge-star {
  width: 14px;
  height: 14px;
  color: #facc15;
}

/* Card Glow Effect */
.card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 20px;
  box-shadow: 0 0 60px 10px currentColor;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.trending-card:hover .card-glow {
  opacity: 0.4;
}

/* ==================== TRENDING COURSES ==================== */
.course-card .trending-card-content {
  text-align: left;
  align-items: flex-start;
}

.course-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.meta-icon {
  width: 16px;
  height: 16px;
  color: #22d3ee;
}

.rating-star {
  color: #facc15;
}

.course-badge {
  margin-top: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: white;
}

/* ==================== CTA SECTION ==================== */
.cta-section {
  text-align: center;
  padding: 100px 20px;
  background: linear-gradient(135deg, #667eea33, #764ba233);
  border-radius: 30px;
  margin: 120px auto 60px auto;
  max-width: 1000px;
  animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta-title {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  line-height: 1.6;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 16px 36px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}

.cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.cta-button:hover .cta-arrow {
  transform: translateX(5px);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
}

@media (max-width: 1024px) {
  .main-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}




@media (max-width: 768px) {
  .home-container .content-wrapper {
    padding-top: 160px;
    /* Increased to ensure clearance of navbar */
  }

  .main-cards {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 36px;
    margin-bottom: 16px;
  }

  .cta-title {
    font-size: 32px;
  }

  .cta-section {
    padding: 70px 20px;
  }

  .features-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .home-container .content-wrapper {
    padding-top: 140px;
    /* Balanced for smaller screens */
  }

  .hero-title {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .trending-grid {
    grid-template-columns: 1fr;
  }
}* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #020617;
  color: #ffffff;
}

/* Light mode overrides handled at the bottom of the file */


/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -30px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

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

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

@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes particle-float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

/* ==================== CONTAINER ==================== */
.languages-container {
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* ==================== BACKGROUND ELEMENTS ==================== */
.background-elements {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.background-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
  animation: pulse 8s infinite;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  animation: float 20s infinite ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: -10%;
  left: -10%;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  bottom: -10%;
  right: -10%;
  animation-delay: 7s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  top: 50%;
  left: 50%;
  animation-delay: 14s;
}

/* Floating Particles */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  background: rgba(102, 126, 234, 0.6);
  border-radius: 50%;
  animation: particle-float linear infinite;
}

/* ==================== CONTENT WRAPPER ==================== */
.content-wrapper {
  position: relative;
  z-index: 10;
  padding: var(--navbar-height) 40px;
  max-width: 100%;
  width: 100%;
  margin: 0;
}

/* ==================== HEADER SECTION ==================== */
.languages-header {
  text-align: center;
  margin-bottom: 60px;
  animation: fadeInUp 0.8s ease-out;
  width: 100%;
  max-width: 100%;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  backdrop-filter: blur(10px);
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.header-badge:hover {
  background: rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.badge-icon {
  width: 18px;
  height: 18px;
  color: #facc15;
}

.badge-text {
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(to right, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.main-title {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.highlight {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
}

.subtitle {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* ==================== STATS ROW ==================== */
.stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.stat-icon {
  width: 24px;
  height: 24px;
  color: #22d3ee;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(to right, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
}

/* ==================== SEARCH SECTION ==================== */
.search-section {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 50px;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
  padding: 0 20px;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.search-container {
  position: relative;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 2;
}

.search-input {
  width: 100%;
  padding: 20px 60px 20px 60px;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  outline: none;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(30px);
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.search-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 8px 30px rgba(102, 126, 234, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.clear-button {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}

.clear-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) rotate(90deg);
}

.clear-icon {
  width: 18px;
  height: 18px;
}

/* ==================== SUGGESTIONS DROPDOWN ==================== */
.suggestions-list {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  background: rgba(20, 15, 40, 0.98);
  backdrop-filter: blur(30px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideInDown 0.3s ease-out;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  border-radius: 14px;
  transition: all 0.2s ease;
  margin-bottom: 4px;
  position: relative;
}

.suggestion-item:hover,
.suggestion-item.focused {
  background: rgba(102, 126, 234, 0.15);
  transform: translateX(8px);
}

.suggestion-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.suggestion-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.suggestion-name {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.suggestion-category {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.suggestion-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 20px;
  transition: all 0.2s ease;
}

.suggestion-item:hover .suggestion-arrow,
.suggestion-item.focused .suggestion-arrow {
  color: #667eea;
  transform: translateX(4px);
}

/* ==================== RESULTS COUNT ==================== */
.results-count {
  text-align: left;
  margin-top: 20px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  animation: fadeInUp 0.5s ease-out;
  padding: 0 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.results-number {
  font-weight: 700;
  color: #22d3ee;
  font-size: 18px;
}

/* ==================== LANGUAGE GRID ==================== */
.languages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  margin: 0;
}

/* ==================== LANGUAGE CARD ==================== */
.language-card {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  animation: scaleIn 0.5s ease-out backwards;
  height: 100%;
}

.card-background {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  opacity: 0;
  filter: blur(40px);
  transition: opacity 0.5s ease;
  z-index: 0;
}

.language-card:hover .card-background {
  opacity: 0.15;
}

.card-content {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px 24px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.language-card:hover .card-content {
  transform: translateY(-12px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

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

.language-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 28px;
  color: white;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.language-card:hover .language-icon {
  transform: scale(1.15) rotate(8deg);
}

.popularity-badge {
  flex: 1;
  max-width: 80px;
  padding: 6px;
}

.popularity-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.popularity-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
}

.language-name {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: white;
  transition: all 0.3s ease;
}

.language-card:hover .language-name {
  background: linear-gradient(to right, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.language-category {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  display: block;
  margin-bottom: 24px;
}

.card-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.learn-more {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.language-card:hover .learn-more {
  color: #22d3ee;
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.language-card:hover .arrow-icon {
  transform: translateX(4px);
}

.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.language-card:hover .card-shine {
  opacity: 1;
  animation: shine 1.5s ease-in-out;
}

.card-glow {
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  opacity: 0;
  filter: blur(30px);
  transition: opacity 0.5s ease;
  z-index: -1;
}

.language-card:hover .card-glow {
  opacity: 0.3;
}

/* ==================== NO RESULTS ==================== */
.no-results {
  text-align: center;
  padding: 100px 40px;
  width: 100%;
  animation: fadeInUp 0.6s ease-out;
}

.no-results-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 30px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
}

.no-results-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.no-results-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.reset-button {
  padding: 14px 32px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.reset-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, #764ba2, #667eea);
}

/* ==================== SCROLLBAR STYLING ==================== */
.suggestions-list::-webkit-scrollbar {
  width: 8px;
}

.suggestions-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.suggestions-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 10px;
}

.suggestions-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #764ba2, #667eea);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1200px) {
  .languages-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  .header-badge {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 100px 24px 60px;
  }

  .main-title {
    font-size: 40px;
  }

  .subtitle {
    font-size: 16px;
  }

  .stats-row {
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .stat-item {
    padding: 10px 20px;
  }

  .stat-value {
    font-size: 20px;
  }

  .search-input {
    padding: 18px 55px 18px 55px;
    font-size: 15px;
  }

  .languages-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 0 10px;
  }

  .card-content {
    padding: 28px 20px;
  }

  .language-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .language-name {
    font-size: 20px;
  }

  .orb-1,
  .orb-2,
  .orb-3 {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 90px 16px 32px;
  }

  .main-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .header-badge {
    padding: 6px 14px;
    margin-bottom: 16px;
  }

  .badge-text {
    font-size: 11px;
  }

  .stats-row {
    flex-direction: column;
    gap: 10px;
  }

  .stat-item {
    width: 100%;
    justify-content: center;
    padding: 8px 16px;
  }

  .stat-value {
    font-size: 18px;
  }

  .search-section {
    margin-bottom: 30px;
  }

  .search-input {
    padding: 14px 45px 14px 45px;
    font-size: 14px;
    border-radius: 12px;
  }

  .search-icon {
    left: 16px;
    width: 16px;
    height: 16px;
  }

  .clear-button {
    width: 28px;
    height: 28px;
    right: 12px;
  }

  .languages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card-content {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .language-icon {
    width: 54px;
    height: 54px;
    font-size: 22px;
    border-radius: 14px;
  }

  .language-name {
    font-size: 20px;
  }

  .language-category {
    font-size: 11px;
    margin-bottom: 16px;
  }

  .suggestion-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .suggestion-name {
    font-size: 14px;
  }

  .no-results {
    padding: 40px 16px;
  }

  .no-results-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
  }

  .no-results-title {
    font-size: 22px;
  }

  .no-results-text {
    font-size: 15px;
  }
}

/* ==================== SMOOTH TRANSITIONS ==================== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
}

/* ==================== FOCUS STATES ==================== */
.search-input:focus-visible,
.clear-button:focus-visible,
.reset-button:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}/* ==================== COURSES PAGE STYLES ==================== */

/* Animations */
@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

@keyframes scanLine {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

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

@keyframes glassShine {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  50% {
    transform: translateX(100%) skewX(-15deg);
  }

  100% {
    transform: translateX(100%) skewX(-15deg);
  }
}

@keyframes pulseLive {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Container */
.courses-page-container {
  min-height: 100vh;
  background: #080718;
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--navbar-height);
}

/* Background & Orbs */
.premium-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.premium-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.premium-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.2;
  animation: orbFloat 15s infinite ease-in-out;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
  top: -200px;
  left: -200px;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
  bottom: -100px;
  right: -100px;
  animation-delay: -5s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
  top: 40%;
  left: -100px;
  animation-delay: -2s;
}

.orb-4 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
  top: 10%;
  right: 10%;
  animation-delay: -8s;
}

/* Wrapper */
.courses-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  width: 100%;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* Courses Grid - Optimized for more cards */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 20px;
}

/* Hero Section */
.live-class-hero {
  text-align: center;
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  color: #94a3b8;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Premium Card (Course) - Compact Version */
.premium-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: left;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  height: 100%;
}

.premium-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 25px 50px rgba(99, 102, 241, 0.15);
}

.card-glass-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: glassShine 4s infinite linear;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.course-icon-wrapper {
  background: rgba(255, 255, 255, 0.05);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.course-icon-wrapper svg,
.course-icon-wrapper img {
  width: 32px !important;
  height: 32px !important;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  color: #ef4444;
  font-weight: 800;
  font-size: 10px;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulseLive 2s infinite;
}

.card-category {
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.card-course-title {
  font-size: 1.55rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #fff;
  line-height: 1.2;
}

.card-course-desc {
  color: #94a3b8;
  margin-bottom: 20px;
  font-size: 0.92rem;
  line-height: 1.5;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3em;
}

.card-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  background: rgba(99, 102, 241, 0.03);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.05);
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #cbd5e1;
  font-weight: 500;
}

.highlight-icon {
  color: #f59e0b;
  /* Golden star */
  flex-shrink: 0;
}

.card-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cbd5e1;
}

.stat-icon {
  color: #6366f1;
  width: 16px;
  height: 16px;
}

.stat-text {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.enroll-cta {
  display: flex;
  flex-direction: column;
}

.join-text {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

.footer-subtext {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}

.join-btn-circle {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.4s ease;
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
}

.premium-card:hover .join-btn-circle {
  transform: rotate(-45deg) scale(1.05);
  box-shadow: 0 12px 24px rgba(99, 102, 241, 0.4);
}

/* Redesigned FAQ Section */
.faq-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 100px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item-premium {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 18px 24px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.faq-item-premium:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateX(8px);
}

.faq-item-premium::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(to bottom, #6366f1, #ec4899);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.faq-item-premium:hover::before {
  opacity: 1;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.faq-question h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}

.faq-icon-wrapper {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-answer p {
  color: #94a3b8;
  line-height: 1.5;
  font-size: 0.95rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .courses-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .courses-wrapper {
    padding: 0 20px;
    gap: 40px;
  }

  .courses-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .premium-card {
    padding: 24px;
  }

  .hero-title {
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .faq-item-premium {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .courses-page-container {
    padding-top: 60px;
  }

  .courses-wrapper {
    padding: 0 16px;
    gap: 40px;
  }

  .live-class-hero {
    margin: 24px auto;
  }

  .hero-title {
    font-size: 1.75rem;
    margin-bottom: 12px;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  .premium-card {
    padding: 20px;
    border-radius: 20px;
  }

  .card-course-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }

  .card-course-desc {
    font-size: 0.85rem;
    margin-bottom: 16px;
    height: auto;
    line-clamp: 3;
    -webkit-line-clamp: 3;
  }

  .card-stats {
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .stat-item {
    gap: 6px;
  }

  .stat-value {
    font-size: 12px;
  }

  .card-footer {
    padding-top: 12px;
  }

  .join-text {
    font-size: 14px;
  }

  .join-btn-circle {
    width: 38px;
    height: 38px;
  }

  .faq-section {
    margin-bottom: 60px;
  }

  .faq-question h4 {
    font-size: 0.95rem;
  }

  .faq-answer p {
    font-size: 0.85rem;
  }
}/* ==================== GLOBAL RESET ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}


/* === DAILY QUIZ HEATMAP === */
.activity-section {
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.streak-mini-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  padding: 6px 14px;
  border-radius: 12px;
  color: #f97316;
  font-size: 13px;
  font-weight: 700;
}

.heatmap-wrapper {
  margin: 20px 0;
  overflow-x: auto;
}

.react-calendar-heatmap {
  width: 100%;
}

.react-calendar-heatmap text {
  fill: rgba(255, 255, 255, 0.4);
  font-size: 8px;
  font-weight: 500;
}

.color-empty {
  fill: #161b22;
  background-color: #161b22;
}

.color-scale-1 {
  fill: #0e4429;
  background-color: #0e4429;
}

.color-scale-2 {
  fill: #006d32;
  background-color: #006d32;
}

.color-scale-3 {
  fill: #26a641;
  background-color: #26a641;
}

.color-scale-4 {
  fill: #39d353;
  background-color: #39d353;
}

.react-calendar-heatmap rect {
  rx: 3;
  ry: 3;
  transition: all 0.2s ease;
}

.react-calendar-heatmap rect:hover {
  stroke: #ffffff;
  stroke-width: 1px;
  opacity: 0.8;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 15px;
}

.legend-cells {
  display: flex;
  gap: 4px;
}

.legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.empty-state-text {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 15px;
  margin-top: 12px;
}

/* Stat unit style */
.stat-unit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  margin-left: 4px;
}

.stat-icon-wrapper.orange {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(30px, -30px) scale(1.1);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

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

@keyframes progressFill {
  from {
    width: 0;
  }
}

/* ==================== CONTAINER ==================== */
.profile-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2d1b4e 100%);
  color: #ffffff;
  padding: var(--navbar-height) 20px 60px;
  position: relative;
  overflow: hidden;
}

/* ==================== BACKGROUND ==================== */
.profile-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.profile-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: pulse 8s infinite ease-in-out;
}

.profile-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
  animation: float 30s infinite ease-in-out;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent);
  top: -10%;
  left: -15%;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent);
  bottom: -15%;
  right: -10%;
  animation-delay: 10s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent);
  top: 40%;
  right: 20%;
  animation-delay: 20s;
}

/* ==================== LOADING STATE ==================== */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2d1b4e 100%);
  gap: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(99, 102, 241, 0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 500;
}

/* ==================== HEADER NAVIGATION ==================== */
.profile-header-nav {
  max-width: 1200px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.5s ease-out;
}

.back-button-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.back-button-profile:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(-4px);
}

.back-button-profile svg {
  transition: transform 0.3s ease;
}

.back-button-profile:hover svg {
  transform: translateX(-3px);
}

/* ==================== PROFILE HEADER SECTION ==================== */
.profile-header-section {
  max-width: 1200px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.5s ease-out 0.1s backwards;
}

.profile-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.profile-card-banner {
  height: 100px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
  position: relative;
  overflow: hidden;
}

.profile-card-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.profile-card-content {
  padding: 0 40px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  margin-top: -50px;
  position: relative;
}

.profile-avatar-section {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex: 1;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid rgba(10, 14, 39, 0.9);
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.4);
  flex-shrink: 0;
  position: relative;
}

.profile-avatar::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 20px;
  padding: 5px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  --webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
}

.avatar-text {
  font-size: 40px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.level-badge-premium {
  position: absolute;
  bottom: -10px;
  right: -10px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  padding: 4px 12px;
  border-radius: 20px;
  border: 3px solid #0a0e27;
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4);
}

.level-badge-premium span {
  font-size: 12px;
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-user-info {
  padding-top: 45px;
  flex: 1;
}

.name-level-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 6px;
}

.premium-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #6366f1;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.profile-user-name {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.profile-user-email {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  margin-bottom: 16px;
}

.profile-user-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  max-width: fit-content;
}

.meta-item svg {
  color: rgba(99, 102, 241, 0.8);
  flex-shrink: 0;
}

.meta-item.description {
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
}

.profile-logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  color: white;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
  margin-top: 45px;
  flex-shrink: 0;
}

.profile-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.profile-logout-btn:active {
  transform: translateY(0);
}

/* ==================== AWARDS DASHBOARD ==================== */
.awards-dashboard-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 30px;
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.awards-dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #f97316, #fbbf24);
}

.dashboard-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dashboard-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-value {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dashboard-value span.subscript {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* Level Specific */
.level-info-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.level-progress-container {
  width: 100%;
}

.level-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.level-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.level-progress-text {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}

/* XP and Coins specific */
.vibrant-text.xp {
  background: linear-gradient(135deg, #f97316, #ea580c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vibrant-text.coins {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.coin-utility-group {
  gap: 12px;
}

.coin-conversion {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conversion-rate {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

.current-value {
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 4px;
}

.coin-use-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 191, 36, 0.05);
  border: 1px dashed rgba(251, 191, 36, 0.2);
  padding: 8px 12px;
  border-radius: 10px;
  margin-top: 5px;
  color: rgba(251, 191, 36, 0.8);
  font-size: 11px;
  font-weight: 600;
  animation: pulse-soft 3s infinite;
}

@keyframes pulse-soft {

  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {

  .profile-header-nav,
  .profile-header-section,
  .profile-stats-grid,
  .awards-section,
  .activity-section {
    max-width: 95%;
  }

  .awards-dashboard-card {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .level-info-group {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .profile-container {
    padding: 30px 15px;
  }

  .profile-card-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px 30px;
    margin-top: -40px;
  }

  .profile-avatar-section {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .profile-avatar {
    width: 90px;
    height: 90px;
  }

  .avatar-text {
    font-size: 32px;
  }

  .profile-user-info {
    padding-top: 10px;
    width: 100%;
  }

  .name-level-row {
    justify-content: center;
  }

  .profile-user-name {
    font-size: 26px;
  }

  .profile-user-meta {
    align-items: center;
  }

  .meta-item {
    max-width: 100%;
    justify-content: center;
  }

  .profile-logout-btn {
    margin-top: 25px;
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
  }

  .awards-dashboard-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .dashboard-value {
    font-size: 28px;
  }

  .profile-stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .stat-card {
    padding: 18px;
  }

  .activity-section {
    padding: 20px;
  }

  .section-header-row {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .profile-user-name {
    font-size: 22px;
  }

  .profile-user-email {
    font-size: 13px;
  }

  .back-button-profile {
    padding: 10px 16px;
    font-size: 13px;
  }

  .dashboard-value {
    font-size: 24px;
  }

  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .award-card {
    padding: 15px;
  }

  .award-icon-wrapper {
    width: 45px;
    height: 45px;
  }
}


/* ==================== STATS GRID REMAINING ==================== */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 25px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-8px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ==================== AWARDS SECTION ==================== */
.awards-section {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 35px;
  margin-bottom: 30px;
  margin-top: 30px;
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}

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

.award-badge {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.award-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(99, 102, 241, 0.2), transparent 30%);
  animation: rotate 4s linear infinite;
  z-index: 0;
}

.award-item:hover .award-badge {
  transform: rotate(5deg) scale(1.1);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 15px 35px rgba(99, 102, 241, 0.3);
}

.award-badge svg {
  z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.award-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.award-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.no-awards {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
}

/* ==================== TABS ==================== */
.profile-tabs-container {
  max-width: 1200px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.5s ease-out 0.2s backwards;
}

.profile-tabs {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px;
}

.tab-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tab-button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.tab-button.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.tab-button svg {
  transition: transform 0.3s ease;
}

.tab-button.active svg {
  transform: scale(1.1);
}

/* ==================== TAB CONTENT ==================== */
.profile-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.5s ease-out 0.3s backwards;
}

.tab-content-panel {
  animation: fadeIn 0.4s ease-out;
}

/* ==================== WELCOME SECTION ==================== */
.welcome-section {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 30px;
  text-align: center;
}

.welcome-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ==================== PROGRESS OVERVIEW ==================== */
.progress-overview-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 35px;
  margin-bottom: 30px;
}

.section-heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ffffff;
}

.progress-bar-large {
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.progress-fill-large {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
  background-size: 200% 100%;
  border-radius: 12px;
  transition: width 1s ease-out;
  animation: progressFill 1s ease-out, shimmer 2s infinite;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

.progress-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.progress-percentage {
  font-size: 20px;
  font-weight: 700;
  color: #6366f1;
}

/* ==================== QUICK STATS ==================== */
.quick-stats-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 35px;
}

.quick-stats-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.quick-stat-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.quick-stat-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.quick-stat-percent {
  font-size: 16px;
  font-weight: 700;
  color: #8b5cf6;
}

.quick-progress-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.quick-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 8px;
  transition: width 0.8s ease-out;
  animation: progressFill 0.8s ease-out;
}

.quick-stat-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==================== LANGUAGES SECTION ==================== */
.languages-header {
  margin-bottom: 30px;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #ffffff;
}

.section-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.languages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.language-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px;
  transition: all 0.3s ease;
  animation: slideInLeft 0.4s ease-out;
  animation-fill-mode: backwards;
}



/* ==================== PROFILE CIRCLE COMPONENT ==================== */

.profile-circle {
  position: fixed;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}

.profile-circle:hover {
  transform: scale(1.05);
}

.profile-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 4px 15px rgba(99, 102, 241, 0.3),
    0 0 0 3px rgba(99, 102, 241, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Animated border effect */
.profile-avatar::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #6366f1);
  --webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.profile-circle:hover .profile-avatar::before {
  opacity: 0.6;
  animation: rotateBorder 3s linear infinite;
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Hover glow effect */
.profile-circle:hover .profile-avatar {
  box-shadow:
    0 8px 25px rgba(99, 102, 241, 0.4),
    0 0 0 3px rgba(99, 102, 241, 0.2),
    0 0 30px rgba(99, 102, 241, 0.3);
}

.profile-text {
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Online status indicator */
.profile-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  border: 3px solid #0a0e27;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  z-index: 2;
  animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {

  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5);
  }
}

/* Active state */
.profile-circle:active .profile-avatar {
  transform: scale(0.95);
}

/* ==================== VARIATIONS ==================== */

/* Larger size variant */
.profile-circle.large .profile-avatar {
  width: 56px;
  height: 56px;
}

.profile-circle.large .profile-text {
  font-size: 24px;
}

.profile-circle.large .profile-status {
  width: 16px;
  height: 16px;
  bottom: 3px;
  right: 3px;
}

/* Smaller size variant */
.profile-circle.small .profile-avatar {
  width: 40px;
  height: 40px;
}

.profile-circle.small .profile-text {
  font-size: 16px;
}

.profile-circle.small .profile-status {
  width: 12px;
  height: 12px;
  bottom: 1px;
  right: 1px;
  border-width: 2px;
}

/* Offline status */
.profile-status.offline {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.3);
  animation: none;
}

/* Away status */
.profile-status.away {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

/* Do Not Disturb status */
.profile-status.dnd {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

/* ==================== DARK NAVBAR VERSION ==================== */

/* For dark backgrounds */
.profile-circle.dark-mode .profile-avatar {
  box-shadow:
    0 4px 15px rgba(99, 102, 241, 0.4),
    0 0 0 3px rgba(255, 255, 255, 0.05);
}

.profile-circle.dark-mode:hover .profile-avatar {
  box-shadow:
    0 8px 25px rgba(99, 102, 241, 0.5),
    0 0 0 3px rgba(255, 255, 255, 0.1),
    0 0 30px rgba(99, 102, 241, 0.4);
}

.profile-circle.dark-mode .profile-status {
  border-color: rgba(10, 14, 39, 0.9);
}

/* ==================== LIGHT NAVBAR VERSION ==================== */

/* For light backgrounds */
.profile-circle.light-mode .profile-avatar {
  box-shadow:
    0 4px 15px rgba(99, 102, 241, 0.2),
    0 0 0 3px rgba(0, 0, 0, 0.05);
}

.profile-circle.light-mode:hover .profile-avatar {
  box-shadow:
    0 8px 25px rgba(99, 102, 241, 0.3),
    0 0 0 3px rgba(0, 0, 0, 0.08),
    0 0 30px rgba(99, 102, 241, 0.2);
}

.profile-circle.light-mode .profile-status {
  border-color: #ffffff;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
  .profile-avatar {
    width: 44px;
    height: 44px;
  }

  .profile-text {
    font-size: 18px;
  }

  .profile-status {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }
}

/* ==================== ACCESSIBILITY ==================== */

.profile-circle:focus {
  outline: none;
}

.profile-circle:focus-visible .profile-avatar {
  box-shadow:
    0 8px 25px rgba(99, 102, 241, 0.4),
    0 0 0 3px rgba(99, 102, 241, 0.4),
    0 0 0 6px rgba(99, 102, 241, 0.2);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  .profile-circle,
  .profile-avatar,
  .profile-avatar::before,
  .profile-status {
    animation: none !important;
    transition: none !important;
  }
}

.language-card:nth-child(1) {
  animation-delay: 0.05s;
}

.language-card:nth-child(2) {
  animation-delay: 0.1s;
}

.language-card:nth-child(3) {
  animation-delay: 0.15s;
}

.language-card:nth-child(4) {
  animation-delay: 0.2s;
}

.language-card:nth-child(5) {
  animation-delay: 0.25s;
}

.language-card:nth-child(6) {
  animation-delay: 0.3s;
}

.language-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  border-color: rgba(99, 102, 241, 0.3);
}

.language-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.language-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.language-badge {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.language-progress-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.language-progress-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.language-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation: progressFill 0.8s ease-out;
  position: relative;
  overflow: hidden;
}

.language-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

.language-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.problems-solved {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.problems-total {
  color: rgba(255, 255, 255, 0.5);
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
}

.empty-state svg {
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
}

.empty-state-text {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.empty-state-subtext {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 968px) {
  .profile-card-content {
    flex-direction: column;
    padding: 0 30px 30px;
  }

  .profile-avatar-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .profile-user-info {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .profile-user-meta {
    align-items: center;
  }

  .profile-logout-btn {
    margin-top: 20px;
    width: 100%;
    justify-content: center;
  }

  .profile-stats-grid {
    grid-template-columns: 1fr;
  }

  .languages-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .profile-container {
    padding: 30px 15px;
  }

  .profile-card {
    border-radius: 16px;
  }

  .profile-card-content {
    padding: 0 20px 25px;
  }

  .profile-avatar {
    width: 100px;
    height: 100px;
  }

  .avatar-text {
    font-size: 40px;
  }

  .profile-user-name {
    font-size: 26px;
  }

  .welcome-section {
    padding: 30px 25px;
  }

  .welcome-title {
    font-size: 26px;
  }

  .welcome-subtitle {
    font-size: 15px;
  }

  .progress-overview-card,
  .quick-stats-card {
    padding: 25px 20px;
  }

  .section-title {
    font-size: 24px;
  }

  .language-card {
    padding: 24px 20px;
  }

  .profile-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-button {
    padding: 12px 20px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .stat-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .stat-icon-wrapper {
    width: 52px;
    height: 52px;
  }

  .stat-value {
    font-size: 24px;
  }

  .back-button-profile {
    width: 100%;
    justify-content: center;
  }
}

/* ==================== CONSOLIDATED RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {

  .profile-header-nav,
  .profile-header-section,
  .profile-stats-grid,
  .awards-section,
  .activity-section {
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .awards-dashboard-card {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  .level-info-group {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 768px) {
  .profile-container {
    padding: 30px 15px !important;
  }

  .profile-card-banner {
    height: 80px !important;
  }

  .profile-card-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 20px 30px !important;
    margin-top: -40px !important;
  }

  .profile-avatar-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
  }

  .profile-avatar {
    width: 90px !important;
    height: 90px !important;
  }

  .avatar-text {
    font-size: 32px !important;
  }

  .profile-user-info {
    padding-top: 10px !important;
    width: 100% !important;
  }

  .name-level-row {
    justify-content: center !important;
  }

  .profile-user-name {
    font-size: 26px !important;
  }

  .profile-user-meta {
    align-items: center !important;
  }

  .meta-item {
    max-width: 100% !important;
    justify-content: center !important;
  }

  .profile-logout-btn {
    margin-top: 25px !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 24px !important;
  }

  .awards-dashboard-card {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }

  .dashboard-value {
    font-size: 28px !important;
  }

  .profile-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .stat-card {
    padding: 18px !important;
    flex-direction: row !important;
    text-align: left !important;
  }

  .activity-section {
    padding: 20px !important;
  }

  .section-header-row {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .profile-user-name {
    font-size: 22px !important;
  }

  .profile-user-email {
    font-size: 13px !important;
  }

  .back-button-profile {
    width: 100% !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }

  .dashboard-value {
    font-size: 24px !important;
  }

  .awards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .award-card {
    padding: 15px !important;
  }

  .award-icon-wrapper {
    width: 45px !important;
    height: 45px !important;
  }
}/*
 * react-calendar-heatmap styles
 *
 * All of the styles in this file are optional and configurable!
 * The github and gitlab color scales are provided for reference.
 */

.react-calendar-heatmap text {
  font-size: 10px;
  fill: #aaa;
}

.react-calendar-heatmap .react-calendar-heatmap-small-text {
  font-size: 5px;
}

.react-calendar-heatmap rect:hover {
  stroke: #555;
  stroke-width: 1px;
}

/*
 * Default color scale
 */

.react-calendar-heatmap .color-empty {
  fill: #eeeeee;
}

.react-calendar-heatmap .color-filled {
  fill: #8cc665;
}

/*
 * Github color scale
 */

.react-calendar-heatmap .color-github-0 {
  fill: #eeeeee;
}
.react-calendar-heatmap .color-github-1 {
  fill: #d6e685;
}
.react-calendar-heatmap .color-github-2 {
  fill: #8cc665;
}
.react-calendar-heatmap .color-github-3 {
  fill: #44a340;
}
.react-calendar-heatmap .color-github-4 {
  fill: #1e6823;
}

/*
 * Gitlab color scale
 */

.react-calendar-heatmap .color-gitlab-0 {
  fill: #ededed;
}
.react-calendar-heatmap .color-gitlab-1 {
  fill: #acd5f2;
}
.react-calendar-heatmap .color-gitlab-2 {
  fill: #7fa8d1;
}
.react-calendar-heatmap .color-gitlab-3 {
  fill: #49729b;
}
.react-calendar-heatmap .color-gitlab-4 {
  fill: #254e77;
}
:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s;--rt-arrow-size:8px}.core-styles-module_tooltip__3vRRp{left:0;opacity:0;pointer-events:none;position:absolute;top:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{background:inherit;position:absolute;z-index:-1}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay) ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay) ease-in}.styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;padding:8px 16px;width:max-content}.styles-module_arrow__K0L3T{height:var(--rt-arrow-size);width:var(--rt-arrow-size)}[class*=react-tooltip__place-top]>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*=react-tooltip__place-right]>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*=react-tooltip__place-bottom]>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*=react-tooltip__place-left]>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}.competition-container {
    width: 100vw;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0118 0%, #1e0d3d 50%, #0f0a1e 100%);
    color: white;
    font-family: 'Inter', -apple-system, sans-serif;
    position: relative;
    overflow-x: hidden;
}

.competition-content {
    position: relative;
    z-index: 10;
    padding: 100px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.comp-hero {
    text-align: center;
    margin-bottom: 80px;
    animation: fadeInUp 0.8s ease-out;
}

.hero-title {
    font-size: 72px;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

.comp-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 100px;
}

.comp-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.comp-card:hover {
    transform: translateY(-10px);
}

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

.card-icon {
    width: 48px;
    height: 48px;
    color: #FFD700;
}

.card-title {
    font-size: 28px;
    font-weight: 700;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
}

.detail-icon {
    width: 24px;
    height: 24px;
    color: #22d3ee;
}

.btn-start {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: none;
    border-radius: 15px;
    color: #000;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 30px;
    transition: all 0.3s ease;
}

.btn-start:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

.btn-start:disabled {
    background: #30363d;
    color: #8b949e;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.start-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 15px;
    text-align: center;
    font-style: italic;
}

.partner-section {
    text-align: center;
    margin-bottom: 100px;
}

.section-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
}

.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    opacity: 0.7;
}

.partner-logo {
    height: 40px;
    filter: grayscale(1) brightness(2);
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-text {
    font-weight: 600;
    font-size: 14px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@media (max-width: 768px) {
    .hero-title {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .competition-content {
        padding: 60px 20px;
    }

    .comp-details-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 60px;
    }

    .comp-card {
        padding: 25px;
        border-radius: 20px;
    }

    .card-title {
        font-size: 22px;
    }

    .detail-item {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .btn-start {
        padding: 16px;
        font-size: 18px;
    }

    .partner-logos {
        gap: 30px;
    }

    .partner-logo {
        height: 30px;
    }

    .trust-badges,
    .trust-badge,
    .badge-text {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 34px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .comp-hero {
        margin-bottom: 40px;
    }

    .card-icon {
        width: 36px;
        height: 36px;
    }

    .card-title {
        font-size: 20px;
    }
}/* Exam Login - Matching Signup.jsx Design */
/* Using the same design system as signup.css */

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(-10px);
    }
    75% {
        transform: translateY(-30px) translateX(5px);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main Container */
.exam-login-container {
    width: 100%;
    min-height: 100vh;
    background: radial-gradient(circle at top right, #1e1b4b, #0f172a 50%, #020617);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 100px 20px 40px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 640px) {
    .exam-login-container {
        padding: 60px 16px 30px;
        align-items: flex-start;
        overflow-y: auto;
    }
}

/* Card - Matching Signup */
.login-box {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 32px;
    width: 95%;
    max-width: 720px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    animation: slideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Header - Matching Signup */
.login-header {
    text-align: center;
    padding: 40px 40px 20px;
}

.exam-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50px;
    color: #FFD700;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.login-header h1 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
}

.login-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    font-weight: 500;
}

/* Form Container */
.login-box form {
    padding: 0 40px 30px;
}

/* Form Group - Matching Signup */
.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

/* Input Wrapper */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.4);
    z-index: 1;
    pointer-events: none;
}

/* Form Input - Matching Signup */
.form-group input {
    width: 100% !important;
    padding: 14px 16px 14px 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 15px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Placeholder Styling */
.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    text-align: left !important;
}

.form-group input::-webkit-input-placeholder {
    text-align: left !important;
}

.form-group input::-moz-placeholder {
    text-align: left !important;
}

.form-group input:-ms-input-placeholder {
    text-align: left !important;
}

.form-group input:-moz-placeholder {
    text-align: left !important;
}

/* Input Focus State - Matching Signup */
.form-group input:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

/* School Auto Detect */
.school-auto-detect {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #10b981;
    font-weight: 600;
    animation: slideIn 0.3s ease;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Button - Matching Signup */
.btn-login {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-login:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.4);
    filter: brightness(1.1);
}

.btn-login:active {
    transform: translateY(0);
}

.btn-login:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Notice Box - Matching Signup Style */
.notice-box {
    margin-top: 30px;
    padding: 20px;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.notice-box svg {
    flex-shrink: 0;
    color: #22c55e;
    margin-top: 2px;
}

.notice-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.notice-text strong {
    color: #22c55e;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 640px) {
    .login-box {
        border-radius: 24px;
        max-width: 100%;
    }

    .login-header {
        padding: 30px 25px 15px;
    }

    .login-box form {
        padding: 0 25px 30px;
    }

    .login-header h1 {
        font-size: 1.75rem;
    }

    .notice-box {
        margin-top: 20px;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .login-header {
        padding: 24px 20px 10px;
    }

    .login-header h1 {
        font-size: 1.5rem;
    }

    .login-header p {
        font-size: 14px;
    }

    .login-box form {
        padding: 0 20px 24px;
    }

    .form-group input {
        padding: 14px 16px 14px 48px !important;
        font-size: 14px !important;
    }

    .exam-badge {
        font-size: 10px;
        padding: 6px 16px;
    }

    .notice-box {
        padding: 14px;
        gap: 10px;
    }

    .notice-text {
        font-size: 12px;
    }
}.exam-interface-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0d1117;
    color: #e6edf3;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    position: relative;
}

/* Header */
.exam-header {
    height: 60px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    z-index: 9999;
    /* Ensure it's above everything including site navbar */
    position: relative;
}

.student-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-avatar {
    width: 32px;
    height: 32px;
    background: #30363d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-details {
    line-height: 1.2;
}

.student-name {
    font-size: 14px;
    font-weight: 600;
}

.student-id {
    font-size: 11px;
    color: #8b949e;
}

.exam-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #FFD700;
}

.timer-low {
    color: #ff7b72;
    animation: timerPulse 1s infinite;
}

@keyframes timerPulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Main Content */
.exam-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.question-panel {
    width: 40%;
    border-right: 1px solid #30363d;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}

.editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0d1117;
}

/* Question Content */
.panel-header {
    padding: 16px 24px;
    border-bottom: 1px solid #30363d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.question-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #58a6ff;
}

.question-description {
    font-size: 16px;
    line-height: 1.6;
    color: #d0d7de;
    margin-bottom: 24px;
}

.code-block {
    background: #161b22;
    padding: 16px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 16px;
    border: 1px solid #30363d;
}

.label {
    font-size: 12px;
    color: #8b949e;
    margin-bottom: 4px;
    display: block;
}

/* Footer Control */
.exam-footer {
    height: 60px;
    background: #161b22;
    border-top: 1px solid #30363d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.proctoring-status {
    display: flex;
    gap: 20px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(45, 51, 59, 0.5);
}

.status-online {
    color: #3fb950;
}

.status-warning {
    color: #d29922;
}

.status-danger {
    color: #f85149;
    background: rgba(248, 81, 73, 0.1) !important;
    border: 1px solid rgba(248, 81, 73, 0.4);
    animation: blinkRed 1s infinite;
}

@keyframes blinkRed {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.btn-nav,
.btn-submit {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-nav {
    background: #30363d;
    border: 1px solid #30363d;
    color: #e6edf3;
}

.btn-nav:hover {
    background: #484f58;
}

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

.btn-submit {
    background: #238636;
    border: 1px solid rgba(240, 246, 252, 0.1);
    color: white;
}

.btn-submit:hover {
    background: #2ea043;
}

/* Proctoring Specific */
.fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 23, 0.98);
    backdrop-filter: blur(15px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.overlay-content {
    max-width: 500px;
    padding: 50px 40px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}

.overlay-content h2 {
    font-size: 28px;
    margin: 20px 0 10px;
    color: white;
}

.overlay-content p {
    color: #8b949e;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 35px;
}

.proctoring-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.online {
    background: #3fb950;
    box-shadow: 0 0 12px #3fb950;
    animation: statusPulse 2s infinite;
}

.status-dot.offline {
    background: #ff7b72;
}

@keyframes statusPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.proctoring-alert-banner {
    background: #ff7b7225;
    border-bottom: 1px solid #ff7b7250;
    color: #ff7b72;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.editor-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #30363d;
}

.output-panel {
    height: 30%;
    padding: 20px 24px;
    background: #0d1117;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.output-content {
    flex: 1;
    margin-top: 15px;
    color: #8b949e;
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    overflow-y: auto;
    white-space: pre-wrap;
    background: #161b22;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #30363d;
}

.btn-start {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: black;
    font-weight: 800;
    border-radius: 12px;
    padding: 15px 40px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
}

/* Disqualification Modal */
.disqualification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn 0.3s ease;
}

.disqualification-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #ff4444;
    border-radius: 16px;
    padding: 48px;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(255, 68, 68, 0.3);
    animation: slideDown 0.5s ease;
}

.disqualification-icon {
    margin-bottom: 24px;
    animation: pulse 2s infinite;
}

.disqualification-modal h1 {
    color: #ff4444;
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.disqualification-reason {
    font-size: 18px;
    color: #e6edf3;
    margin-bottom: 32px;
    font-weight: 600;
}

.disqualification-info {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
}

.disqualification-info p {
    margin: 12px 0;
    color: #c9d1d9;
}

.disqualification-info strong {
    color: #ff4444;
}

.redirect-notice {
    margin-top: 24px;
    font-size: 14px;
    color: #8b949e;
    font-style: italic;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
    .exam-main {
        flex-direction: column;
        overflow-y: auto;
    }

    .question-panel,
    .editor-panel {
        width: 100% !important;
        height: auto;
        min-height: 500px;
    }

    .question-panel {
        border-right: none;
        border-bottom: 1px solid #30363d;
    }
}

@media (max-width: 768px) {
    .exam-header {
        padding: 0 15px;
        height: 50px;
    }

    .student-details {
        display: none;
    }

    .exam-timer {
        font-size: 16px;
    }

    .question-content {
        padding: 15px;
    }

    .question-title {
        font-size: 20px;
    }

    .exam-footer {
        height: auto;
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }

    .proctoring-status {
        width: 100%;
        justify-content: space-between;
    }

    .action-buttons {
        width: 100%;
    }

    .btn-nav,
    .btn-submit {
        flex: 1;
        justify-content: center;
        padding: 12px;
    }

    .overlay-content {
        padding: 30px 20px;
        margin: 20px;
    }

    .overlay-content h2 {
        font-size: 22px;
    }

    .disqualification-modal {
        padding: 24px;
        margin: 15px;
    }

    .disqualification-modal h1 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .proctoring-status {
        flex-direction: column;
        gap: 10px;
    }

    .status-item {
        width: 100%;
        justify-content: center;
    }

    .proctoring-alert-banner {
        font-size: 12px;
        padding: 8px 15px;
    }
}.submission-container {
    width: 100vw;
    min-height: 100vh;
    background: radial-gradient(circle at center, #1e0d3d 0%, #0a0118 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
}

.submission-box {
    width: 100%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.success-icon {
    width: 80px;
    height: 80px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    margin: 0 auto 30px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.submission-box h1 {
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
}

.submission-box p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    margin-bottom: 40px;
}

.exam-summary {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-title {
    font-size: 14px;
    font-weight: 700;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: block;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.summary-value {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.info-card {
    padding: 20px;
    background: rgba(34, 211, 238, 0.05);
    border: 1px solid rgba(34, 211, 238, 0.1);
    border-radius: 16px;
    text-align: left;
}

.info-card svg {
    color: #22d3ee;
    margin-bottom: 12px;
}

.info-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.info-card p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
    line-height: 1.4;
}

.btn-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: white;
    color: black;
    text-decoration: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 768px) {
    .submission-box {
        padding: 40px 25px;
        border-radius: 24px;
    }

    .success-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .submission-box h1 {
        font-size: 26px;
    }

    .submission-box p {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .exam-summary {
        padding: 20px;
        margin-bottom: 30px;
    }

    .summary-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .info-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .btn-home {
        width: 100%;
        justify-content: center;
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .submission-box h1 {
        font-size: 22px;
    }

    .submission-box p {
        font-size: 15px;
    }
}.org-dashboard-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #070b14 0%, #0f172a 100%);
    color: #fff;
    gap: 16px;
}

.loading-spinner {
    font-size: 48px;
    color: #6366f1;
    animation: spin 1s linear infinite;
}

.org-dashboard-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #070b14 0%, #0f172a 100%);
    padding: 100px 20px 40px;
}

.org-dashboard-header {
    max-width: 1400px;
    margin: 0 auto 32px;
}

.org-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 24px 32px;
}

.org-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.org-header-icon {
    font-size: 48px;
    color: #a855f7;
}

.org-header-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.org-header-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 0;
}

.org-logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 10px 20px;
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.org-logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
}

.org-dashboard-controls {
    max-width: 1400px;
    margin: 0 auto 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.org-search-box {
    flex: 1;
    min-width: 300px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 16px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
}

.org-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px 14px 48px;
    font-size: 15px;
    color: #fff;
    transition: all 0.3s ease;
}

.org-search-input:focus {
    outline: none;
    border-color: #6366f1;
    background: rgba(255, 255, 255, 0.08);
}

.org-controls-right {
    display: flex;
    gap: 12px;
}

.org-sort-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.org-sort-select:focus {
    outline: none;
    border-color: #6366f1;
}

.org-export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.org-export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.org-stats-grid {
    max-width: 1400px;
    margin: 0 auto 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.org-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.org-stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 40px;
}

.stat-icon.blue {
    color: #3b82f6;
}

.stat-icon.green {
    color: #10b981;
}

.stat-icon.purple {
    color: #a855f7;
}

.stat-icon.orange {
    color: #f97316;
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 4px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.org-table-container {
    max-width: 1400px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.org-students-table {
    width: 100%;
    border-collapse: collapse;
}

.org-students-table thead {
    background: rgba(99, 102, 241, 0.1);
}

.org-students-table th {
    padding: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.org-students-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.org-students-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.org-students-table td {
    padding: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.student-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #fff;
}

.xp-cell {
    color: #f97316;
    font-weight: 700;
}

.level-cell {
    color: #3b82f6;
    font-weight: 600;
}

.coins-cell {
    color: #fbbf24;
    font-weight: 700;
}

.streak-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
    font-weight: 700;
}

.problems-cell {
    color: #a855f7;
    font-weight: 700;
}

.languages-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.language-badge {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    color: #a5b4fc;
    white-space: nowrap;
}

.org-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.org-empty-state svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

@media (max-width: 1024px) {
    .org-table-container {
        overflow-x: auto;
    }

    .org-students-table {
        min-width: 1000px;
    }
}

@media (max-width: 768px) {
    .org-dashboard-container {
        padding: 80px 12px 24px;
    }

    .org-header-content {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .org-header-left {
        flex-direction: column;
        text-align: center;
    }

    .org-dashboard-controls {
        flex-direction: column;
    }

    .org-controls-right {
        flex-direction: column;
    }

    .org-sort-select,
    .org-export-btn {
        width: 100%;
    }

    .org-stats-grid {
        grid-template-columns: 1fr;
    }

    .org-stat-card {
        padding: 16px;
    }

    .org-students-table td,
    .org-students-table th {
        padding: 12px 8px;
        font-size: 13px;
    }

    .student-name {
        gap: 8px;
    }
}

/* Diagnostics Panel */
.org-diagnostics {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0 auto 2rem;
    max-width: 1400px;
    color: #e2e8f0;
}

.org-diagnostics h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.diag-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    padding-right: 0.5rem;
}

.diag-item {
    display: flex;
    gap: 1rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.diag-item.success {
    color: #4ade80;
    border-left: 3px solid #4ade80;
}

.diag-item.warning {
    color: #fbbf24;
    border-left: 3px solid #fbbf24;
}

.diag-item.error {
    color: #f87171;
    border-left: 3px solid #f87171;
}

.diag-item.info {
    color: #60a5fa;
    border-left: 3px solid #60a5fa;
}

.diag-time {
    color: #64748b;
    font-size: 0.75rem;
    min-width: 80px;
}

.diag-hint {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}