/* =====================================================
   MOCKS LANDING — scoped to .mocks-page only
   ===================================================== */

.mocks-page {
  width: 100%;
  max-width: var(--ieg-content, 76rem);
  margin: 0 auto;
  padding: 12px 0 28px;
  box-sizing: border-box;
  color: #1a1f24;
}

.mocks-page *,
.mocks-page *::before,
.mocks-page *::after {
  box-sizing: border-box;
}

.mocks-page .mocks-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mocks-page .mocks-hero__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mocks-page .mocks-hero__mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eaf8ef;
  color: #0d7e3c;
  font-size: 18px;
}

.mocks-page .mocks-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #111921;
}

.mocks-page .mocks-hero__copy > p {
  margin: 8px 0 0;
  max-width: 34rem;
  font-size: 14.5px;
  line-height: 1.45;
  color: #5a675f;
}

.mocks-page .mocks-hero__callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 18rem;
  padding: 12px 14px;
  border: 1px solid #cfe8d8;
  border-radius: 12px;
  background: #eaf8ef;
  color: #0d7e3c;
}

.mocks-page .mocks-hero__callout i {
  margin-top: 2px;
}

.mocks-page .mocks-hero__callout strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-hero__callout span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 650;
  color: #2f4a32;
}

.mocks-page .mocks-rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #cfe8d8;
  border-radius: 14px;
  background: #f3faf5;
}

.mocks-page .mocks-rec__copy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.mocks-page .mocks-rec__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eaf8ef;
  color: #0d7e3c;
}

.mocks-page .mocks-rec strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-rec p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #536158;
}

.mocks-page .mocks-rec-pill {
  display: inline-flex;
  align-items: center;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf8ef;
  color: #0d7e3c;
  font-size: 12px;
  font-weight: 750;
}

.mocks-page .mocks-modes {
  margin-bottom: 18px;
}

.mocks-page .mocks-modes > h2,
.mocks-page .mocks-topic__head h2,
.mocks-page .mocks-panel h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mocks-page .mocks-mode {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #dfe9e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 31, 36, .04);
}

.mocks-page .mocks-mode__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  font-size: 16px;
}

.mocks-page .mocks-mode__icon.is-full {
  background: #e8f0ff;
  color: #2f6fed;
}

.mocks-page .mocks-mode__icon.is-quick {
  background: #f3eaff;
  color: #6f56c4;
}

.mocks-page .mocks-mode__icon.is-custom {
  background: #eaf8ef;
  color: #0d7e3c;
}

.mocks-page .mocks-mode h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-mode__lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #5a675f;
}

.mocks-page .mocks-mode__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mocks-page .mocks-mode__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
  color: #243028;
}

.mocks-page .mocks-mode__list i {
  color: #0d7e3c;
  margin-top: 2px;
}

.mocks-page .mocks-mode .ieg-btn {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}

.mocks-page .mocks-mode__alts {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: #6a766f;
}

.mocks-page .mocks-mode__alts a {
  color: #0d7e3c;
  font-weight: 750;
  text-decoration: none;
}

.mocks-page .mocks-mode__alts a:hover {
  text-decoration: underline;
}

.mocks-page .mocks-topic {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #dfe9e4;
  border-radius: 14px;
  background: #fff;
}

.mocks-page .mocks-topic__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mocks-page .mocks-section-link {
  font-size: 13px;
  font-weight: 750;
  color: #0d7e3c;
  text-decoration: none;
}

.mocks-page .mocks-section-link:hover {
  text-decoration: underline;
}

.mocks-page .mocks-topic-form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(9rem, .8fr) auto;
  gap: 12px;
  align-items: end;
}

.mocks-page .mocks-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  color: #6a766f;
}

.mocks-page .mocks-field--lens {
  border: 0;
  padding: 0;
  min-width: 0;
}

.mocks-page .mocks-field--lens legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 750;
  color: #6a766f;
}

.mocks-page .mocks-lens {
  display: flex;
  gap: 6px;
}

.mocks-page .mocks-lens__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d6e0db;
  border-radius: 10px;
  background: #fff;
  color: #243028;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.mocks-page .mocks-lens__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mocks-page .mocks-lens__opt:has(input:checked) {
  border-color: #15964a;
  background: #eaf8ef;
  color: #0d7e3c;
}

.mocks-page .mocks-topic-form .ieg-input {
  min-height: 42px;
}

.mocks-page .mocks-topic-form .ieg-btn {
  min-height: 42px;
  white-space: nowrap;
}

.mocks-page .mocks-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.mocks-page .mocks-panel {
  padding: 16px;
  border: 1px solid #dfe9e4;
  border-radius: 14px;
  background: #fff;
}

.mocks-page .mocks-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mocks-page .mocks-continue-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-continue-card > p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #5a675f;
}

.mocks-page .mocks-continue-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 750;
  color: #2f4a32;
}

.mocks-page .mocks-continue-bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: #e3ebe7;
  overflow: hidden;
}

.mocks-page .mocks-continue-bar span {
  display: block;
  height: 100%;
  background: #15964a;
}

.mocks-page .mocks-continue-progress em {
  font-style: normal;
}

.mocks-page .mocks-recent-list {
  display: flex;
  flex-direction: column;
}

.mocks-page .mocks-recent-row {
  display: grid;
  grid-template-columns: 1fr auto auto 14px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eef3f0;
  color: inherit;
  text-decoration: none;
}

.mocks-page .mocks-recent-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mocks-page .mocks-recent-row:hover {
  background: #f7fbf8;
}

.mocks-page .mocks-recent-row__copy strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-recent-row__copy em {
  font-style: normal;
  font-size: 12px;
  color: #6a766f;
}

.mocks-page .mocks-recent-row__score {
  font-size: 14px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-result {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: #eef1ef;
  color: #536158;
}

.mocks-page .mocks-result.is-pass {
  background: #eaf8ef;
  color: #0d7e3c;
}

.mocks-page .mocks-result.is-merit {
  background: #fff6df;
  color: #8a6a00;
}

.mocks-page .mocks-result.is-distinction {
  background: #f0eaff;
  color: #5b3db8;
}

.mocks-page .mocks-result.is-fail {
  background: #fdeceb;
  color: #b42318;
}

.mocks-page .mocks-empty,
.mocks-page .mocks-empty-wrap {
  color: #6a766f;
  font-size: 13.5px;
}

.mocks-page .mocks-footer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mocks-page .mocks-papers-link,
.mocks-page .mocks-admin-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #dfe9e4;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.mocks-page .mocks-papers-link strong,
.mocks-page .mocks-admin-card strong {
  font-size: 14px;
  font-weight: 800;
  color: #111921;
}

.mocks-page .mocks-papers-link span,
.mocks-page .mocks-admin-card span {
  font-size: 12.5px;
  color: #5a675f;
}

.mocks-page .mocks-papers-link:hover,
.mocks-page .mocks-admin-card:hover {
  border-color: #9fcbb0;
  background: #f7fbf8;
}

@media (max-width: 900px) {
  .mocks-page .mocks-modes-grid,
  .mocks-page .mocks-lower,
  .mocks-page .mocks-footer-row {
    grid-template-columns: 1fr;
  }
  .mocks-page .mocks-topic-form {
    grid-template-columns: 1fr;
  }
  .mocks-page .mocks-hero h1 {
    font-size: 28px;
  }
}

/* =====================================================
   MOCK EXAM SESSION — scoped to #mx-app / .mx-app only
   Markup/IDs unchanged for existing JS behaviour.
   ===================================================== */

.mx-app,
#mx-app {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 12px 16px 28px;
  box-sizing: border-box;
}

.mx-app *,
.mx-app *::before,
.mx-app *::after {
  box-sizing: border-box;
}

.mx-app .mx-session {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mx-app .mx-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d6e0db;
  border-radius: 9px;
  background: #fff;
  color: #087843;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mx-app .mx-nav-btn:hover {
  border-color: #9fcbb0;
  background: #eef8f1;
}

.mx-app .mx-timer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  background: #12352b;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
}

.mx-app .mx-timer.is-urgent {
  background: #8a1f12;
}

.mx-app .mx-session-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid #dfe9e4;
  border-radius: 12px;
  background: #fff;
}

.mx-app .mx-session-head__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.mx-app .mx-session-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: #111921;
  letter-spacing: -.02em;
}

.mx-app .mx-session-title i {
  color: #0d7e3c;
  font-size: 18px;
}

.mx-app .mx-session-meta {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: #5a675f;
}

.mx-app .mx-session-progress-wrap {
  min-width: min(240px, 100%);
  text-align: right;
}

.mx-app .mx-session-progress-label {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 750;
  color: #2f4a32;
}

.mx-app .mx-session-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mx-app .mx-session-progress {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #e3ebe7;
  overflow: hidden;
}

.mx-app .mx-session-progress span {
  display: block;
  height: 100%;
  background: #15964a;
  border-radius: 999px;
}

.mx-app .mx-session-progress-pct {
  flex: 0 0 auto;
  margin: 0;
  font-style: normal;
  font-size: 12px;
  font-weight: 750;
  color: #2f4a32;
}

.mx-app .mx-q {
  padding: 20px 18px 16px;
  border: 1px solid #dfe9e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 31, 36, .04);
}

.mx-app .mx-q__label {
  margin: 0 0 8px;
  color: #0d7e3c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mx-app .mx-stem {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
  color: #111921;
  letter-spacing: -.02em;
}

.mx-app .mx-stem p {
  margin: 0 0 .6em;
}

.mx-app .mx-stem p:last-child {
  margin-bottom: 0;
}

.mx-app .mx-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}

.mx-app .mx-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 14px;
  border: 1.5px solid #dfe5e1;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.mx-app .mx-opt:hover {
  border-color: #bfd0c7;
  background: #f7fbf8;
}

.mx-app .mx-opt__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mx-app .mx-opt__letter {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid #cfdad3;
  background: #fff;
  color: #2f4a32;
  font-size: 13px;
  font-weight: 800;
}

.mx-app .mx-opt__text {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
  font-size: 15px;
  line-height: 1.4;
  color: #1a1f24;
  font-weight: 600;
}

.mx-app .mx-opt__text .display_text {
  display: inline;
  margin: 0;
}

.mx-app .mx-opt:has(.mx-opt__input:checked) {
  border-color: #15964a;
  background: #eaf8ef;
}

.mx-app .mx-opt:has(.mx-opt__input:checked) .mx-opt__letter {
  border-color: #15964a;
  background: #15964a;
  color: #fff;
}

.mx-app .mx-opt.is-correct {
  border-color: #15964a;
  background: #eaf8ef;
}

.mx-app .mx-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mx-app .mx-actions__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.mx-app .mx-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d6e0db;
  border-radius: 10px;
  background: #f3f5f4;
  color: #3a4740;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mx-app .mx-tool-btn:hover,
.mx-app .mx-tool-btn[aria-pressed="true"] {
  border-color: #9fcbb0;
  background: #eef8f1;
  color: #087843;
}

.mx-app .mx-finish-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: 1px solid #cfe8d8;
  border-radius: 12px;
  background: #eaf8ef;
  color: #0d7e3c;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.mx-app .mx-finish-bar:hover {
  background: #dff3e7;
}

.mx-app .mx-numeric {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 180px);
  gap: 8px;
  margin-bottom: 14px;
}

.mx-app .mx-numeric input,
.mx-app .mx-numeric select,
.mx-app textarea[data-mx-text] {
  min-height: 44px;
  width: 100%;
  border: 1px solid #d8e0da;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

.mx-app .mx-match {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.mx-app .mx-order {
  padding-left: 20px;
  margin-bottom: 14px;
}

.mx-app .mx-order li {
  padding: 10px;
  border: 1px solid #e4eee8;
  border-radius: 10px;
  margin: 6px 0;
  cursor: pointer;
}

.mx-app .mx-order li.is-pick {
  border-color: #15964a;
  background: #eaf8ef;
}

/* Navigator drawer */
.mx-app .mx-nav-drawer.ieg-drawer,
body.ieg-exam .mx-nav-drawer.ieg-drawer {
  width: min(360px, 100%);
}

.mx-app .mx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 12px;
  font-weight: 650;
  color: #536158;
}

.mx-app .mx-legend__ico {
  display: inline-grid;
  place-items: center;
  width: 18px;
  margin-right: 4px;
  font-weight: 800;
}

.mx-app .mx-legend__ico.is-done { color: #0d7e3c; }
.mx-app .mx-legend__ico.is-flag { color: #b42318; }
.mx-app .mx-legend__ico.is-on { color: #111921; }

.mx-app .mx-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.mx-app .mx-nav__i {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1.5px solid #dfe5e1;
  border-radius: 10px;
  background: #fff;
  color: #243028;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.mx-app .mx-nav__i.is-done {
  box-shadow: none;
  background: #f3faf5;
}

.mx-app .mx-nav__i.is-on {
  outline: none;
  border-color: #15964a;
  box-shadow: 0 0 0 2px rgba(21, 150, 74, .2);
}

.mx-app .mx-nav__i.is-flag {
  outline: none;
  background: #fff8f6;
}

/* Override kit.css dashed outline + ::after flag — marks are in markup */
.mx-app .mx-nav__i.is-flag::after {
  content: none;
  margin: 0;
}

.mx-app .mx-nav__mark {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 10px;
  line-height: 1;
}

.mx-app .mx-nav__mark.is-done { color: #0d7e3c; }
.mx-app .mx-nav__mark.is-flag { color: #b42318; }

.mx-app .mx-nav-summary {
  margin: 0 0 12px;
  font-size: 13px;
  color: #536158;
  font-weight: 650;
}

.mx-app .mx-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mx-app .mx-nav-actions .ieg-btn {
  flex: 1 1 140px;
}

.mx-app .mx-modal {
  z-index: 80;
}

@media (max-width: 720px) {
  .mx-app,
  #mx-app {
    padding: 10px 12px 24px;
  }
  .mx-app .mx-session-title {
    font-size: 19px;
  }
  .mx-app .mx-session-head__tools {
    margin-left: 0;
    width: 100%;
  }
  .mx-app .mx-stem {
    font-size: 17px;
  }
  .mx-app .mx-session-progress-wrap {
    width: 100%;
    text-align: left;
  }
  .mx-app .mx-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mx-app .mx-actions__nav {
    margin-left: 0;
    width: 100%;
  }
  .mx-app .mx-actions__nav .ieg-btn {
    flex: 1;
  }
  .mx-app .mx-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mx-app .mx-numeric {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   MOCK RESULT — scoped to .mock-result-page
   ===================================================== */

.mx-app:has(.mock-result-page),
#mx-app:has(.mock-result-page) {
  max-width: 56rem;
}

.mock-result-page {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 8px 0 36px;
  box-sizing: border-box;
  color: #1a1f24;
}

.mock-result-page *,
.mock-result-page *::before,
.mock-result-page *::after {
  box-sizing: border-box;
}

.mock-result-page .mx-result-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  color: #0d7e3c;
  font-size: 13.5px;
  font-weight: 750;
  text-decoration: none;
}

.mock-result-page .mx-result-back:hover {
  text-decoration: underline;
}

.mock-result-page .mx-result-hero h1 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #111921;
}

.mock-result-page .mx-result-hero p {
  margin: 0 0 18px;
  max-width: 40rem;
  font-size: 14.5px;
  line-height: 1.45;
  color: #5a675f;
}

.mock-result-page .mx-result-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  align-items: center;
  padding: 20px 18px;
  border: 1px solid #f0d4cf;
  border-radius: 16px;
  background: #fff6f4;
}

.mock-result-page .mx-result-summary.is-pass {
  border-color: #cfe8d8;
  background: #f3faf5;
}

.mock-result-page .mx-result-summary.is-neutral {
  border-color: #dfe9e4;
  background: #fff;
}

.mock-result-page .mx-result-ring {
  --pct: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#c7463a calc(var(--pct) * 1%), #f0e2df 0);
}

.mock-result-page .mx-result-ring[data-tone="pass"] {
  background: conic-gradient(#15964a calc(var(--pct) * 1%), #dcefe4 0);
}

.mock-result-page .mx-result-ring[data-tone="neutral"] {
  background: conic-gradient(#5a675f calc(var(--pct) * 1%), #e5ebe8 0);
}

.mock-result-page .mx-result-ring__hole {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(26, 31, 36, .04);
}

.mock-result-page .mx-result-ring__hole strong {
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  color: #111921;
}

.mock-result-page .mx-result-ring__hole span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 650;
  color: #6a766f;
}

.mock-result-page .mx-result-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6a766f;
}

.mock-result-page .mx-result-summary__copy h2 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #111921;
}

.mock-result-page .mx-result-summary__copy > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #536158;
}

.mock-result-page .mx-result-pending {
  margin-top: 8px !important;
  color: #8a1f12 !important;
  font-weight: 650;
}

.mock-result-page .mx-result-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding-top: 4px;
}

.mock-result-page .mx-result-stats > div {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(26, 31, 36, .06);
}

.mock-result-page .mx-result-stats dt {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6a766f;
}

.mock-result-page .mx-result-stats dd {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #111921;
}

.mock-result-page .mx-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 20px;
}

.mock-result-page .mx-result-actions .ieg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.mock-result-page .mx-result-cta {
  min-height: 44px;
}

.mock-result-page .mx-result-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  margin-bottom: 22px;
}

.mock-result-page .mx-result-panel {
  padding: 16px 16px 14px;
  border: 1px solid #dfe9e4;
  border-radius: 14px;
  background: #fff;
}

.mock-result-page .mx-result-panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #111921;
}

.mock-result-page .mx-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mock-result-page .mx-topic__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13.5px;
}

.mock-result-page .mx-topic__name {
  font-weight: 750;
  color: #243028;
}

.mock-result-page .mx-topic__score {
  color: #6a766f;
  font-weight: 650;
  white-space: nowrap;
}

.mock-result-page .mx-topic__bar {
  height: 8px;
  border-radius: 999px;
  background: #e3ebe7;
  overflow: hidden;
}

.mock-result-page .mx-topic__bar span {
  display: block;
  height: 100%;
  background: #15964a;
  border-radius: 999px;
}

.mock-result-page .mx-topic--empty {
  color: #6a766f;
  font-size: 13.5px;
}

.mock-result-page .mx-next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mock-result-page .mx-next-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mock-result-page .mx-next-steps__n {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eaf8ef;
  color: #0d7e3c;
  font-size: 13px;
  font-weight: 800;
}

.mock-result-page .mx-next-steps strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: #111921;
}

.mock-result-page .mx-next-steps p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #5a675f;
}

.mock-result-page .mx-result-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mock-result-page .mx-result-review h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #111921;
}

.mock-result-page .mx-result-review__meta {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: #6a766f;
}

.mock-result-page .mx-review-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #dfe9e4;
  border-radius: 12px;
  background: #f7faf8;
}

.mock-result-page .mx-review-tool {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #d6e0db;
  border-radius: 8px;
  background: #fff;
  color: #243028;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.mock-result-page .mx-review-tool:hover {
  border-color: #9fcbb0;
  background: #eef8f1;
  color: #087843;
}

.mock-result-page .mx-review {
  border: 1px solid #dfe9e4;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}

.mock-result-page .mx-review__summary {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr auto 18px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.mock-result-page .mx-review__mark {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  background: #eef1ef;
  color: #536158;
}

.mock-result-page .mx-review.is-correct .mx-review__mark {
  background: #eaf8ef;
  color: #0d7e3c;
}

.mock-result-page .mx-review.is-incorrect .mx-review__mark {
  background: #fdeceb;
  color: #b42318;
}

.mock-result-page .mx-review__title {
  min-width: 0;
  font-size: 13.5px;
  color: #243028;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-result-page .mx-review__title em {
  font-style: normal;
  font-weight: 800;
  margin-right: 6px;
}

.mock-result-page .mx-review__badge {
  font-size: 12px;
  font-weight: 750;
  color: #6a766f;
  white-space: nowrap;
}

.mock-result-page .mx-review.is-incorrect .mx-review__badge {
  color: #b42318;
}

.mock-result-page .mx-review.is-correct .mx-review__badge {
  color: #0d7e3c;
}

.mock-result-page .mx-review__chev {
  color: #6a766f;
  transition: transform 160ms ease;
}

.mock-result-page .mx-review.is-open .mx-review__chev {
  transform: rotate(180deg);
}

.mock-result-page .mx-review__body {
  display: none;
  padding: 0 14px 16px;
  border-top: 1px solid #eef3f0;
}

.mock-result-page .mx-review.is-open .mx-review__body {
  display: block;
}

.mock-result-page .mx-review__body .mx-stem {
  margin: 14px 0 10px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 750;
  color: #111921;
}

.mock-result-page .mx-review__status {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
}

.mock-result-page .mx-review__status.is-incorrect { color: #b42318; }
.mock-result-page .mx-review__status.is-correct { color: #0d7e3c; }
.mock-result-page .mx-review__status.is-unanswered { color: #6a766f; }

.mock-result-page .mx-answer-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.mock-result-page .mx-answer {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e4eee8;
}

.mock-result-page .mx-answer span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6a766f;
}

.mock-result-page .mx-answer strong {
  font-size: 14px;
  font-weight: 750;
  color: #111921;
}

.mock-result-page .mx-answer.is-yours {
  background: #fff6f4;
  border-color: #f0d4cf;
}

.mock-result-page .mx-review.is-correct .mx-answer.is-yours {
  background: #eaf8ef;
  border-color: #cfe8d8;
}

.mock-result-page .mx-answer.is-correct {
  background: #eaf8ef;
  border-color: #cfe8d8;
}

.mock-result-page .mx-expl,
.mock-result-page .mx-notes {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 10px;
  background: #f7faf8;
  border: 1px solid #e4eee8;
}

.mock-result-page .mx-expl h4,
.mock-result-page .mx-notes h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #243028;
}

.mock-result-page .mx-notes ul {
  margin: 0;
  padding-left: 18px;
}

.mock-result-page .mx-review__practice {
  margin: 0;
}

@media (max-width: 820px) {
  .mock-result-page .mx-result-grid {
    grid-template-columns: 1fr;
  }
  .mock-result-page .mx-result-stats {
    grid-template-columns: 1fr 1fr;
  }
  .mock-result-page .mx-answer-pair {
    grid-template-columns: 1fr;
  }
  .mock-result-page .mx-review__summary {
    grid-template-columns: 28px 1fr 18px;
  }
  .mock-result-page .mx-review__badge {
    display: none;
  }
}

@media (max-width: 560px) {
  .mock-result-page .mx-result-summary {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .mock-result-page .mx-result-summary__copy {
    text-align: center;
  }
  .mock-result-page .mx-result-actions .ieg-btn {
    width: 100%;
    justify-content: center;
  }
  .mock-result-page .mx-result-hero h1 {
    font-size: 26px;
  }
}

/* =====================================================
   MOCK PRE-START / CONFIRMATION — .mock-start-page only
   ===================================================== */

.mock-start-page {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 12px 16px 28px;
  box-sizing: border-box;
  color: #1a1f24;
}

.mock-start-page *,
.mock-start-page *::before,
.mock-start-page *::after {
  box-sizing: border-box;
}

.mock-start-page .mock-start-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 14px;
}

.mock-start-page .mock-start-header__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eaf8ef;
  color: #0d7e3c;
  font-size: 18px;
}

.mock-start-page .mock-start-header__copy h1 {
  margin: 2px 0 4px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #111921;
}

.mock-start-page .mock-start-header__copy p {
  margin: 0;
  font-size: 14px;
  color: #5a675f;
  font-weight: 650;
}

.mock-start-page .mock-start-card {
  border: 1px solid #dfe9e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 31, 36, .04);
  overflow: hidden;
}

.mock-start-page .mock-start-ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: #eaf8ef;
  border-bottom: 1px solid #d7ecdf;
}

.mock-start-page .mock-start-ready__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.mock-start-page .mock-start-ready__play {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #15964a;
  color: #fff;
  font-size: 14px;
}

.mock-start-page .mock-start-ready__main h2 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 800;
  color: #111921;
}

.mock-start-page .mock-start-ready__main p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #2f4a32;
}

.mock-start-page .mock-start-ready__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #9fcbb0;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  color: #0d7e3c;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.mock-start-page .mock-start-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.mock-start-page .mock-start-summary,
.mock-start-page .mock-start-instructions {
  padding: 16px 18px 18px;
}

.mock-start-page .mock-start-summary {
  border-right: 1px solid #eef3f0;
}

.mock-start-page .mock-start-summary h3,
.mock-start-page .mock-start-instructions h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: #111921;
}

.mock-start-page .mock-start-summary h3 i {
  color: #0d7e3c;
}

.mock-start-page .mock-start-instructions h3 i {
  color: #2f6fed;
}

.mock-start-page .mock-start-rows {
  display: flex;
  flex-direction: column;
}

.mock-start-page .mock-start-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eef3f0;
  font-size: 14px;
}

.mock-start-page .mock-start-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mock-start-page .mock-start-row span {
  color: #6a766f;
  font-weight: 650;
}

.mock-start-page .mock-start-row strong {
  color: #111921;
  font-weight: 800;
}

.mock-start-page .mock-start-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock-start-page .mock-start-tips li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #243028;
  font-weight: 650;
}

.mock-start-page .mock-start-tipico {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eaf8ef;
  color: #0d7e3c;
  font-size: 12px;
}

.mock-start-page .mock-start-tipico.is-muted {
  background: #eef1ef;
  color: #6a766f;
}

.mock-start-page .mock-start-timer-extra {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #5a675f;
}

.mock-start-page .mock-start-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px 16px;
  border-top: 1px solid #eef3f0;
  background: #fafcfb;
}

.mock-start-page .mock-start-actions .ieg-btn {
  text-decoration: none;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mock-start-page .mock-start-go {
  min-width: 9.5rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  .mock-start-page {
    padding: 10px 12px 24px;
  }
  .mock-start-page .mock-start-header__copy h1 {
    font-size: 22px;
  }
  .mock-start-page .mock-start-body {
    grid-template-columns: 1fr;
  }
  .mock-start-page .mock-start-summary {
    border-right: 0;
    border-bottom: 1px solid #eef3f0;
  }
  .mock-start-page .mock-start-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .mock-start-page .mock-start-actions .ieg-btn {
    width: 100%;
  }
}