/* Shared phone layout. Desktop keeps the existing two-column workspace. */
@media (max-width: 820px) {
  .top { height: 58px; padding: 0 16px; }
  .brand { font-size: 16px; }
  .shell { padding: 16px 14px 24px; }
  .toolbar { gap: 8px; margin-bottom: 14px; align-items: flex-start; flex-wrap: wrap; }
  h1 { font-size: 20px; line-height: 1.35; flex: 1 1 100%; }
  h1 small { display: block; margin: 2px 0 0; font-size: 12px; }
  .participant { max-width: 45%; text-align: right; overflow-wrap: anywhere; }
  .home-tools { gap: 8px; margin-bottom: 14px; }
  .home-tools input { width: 100%; order: 4; }
  .home-tools select { max-width: 100%; }
  .stats { flex-basis: 100%; order: 5; }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .tile div { padding: 7px 8px; }
  .tile b { font-size: 12px; }
  .tile small { font-size: 10px; }
  .workspace { display: flex; flex-direction: column; height: auto; min-height: 0; border-radius: 5px; }
  .image-pane { height: min(52svh, 520px); min-height: 230px; flex: 0 0 auto; }
  .image-pane img { width: 100%; height: 100%; object-fit: contain; }
  .image-index { bottom: 10px; left: 10px; }
  .decision { padding: 20px 16px 16px; overflow: visible; }
  .progress { margin-bottom: 18px; }
  .attribute-heading { margin-bottom: 14px; font-size: 17px; }
  .question-zh { font-size: 21px; line-height: 1.55; margin-bottom: 8px; }
  .question-en { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
  .choices { gap: 10px; }
  .choice span { min-height: 52px; padding: 14px 10px; display: flex; align-items: center; justify-content: center; }
  .nav { margin-top: 24px; padding-top: 0; }
  .button { min-height: 44px; padding: 9px 12px; }
  .notice { margin: 18px 0; padding: 22px 18px; }
  .notice h2 { font-size: 21px; }
  .notice p { font-size: 16px; line-height: 1.75; }
  .notice-actions, .flow-nav { flex-wrap: wrap; }
  .notice-actions .button, .flow-nav .button { flex: 1 1 140px; }
  .learning { padding: 20px 16px; }
  .learning h2 { font-size: 21px; }
  .example-grid { grid-template-columns: 1fr; gap: 12px; }
  .example-grid img { height: min(55svh, 360px); }
  .quiz-item { padding: 16px 0; }
}

@media (max-width: 420px) {
  .home-tools label { flex-basis: 100%; }
  .home-tools label select { width: calc(100% - 76px); }
  .question-zh { font-size: 19px; }
  .nav { gap: 8px; }
  .nav .button { flex: 1; }
}