/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    margin: 10px;
    border-radius: 10px;
  }

  .content {
    padding: 20px;
  }

  header h1 {
    font-size: 2em;
  }

  .counter {
    flex-direction: column;
    gap: 10px;
  }
  
  .color-picker {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .color-option {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px;
  }
  
  .section {
    padding: 20px;
  }
  
  header {
    padding: 20px;
  }
  
  header h1 {
    font-size: 1.8em;
  }
}