/* 响应式样式 */

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    position: fixed;
    top: 64px;
    left: -100%;
    transition: left 0.3s;
    z-index: 50;
  }
  
  .sidebar.open {
    left: 0;
  }
  
  .sidebar.collapsed {
    width: 100%;
    left: -100%;
  }
  
  .main {
    padding: 16px;
    margin-left: 0;
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .upcoming-info {
    display: none;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 8px 12px;
  }
  
  .header h1 {
    font-size: 16px;
  }
  
  .header-login {
    gap: 4px;
  }
  
  .header-login-btn,
  .header-register-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  .main {
    padding: 12px;
  }
  
  .card {
    padding: 16px;
  }
}