@media (max-width: 900px) {
  .text-display { font-size: 16px; }
  .stat { min-width: 85px; }
  .col { min-width: 100%; }
  .mode-duration-row { flex-direction: column; }
  .mode-section, .duration-section { min-width: 100%; }
  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    right: 16px;
    background: var(--panel);
    border-radius: 10px;
    padding: 12px;
    flex-direction: column;
    box-shadow: var(--shadow);
    z-index: 100;
  }
  .nav-links.active {
    display: flex;
  }
  .mobile-menu-btn {
    display: block;
  }
  
  .info-page {
    padding: 15px;
  }
  
  .info-page h1 {
    font-size: 1.7rem;
  }
  
  .info-page h2 {
    font-size: 1.3rem;
  }
  
  /* FAQ Responsive Styles */
  .faq-section {
    padding: 20px;
  }
  
  .faq-section h2 {
    font-size: 1.3rem;
  }
  
  .faq-category h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 520px) {
  .text-display { font-size: 15px; }
  header { flex-direction: row; gap: 6px; }
  .top-controls { margin-left: 0; }
  .brand { font-size: 18px; }
  .mode-duration-row { flex-direction: column; }
  .mode-section, .duration-section { min-width: 100%; }
  .footer-links {
    flex-direction: column;
    gap: 8px;
  }
  
  footer {
    padding: 4px;
    font-size: 12px;
  }
  
  .footer-links {
    gap: 12px;
    margin-bottom: 4px;
  }
  
  .btn {
    padding: 12px 16px;
  }
  
  .stat {
    min-width: 70px;
    padding: 6px 8px;
  }
  
  .info-page {
    padding: 10px;
  }
  
  .info-page h1 {
    font-size: 1.5rem;
  }
  
  .info-page h2 {
    font-size: 1.2rem;
  }
  
  /* FAQ Responsive Styles */
  .faq-section {
    padding: 16px;
    margin-top: 16px;
  }
  
  .faq-section h2 {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  
  .faq-category {
    margin-bottom: 24px;
  }
  
  .faq-category h3 {
    font-size: 1rem;
  }
  
  .faq-item {
    padding: 12px;
    margin-bottom: 16px;
  }
  
  .faq-item h4 {
    font-size: 0.9rem;
  }
  
  .faq-item p {
    font-size: 0.85rem;
  }
}