:root {
  --bg: #f6f6f1;
  --ink: #1e2423;
  --muted: #56615e;
  --line: #c9d2cc;
  --panel: #ffffff;
  --primary: #176c6a;
  --primary-ink: #ffffff;
  --success: #276738;
  --danger: #9b2f25;
  --warn: #f5d36b;
  --focus: #0c75ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.45;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px clamp(18px, 4vw, 56px);
  border-bottom: 2px solid var(--line);
  background: #eef3ef;
}

.topActions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topButton {
  min-height: 52px;
  padding: 10px 18px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(34px, 5vw, 56px);
}

h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
}

h3 {
  font-size: 28px;
}

main {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 56px);
}

.screen {
  display: grid;
  gap: 24px;
}

.authGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.authPanel {
  display: grid;
  gap: 18px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 34px);
}

.userInfo {
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 0;
}

.smallStatus {
  min-height: 1.5em;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 0;
}

.hidden {
  display: none !important;
}

.intro,
.questionBand,
.guidedPanel,
.resultPanel,
.reviewPanel,
.pauseBanner,
.sidePanel {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 34px);
}

.sidePanel {
  display: grid;
  gap: 16px;
}

.questionBand {
  border-color: #78918a;
}

.guidedPanel {
  display: grid;
  gap: 12px;
  border-color: #7f916f;
  background: #fbfcf5;
}

.guidedPanel h3 {
  margin-bottom: 0;
}

.guidedPanel p {
  margin-bottom: 0;
}

.guidedMeta {
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.questionBand p {
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.questionBand h2 {
  margin-bottom: 0;
}

.field {
  display: grid;
  gap: 10px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  padding: 16px;
  background: #fff;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

.buttonRow,
.buttonGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.secondaryActions {
  padding-top: 8px;
  border-top: 2px solid var(--line);
}

.buttonGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.searchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 16px;
}

.searchResults {
  display: grid;
  gap: 14px;
}

.searchResult {
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfcfa;
}

.searchResult h4 {
  margin: 0 0 8px;
  font-size: 24px;
}

.searchMeta {
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

button {
  min-height: 64px;
  border: 0;
  border-radius: 8px;
  padding: 16px 22px;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.primary {
  background: var(--primary);
  color: var(--primary-ink);
}

.secondary {
  background: #dfe8e3;
  color: var(--ink);
  border: 2px solid #9aaba4;
}

.success {
  background: var(--success);
  color: #fff;
}

.danger {
  background: var(--danger);
  color: #fff;
}

.badge {
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  background: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.statusBand {
  display: grid;
  gap: 8px;
  background: #132f2f;
  color: #fff;
  border-radius: 8px;
  padding: 18px 22px;
}

.statusBand span {
  font-size: 16px;
  text-transform: uppercase;
  opacity: 0.8;
}

.statusBand strong {
  font-size: clamp(24px, 4vw, 38px);
}

.pauseBanner {
  border-color: #ad8415;
  background: #fff7da;
}

.pauseBanner h3 {
  margin-bottom: 4px;
}

.resultPanel dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.resultPanel dt {
  font-weight: 800;
  color: var(--muted);
}

.resultPanel dd {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.audioPlayer {
  width: 100%;
  margin-top: 18px;
}

.reviewPanel ul {
  margin: 10px 0 22px;
  padding-left: 28px;
}

.correctionBox {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 2px solid var(--line);
}

.waitOverlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 20, 19, 0.86);
  z-index: 1000;
}

.waitOverlay > div {
  max-width: 820px;
  background: #fff;
  border-radius: 8px;
  padding: clamp(24px, 5vw, 56px);
  border: 6px solid var(--warn);
  text-align: center;
}

.waitOverlay h2 {
  color: var(--danger);
  font-size: clamp(42px, 7vw, 76px);
  margin-bottom: 14px;
}

.waitOverlay p {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .buttonGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topActions {
    width: 100%;
    align-items: stretch;
    justify-content: space-between;
  }

  .topActions button {
    width: auto;
  }

  button {
    width: 100%;
  }

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

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