@media (max-width: 1100px) {
  .crx-workspace-grid {
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 991px) {
  .crx-app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 1000;
  }
  
  .crx-app-sidebar.crx-sidebar-active {
    transform: translateX(0);
  }
  
  .crx-mobile-header {
    display: flex !important;
    padding: 1rem 1.5rem;
    background: #0d7f76;
    justify-content: space-between;
    align-items: center;
  }
  
  .crx-workspace-grid {
    padding: 1.5rem !important;
  }
}


@media (max-width: 768px) {
  
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  button, .crx-btn, a[style*="padding: 0.75rem"] {
    min-height: 44px;
  }

  .crx-premium-banner {
    flex-direction: column !important;
    padding: 1.5rem !important;
    gap: 1.5rem !important;
  }
  .crx-premium-banner > div:first-child {
    max-width: 100% !important;
  }
  .crx-premium-banner h1 {
    font-size: 2rem !important;
  }
  .crx-premium-banner > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  
  .crx-my-classes-grid, div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  
  .crx-journey-widget {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem !important;
  }
  .crx-journey-stats {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > a {
    width: 100% !important;
    text-align: center !important;
  }
  
  header[style*="padding: 120px"] {
    padding: 90px 1.5rem 2rem !important;
  }
  header[style*="padding: 120px"] h1 {
    font-size: 2rem !important;
  }
  
  .crx-split-layout {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
    gap: 1.5rem !important;
  }
  
  .crx-hub-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  
  .crx-hub-grid {
    grid-template-columns: 1fr !important;
  }
  
  #progressDropdownContainer {
    width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
  }

  .crx-quiz-container {
    padding: 1rem !important;
  }
  
  .crx-quiz-card {
    padding: 1.5rem !important;
  }
  
  .crx-matching-columns {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .crx-matching-column {
    width: 100% !important;
  }

  .crx-quiz-context {
    padding: 1rem !important;
  }
  
  .crx-quiz-footer {
    flex-direction: column-reverse !important;
    gap: 1rem !important;
  }
  .crx-quiz-footer .crx-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .crx-avatar-container {
    width: 100% !important;
    height: auto !important;
    max-width: 300px !important;
    aspect-ratio: 1/1 !important;
  }
  
  .crx-tutor-controls {
    padding: 0 1.5rem !important;
    width: 100% !important;
  }
  
  section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  #crx-dark-toggle {
    bottom: 1.5rem !important;
    right: 1.5rem !important;
  }
}


@media (max-width: 480px) {
  
  header[style*="padding: 120px"], 
  header[style*="padding: 90px"] {
    padding: 70px 1rem 1.5rem !important;
  }
  header[style*="padding: 120px"] h1 {
    font-size: 1.75rem !important;
  }
  
  .crx-workspace-grid,
  .crx-split-layout {
    padding: 1rem !important;
  }
  
  .crx-premium-banner,
  .crx-journey-widget,
  .crx-quiz-card {
    padding: 1.25rem !important;
  }
  
  .crx-premium-banner h1 {
    font-size: 1.6rem !important;
  }
  
  p[style*="font-size: 0.9rem"],
  p[style*="font-size: 0.95rem"] {
    font-size: 0.85rem !important;
  }
  
  #progressDropdownContainer {
    width: calc(100vw - 1rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
  }
  
  .crx-quiz-option {
    padding: 1rem !important;
  }
}