/* Responsive Design */

@media (max-width: 768px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
  .main { padding: 2rem 0 3rem; }
  .hero { margin-bottom: 2rem; }
  .hero .subtitle { font-size: 1rem; }
  .result-score { font-size: 2.25rem; }
}

@media (max-width: 480px) {
  html { font-size: 15px; }
  .container { padding: 0 1rem; }
  .main { padding: 1.5rem 0 2.5rem; }
  .header-inner { gap: 0; }
  .logo { font-size: 0.9375rem; }
  .header-controls { gap: 0.375rem; }
  .lang-btn { padding: 0.3125rem 0.375rem; font-size: 0.75rem; }
  .theme-toggle { width: 1.875rem; height: 1.875rem; }
  .scale-card { padding: 1rem; }
  .scale-card .card-footer { flex-direction: column; }
  .scale-card .card-footer .btn { width: 100%; max-width: none; }
  .result-score { font-size: 2rem; }
  .result-actions { flex-direction: column; }
  .result-actions .btn { width: 100%; }
  .nav-buttons { grid-template-columns: 1fr; }
  .history-table th,
  .history-table td { padding: 0.625rem 0.5rem; font-size: 0.8125rem; }
  .history-item { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .history-actions { width: 100%; justify-content: flex-end; }
}