/* Responsive Media Queries (360px, 375px, 390px, 412px, 768px, 1024px, 1440px) */

@media (max-width: 1024px) {
  .ml-quiz-layout {
    grid-template-columns: 1fr;
  }
  .ml-dashboard-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ml-mobile-nav-toggle {
    display: block;
  }
  .ml-hero-card {
    padding: 24px 16px;
  }
  .ml-palette-drawer-btn {
    display: inline-block;
  }
}

/* Specific Mobile Viewports (360px - 412px) */
@media (max-width: 440px) {
  body {
    font-size: 14px;
  }
  .ml-container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .ml-brand-title {
    font-size: 1.25rem;
  }
  .ml-option-item {
    padding: 10px 12px;
    font-size: 0.875rem;
  }
}

/* Mobile Bottom Bar navigation (when enabled) */
.ml-mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--ml-surface);
  border-top: 1px solid var(--ml-border);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 40;
}

@media (min-width: 769px) {
  .ml-mobile-bottom-nav {
    display: none;
  }
}