:root {
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: #0d0f14;
  color: #e6e9f2;
}

.visionforge-page {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--uni-top-offset, 60px) + 24px) 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(140deg, #111827 0%, #0b0e13 100%);
  border: 1px solid #1e2430;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

.lede {
  margin: 0;
  color: #cbd5f5;
  font-size: 16px;
  line-height: 1.5;
}

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.summary-card {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0f1724;
  border: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-label {
  font-size: 12px;
  color: #93a4bf;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.summary-value {
  font-size: 20px;
  font-weight: 600;
}

.mode-switch {
  display: flex;
  gap: 8px;
  background: #0f1724;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid #1f2937;
}

.mode-btn {
  flex: 1;
  min-height: 44px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #cbd5f5;
  font-size: 14px;
  cursor: pointer;
}

.mode-btn.active {
  background: #1f2937;
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px #2f3b4f;
}

.mode-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.mode-panel.active {
  display: flex;
}

.section-card {
  padding: 18px 20px;
  border-radius: 16px;
  background: #0f1724;
  border: 1px solid #1e293b;
}

.exercise-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exercise-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid #1f2a3b;
  background: #0f1724;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exercise-card__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.exercise-card h3 {
  margin: 0 0 6px;
}

.exercise-card p {
  margin: 0;
  color: #9aa7c2;
}

.exercise-level {
  padding: 6px 10px;
  border-radius: 999px;
  background: #1f2937;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.exercise-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #8fa1bb;
}

button.primary,
button.ghost {
  min-height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

button.primary {
  background: #58a6ff;
  color: #08121f;
}

button.primary:disabled {
  background: #2b3545;
  color: #6c7c96;
  cursor: not-allowed;
}

button.ghost {
  background: transparent;
  color: #cbd5f5;
  border: 1px solid #2a3649;
}

.runner {
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid #263042;
  background: #0b1019;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.runner.hidden {
  display: none;
}

.runner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.runner-step {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #93a4bf;
}

.runner-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.runner-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #0f1724;
  border: 1px solid #1f2a3b;
}

.runner-panel.active {
  display: flex;
}

.timer {
  font-size: 18px;
  font-weight: 600;
}

.stimulus-container {
  display: flex;
  justify-content: center;
}

.stimulus-image {
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid #2a3649;
  background: #0b111a;
}

.text-prompt {
  padding: 16px;
  border-radius: 12px;
  background: #111827;
  border: 1px solid #1f2a3b;
  font-size: 16px;
  line-height: 1.5;
}

.response-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.response-prompt {
  margin: 0;
  color: #cbd5f5;
}

.mcq-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #1f2a3b;
  background: #0b111a;
}

.mcq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mcq-option {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #2a3649;
  background: #0b111a;
  color: #e6e9f2;
  font-size: 14px;
  cursor: pointer;
}

.mcq-option.selected {
  border-color: #58a6ff;
  box-shadow: 0 0 0 1px #58a6ff;
}

.sequence-display {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed #2a3649;
  background: #0b111a;
  color: #e6e9f2;
  font-size: 18px;
  letter-spacing: 0.1em;
}

.sequence-options,
.sequence-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sequence-option {
  min-height: 44px;
  min-width: 54px;
  border-radius: 10px;
  border: 1px solid #2a3649;
  background: #101827;
  color: #e6e9f2;
  font-size: 18px;
  cursor: pointer;
}

.scene-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.scene-grid__cell {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid #2a3649;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b111a;
  font-size: 22px;
}

.scene-grid--interactive .scene-grid__cell {
  min-height: 64px;
}

.drag-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.drag-item {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #2a3649;
  background: #101827;
  color: #e6e9f2;
  cursor: pointer;
}

.drag-item.selected {
  border-color: #58a6ff;
  box-shadow: 0 0 0 1px #58a6ff;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #2a3649;
  background: #0b111a;
}

.checklist-item input {
  transform: scale(1.2);
}

.sketch-canvas {
  border-radius: 12px;
  border: 1px solid #2a3649;
  background: #0b111a;
  width: 100%;
  max-width: 360px;
}

.ratings-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-wrap input[type="range"] {
  width: 100%;
}

.review-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-reference {
  display: flex;
  justify-content: center;
}

.review-score {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-value {
  font-size: 32px;
  font-weight: 700;
}

.score-grade {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.score-grade.grade-gold {
  color: #f9d36b;
}

.score-grade.grade-silver {
  color: #c7d0da;
}

.stimulus-blank {
  width: 100%;
  max-width: 360px;
  min-height: 180px;
  border-radius: 14px;
  border: 1px dashed #2a3649;
  background: #0b111a;
}

.score-grade.grade-bronze {
  color: #d6a072;
}

.score-grade.grade-pass {
  color: #7ed6a5;
}

.score-grade.grade-fail {
  color: #f87171;
}

.review-tip {
  padding: 12px 14px;
  border-radius: 12px;
  background: #111827;
  border: 1px solid #1f2a3b;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: #0f1724;
  border: 1px solid #1f2a3b;
  gap: 16px;
}

.history-card h4 {
  margin: 0 0 4px;
}

.history-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.progress-block {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #1f2a3b;
  background: #0f1724;
}

.progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #1e293b;
}

.progress-row:last-child {
  border-bottom: none;
}

.museum-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.museum-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.museum-section__header h3 {
  margin: 0 0 4px;
}

.museum-grid {
  display: grid;
  gap: 16px;
}

.museum-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid #1f2a3b;
  background: #0f1724;
}

.museum-card__meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #1f2a3b;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.museum-card__meta ul {
  margin: 0;
  padding-left: 18px;
  color: #9aa7c2;
}

.muted {
  color: #93a4bf;
}

@media (min-width: 720px) {
  .review-grid {
    flex-direction: row;
    align-items: center;
  }

  .review-reference,
  .review-score {
    flex: 1;
  }

  .museum-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}