.learning-topic-grid,
.learning-unit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.learning-topic {
  min-height: 220px;
  margin: 0;
  text-align: left;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}

.learning-topic h2,
.learning-topic small,
.learning-topic span {
  display: block;
}

.learning-unit-grid .unit {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  white-space: normal;
}

.progress-summary {
  width: 100%;
  margin-top: 8px;
}

.progress-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.progress-heading strong {
  color: var(--green);
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.progress-heading span {
  color: var(--muted);
  font-size: 12px;
}

.progress-bar {
  display: flex;
  height: 11px;
  margin: 8px 0 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #cfd6ce;
}

.progress-bar span {
  display: block;
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
}

.progress-bar .correct { background: #31834c; }
.progress-bar .assisted { background: #9bcf84; }
.progress-bar .incorrect { background: #c9574f; }
.progress-bar .review { background: #e0b72f; }
.progress-bar .open { background: #fff; }

.progress-message {
  display: block;
  margin-top: 10px;
  color: var(--green);
  font-weight: 600;
}

.session-close{width:42px;height:42px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#fff;color:#7a2d27}
.exam #record{min-height:58px;padding:15px 28px;font-size:17px}
.dont-know-symbol{width:58px;height:58px;padding:0;border-radius:50%;font-size:28px;background:#a8342f;color:#fff;border-color:#a8342f}
.dont-know-symbol:hover{background:#8e2925}
.voice-status-only:empty{display:none}
.question-requirements{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px}
.question-requirements span{padding:7px 11px;border-radius:999px;background:#eef2e9;color:#415147;font-size:12px}
.correct-check{width:104px;height:104px;display:grid;place-items:center;margin:24px auto;border-radius:50%;background:#dfeee1;color:#2f7d46;font-size:64px;font-weight:700}
.result-dialog.correct-only{text-align:center;max-width:430px}
.answer-explanation{padding:16px 18px;border-radius:10px;background:#f2f4ed;margin-bottom:22px}

.unit.recommendation {
  border-style: dashed;
  background: #f7f4e9;
  justify-content: center;
}

.activity-shade {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #10261dd9;
}

.activity-dialog {
  width: min(430px, 100%);
  padding: 34px 28px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 20px 80px #0005;
}

.activity-dialog h2 {
  margin: 18px 0 10px;
}

.activity-dialog p {
  margin: 0;
  color: var(--muted);
}

.activity-spinner {
  display: inline-block;
  width: 46px;
  height: 46px;
  border: 5px solid #dce5dd;
  border-top-color: var(--green);
  border-radius: 50%;
  animation: activity-spin .8s linear infinite;
}

.activity-ready {
  display: inline-grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 50%;
  background: #dfeee1;
  color: #24512d;
  font-size: 28px;
  font-weight: 700;
}

@keyframes activity-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
  .learning-topic-grid,
  .learning-unit-grid {
    grid-template-columns: 1fr;
  }

  .learning-topic,
  .learning-unit-grid .unit {
    min-height: 190px;
  }

  #unit-step .page-top {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .activity-spinner { animation-duration: 1.6s; }
}

.learning-unit-grid .unit { padding: 14px; }
.lesson-history { margin-top: 4px; }
.lesson-progress { margin-top: 5px; }
.lesson-bar { display: block; width: 100%; height: 9px; border: 1px solid #cfd6ce; border-radius: 8px; overflow: hidden; background: #fff; margin-top: 3px; }
.lesson-history small { font-size: 11px; }