/* ==== Responsive ==== */
@media (max-width: 600px) {
  #app { padding: 14px 12px 60px; }
  .question-card { padding: 18px 16px; }
  .q-prompt { font-size: 16px; }
  .q-prompt .cn { font-size: 20px; }
  .quiz-bar { font-size: 12px; }
  .quiz-progress { width: 100%; }
  .primary-btn, .ghost-btn { padding: 10px 14px; font-size: 14px; }
  .opt-btn { padding: 10px 12px; font-size: 14px; }
  .result-hero .score { font-size: 44px; }
  .dialogue .text { font-size: 16px; }
  .code-table { font-size: 12px; padding: 10px; }
}

@media (max-width: 480px) {
  [data-app="vocab"] #app { padding: 14px 14px 30px; }
  [data-app="vocab"] .brand h1 { font-size: 17px; }
  [data-app="vocab"] .logo { width: 42px; height: 42px; font-size: 26px; }
  [data-app="vocab"] .btn-cram { min-width: auto; padding: 18px 22px; }
  [data-app="vocab"] .btn-cram strong { font-size: 19px; }
  [data-app="vocab"] .btn-cram small { font-size: 12px; }
  [data-app="vocab"] .flip-card { min-height: 320px; }
  [data-app="vocab"] .hanzi-xl { font-size: 76px; }
  [data-app="vocab"] .pinyin-lg { font-size: 22px; }
  [data-app="vocab"] .meaning-lg { font-size: 17px; }
  [data-app="vocab"] .flip-face { padding: 28px 18px; }
  [data-app="vocab"] .rating-row { gap: 6px; }
  [data-app="vocab"] .btn-rate { padding: 10px 4px; }
  [data-app="vocab"] .btn-rate .rate-label { font-size: 12px; }
  [data-app="vocab"] .btn-rate .rate-interval { font-size: 10px; }
  [data-app="vocab"] .btn-rate kbd { display: none; }
  [data-app="vocab"] .mini-stats span { font-size: 20px; }
  [data-app="vocab"] .hero .hint { font-size: 13px; }
}