.dialog-panel {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.dialog-form {
  display: grid;
  gap: 12px;
}

.dialog-label {
  font-size: 20px;
  font-weight: 700;
  color: #1f3a5f;
}

#question-input {
  width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  resize: vertical;
  padding: 14px;
  border: 1px solid #c9d1dc;
  border-radius: 6px;
  font: 20px/1.45 Arial, sans-serif;
  color: #222;
  background: #fff;
}

#question-input:focus {
  outline: 3px solid rgba(193, 97, 33, 0.25);
  border-color: rgb(193, 97, 33);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dialog-actions button {
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: 700 16px/1.2 Arial, sans-serif;
}

.dialog-actions button {
  color: #fff;
  background: rgb(193, 97, 33);
}

.dialog-actions button:hover {
  background: rgb(116, 70, 39);
}

.dialog-question-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

#simple-question-select,
#interesting-question-select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #c9d1dc;
  border-radius: 6px;
  color: #1f3a5f;
  background: #fff;
  font: 700 16px/1.25 Arial, sans-serif;
}

#simple-question-select:focus,
#interesting-question-select:focus {
  outline: 3px solid rgba(193, 97, 33, 0.25);
  border-color: rgb(193, 97, 33);
}

.answer-box,
.history-box {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #d9dfe8;
}

.answer-box h3,
.history-box h3 {
  text-align: left;
}

#answer-output {
  min-height: 72px;
  padding: 14px;
  border: 1px solid #d9dfe8;
  border-radius: 6px;
  background: #fafafa;
  font-size: 20px;
}

#answer-output img {
  max-height: 320px;
}

.answer-list {
  margin: 0 0 0 22px;
}

.answer-list li {
  margin-bottom: 10px;
  font-size: 20px;
}

#question-history {
  margin-left: 24px;
}

#question-history li {
  font-size: 18px;
}

.test-results {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #d9dfe8;
  border-radius: 6px;
  background: #fafafa;
  font-size: 18px;
}

.test-results summary {
  cursor: pointer;
  font-weight: 700;
}

.test-results table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 16px;
}

.test-results th,
.test-results td {
  padding: 8px;
  border: 1px solid #d9dfe8;
  text-align: left;
  vertical-align: top;
}

@media (min-width: 769px) and (max-width: 1600px) {
  .dialog-panel {
    max-width: 980px;
  }

  .dialog-form {
    gap: 10px;
  }

  .dialog-label {
    font-size: 18px;
  }

  #question-input {
    min-height: 96px;
    padding: 12px;
    font-size: 18px;
  }

  .dialog-actions button {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 15px;
  }

  .dialog-question-list {
    margin-top: 14px;
  }

  #simple-question-select,
  #interesting-question-select {
    min-height: 40px;
    font-size: 15px;
  }

  .answer-box,
  .history-box {
    margin-top: 18px;
    padding-top: 14px;
  }

  #answer-output {
    min-height: 64px;
    padding: 12px;
    font-size: 18px;
  }

  .answer-list li {
    margin-bottom: 8px;
    font-size: 18px;
  }
}

@media (min-width: 769px) and (max-width: 1366px),
  (min-width: 769px) and (max-height: 800px) {
  .dialog-panel {
    max-width: 900px;
  }

  .dialog-label {
    font-size: 16px;
  }

  #question-input {
    min-height: 78px;
    padding: 10px;
    font-size: 16px;
  }

  .dialog-actions {
    gap: 8px;
  }

  .dialog-actions button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .dialog-question-list {
    gap: 6px;
    margin-top: 12px;
  }

  #simple-question-select,
  #interesting-question-select {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 14px;
  }

  .answer-box,
  .history-box {
    margin-top: 14px;
    padding-top: 12px;
  }

  #answer-output {
    min-height: 56px;
    padding: 10px;
    font-size: 16px;
  }

  .answer-list {
    margin-left: 20px;
  }

  .answer-list li {
    margin-bottom: 6px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  #question-input {
    font-size: 16px;
  }

  .dialog-actions button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .dialog-panel {
    width: 100%;
  }

  .dialog-label {
    font-size: 16px;
  }

  #question-input {
    min-height: 96px;
    padding: 12px;
    font-size: 16px;
  }

  .dialog-actions,
  .dialog-question-list {
    gap: 8px;
  }

  .dialog-actions button {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 14px;
    line-height: 1.25;
  }

  #simple-question-select,
  #interesting-question-select {
    font-size: 14px;
  }

  #answer-output {
    min-height: 64px;
    padding: 12px;
    font-size: 16px;
    line-height: 1.45;
  }

  #answer-output img {
    max-height: none;
  }

  .answer-list li {
    font-size: 16px;
  }

  #question-history {
    margin-left: 20px;
  }

  #question-history li,
  .test-results {
    font-size: 15px;
  }

  .test-results {
    overflow-x: auto;
  }
}