.mock-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.mock-summary-card {
  min-height: 92px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-summary-card span,
.mock-kicker {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mock-summary-card strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.35rem;
}

.mock-app {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.mock-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
}

.mock-filter-panel,
.mock-stage,
.mock-source-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-filter-panel,
.mock-source-panel {
  padding: 16px;
}

.mock-filter-panel label {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
}

.mock-filter-panel select,
.mock-filter-panel input {
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.mock-set-list {
  display: grid;
  gap: 8px;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 3px;
}

.mock-set-button {
  width: 100%;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-set-button:hover,
.mock-set-button[aria-current="true"] {
  background: #eef8f5;
  border-color: #8fc7b9;
}

.mock-set-button strong,
.mock-set-button span {
  display: block;
}

.mock-set-button span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.mock-stage {
  min-height: 560px;
  overflow: hidden;
}

.mock-welcome,
.mock-runner,
.mock-report {
  padding: 22px;
}

.mock-welcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.mock-welcome-card {
  padding: 16px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-welcome-card strong,
.mock-welcome-card span {
  display: block;
}

.mock-welcome-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
}

.mock-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.mock-mode-option {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 13px 13px 13px 42px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.mock-mode-option:has(input:checked) {
  background: #eef8f5;
  border-color: var(--green);
}

.mock-mode-option input {
  position: absolute;
  top: 17px;
  left: 14px;
}

.mock-mode-option strong {
  color: var(--ink);
}

.mock-mode-option span {
  color: var(--muted);
  font-size: 0.8rem;
}

.mock-runner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: -22px -22px 20px;
  padding: 16px 22px;
  background: #f8fbfc;
  border-bottom: 1px solid var(--line);
}

.mock-runner-head h2 {
  font-size: 1.2rem;
}

.mock-timer {
  min-width: 104px;
  padding: 9px 12px;
  color: #fff;
  text-align: center;
  background: var(--blue);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.mock-timer.is-warning {
  background: #b94b3f;
}

.mock-progress-track {
  height: 8px;
  margin: 0 0 14px;
  overflow: hidden;
  background: #e5edf1;
  border-radius: 999px;
}

.mock-progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--green), #46a9a0);
  transition: width 180ms ease;
}

.mock-question-nav {
  display: grid;
  grid-template-columns: repeat(10, minmax(32px, 1fr));
  gap: 6px;
  margin-bottom: 18px;
}

.mock-question-chip {
  min-height: 34px;
  padding: 0;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 900;
}

.mock-question-chip.is-current {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.mock-question-chip.is-answered {
  color: var(--green-dark);
  background: #e9f6f2;
  border-color: #acd5ca;
}

.mock-question-chip.is-current.is-answered {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}

.mock-question-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-question-card legend {
  width: 100%;
  padding: 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.5;
}

.mock-options {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.mock-option {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.mock-option:hover {
  border-color: #9fb8c4;
}

.mock-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mock-option-key {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--blue);
  background: #edf5f8;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 950;
}

.mock-option:has(input:checked) {
  background: #eef6fb;
  border-color: var(--blue);
}

.mock-option.is-correct {
  background: #e9f7f0;
  border-color: #55a986;
}

.mock-option.is-wrong {
  background: #fff0ee;
  border-color: #d87a70;
}

.mock-feedback {
  margin-top: 14px;
  padding: 13px;
  color: var(--muted);
  background: #f8fbfc;
  border-left: 4px solid var(--blue);
  border-radius: 0 7px 7px 0;
}

.mock-feedback strong {
  color: var(--ink);
}

.mock-feedback.is-correct {
  border-left-color: var(--green);
}

.mock-feedback.is-wrong {
  border-left-color: var(--danger);
}

.mock-runner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

.mock-runner-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mock-report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 20px;
  align-items: center;
}

.mock-score-ring {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin-left: auto;
  text-align: center;
  background: conic-gradient(var(--green) var(--score-angle, 0deg), #e6edf0 0);
  border-radius: 50%;
}

.mock-score-ring::before {
  grid-area: 1 / 1;
  width: 112px;
  height: 112px;
  content: "";
  background: #fff;
  border-radius: 50%;
}

.mock-score-ring strong,
.mock-score-ring span {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
}

.mock-score-ring strong {
  align-self: center;
  margin-top: -16px;
  font-size: 1.45rem;
}

.mock-score-ring span {
  align-self: center;
  margin-top: 30px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.mock-report-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.mock-report-stat {
  padding: 13px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-report-stat span,
.mock-report-stat strong {
  display: block;
}

.mock-report-stat span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mock-report-stat strong {
  margin-top: 3px;
  font-size: 1.25rem;
}

.mock-topic-table {
  width: 100%;
  min-width: 620px;
  margin-top: 12px;
  border-collapse: collapse;
}

.mock-topic-table th,
.mock-topic-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.mock-topic-table th {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.mock-answer-review {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.mock-review-item {
  padding: 14px;
  background: #f8fbfc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-review-item strong {
  display: block;
  color: var(--ink);
}

.mock-review-item p {
  margin-top: 6px;
  font-size: 0.88rem;
}

.mock-source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mock-source-link {
  display: grid;
  gap: 4px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-source-link strong {
  color: var(--green-dark);
}

.mock-source-link span {
  color: var(--muted);
  font-size: 0.8rem;
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .mock-app {
    grid-template-columns: 1fr;
  }

  .mock-sidebar {
    position: static;
  }

  .mock-set-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }
}

@media (max-width: 640px) {
  .mock-summary-grid,
  .mock-welcome-grid,
  .mock-mode-row,
  .mock-source-list {
    grid-template-columns: 1fr;
  }

  .mock-set-list {
    grid-template-columns: 1fr;
  }

  .mock-welcome,
  .mock-runner,
  .mock-report {
    padding: 16px;
  }

  .mock-runner-head {
    margin: -16px -16px 16px;
    padding: 13px 16px;
  }

  .mock-question-nav {
    grid-template-columns: repeat(5, minmax(32px, 1fr));
  }

  .mock-question-card {
    padding: 15px;
  }

  .mock-report-hero {
    grid-template-columns: 1fr;
  }

  .mock-score-ring {
    margin: 0;
  }

  .mock-report-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mock-runner-actions,
  .mock-runner-actions > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .mock-runner-actions .button,
  .mock-runner-actions .ghost-button {
    width: 100%;
  }
}

@media print {
  body.mock-report-printing .topbar,
  body.mock-report-printing .footer,
  body.mock-report-printing main > *:not(#practiceSection),
  body.mock-report-printing #practiceSection .mock-sidebar,
  body.mock-report-printing #mockWelcome,
  body.mock-report-printing #mockRunner,
  body.mock-report-printing .mock-report-actions {
    display: none !important;
  }

  body.mock-report-printing #practiceSection,
  body.mock-report-printing .mock-app,
  body.mock-report-printing .mock-stage,
  body.mock-report-printing #mockReport {
    display: block !important;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
  }
}