/* Every imported question image is 886×591; preserve that framing on all screens. */
.question-image {
  aspect-ratio: 886 / 591;
  height: auto;
  object-fit: cover;
}

@media (max-width: 700px) {
  .topbar,
  .admin-header {
    min-height: 64px;
    height: auto;
    padding: 10px 16px;
  }

  .brand {
    font-size: 18px;
  }

  .brand span {
    flex: 0 0 31px;
    height: 31px;
    width: 31px;
  }

  .shell,
  .admin-shell {
    padding-inline: 14px;
  }

  .quiz-grid {
    grid-template-columns: 1fr;
  }

  .quiz-card {
    gap: 14px;
    padding: 17px;
  }

  .quiz-card .primary {
    width: 100%;
  }

  .question-card {
    border-radius: 20px;
  }

  .question-body {
    padding: 24px 17px 25px;
  }

  .option {
    min-height: 54px;
    padding: 10px;
  }

  .result-card {
    border-radius: 20px;
    margin-block: 10px;
  }

  .result-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .result-actions a {
    padding: 10px;
  }

  .editor-actions {
    width: 100%;
  }

  .editor-actions button {
    flex: 1;
  }

  .panel {
    padding: 17px;
  }
}

@media (max-width: 390px) {
  .quiz-card {
    grid-template-columns: 1fr;
  }

  .logo-wrap {
    height: 72px;
    width: 72px;
  }

  .question-body h1 {
    font-size: 25px;
  }
}