body {
  background:
    radial-gradient(circle at top left, rgba(145, 210, 236, 0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(248, 214, 146, 0.24), transparent 24%),
    linear-gradient(180deg, #fbfaf7 0%, #f6efe4 100%) !important;
}

.page {
  width: min(1180px, calc(100vw - 32px)) !important;
  margin: 24px auto 40px !important;
  padding: 0 !important;
}

.top-nav {
  margin-bottom: 12px !important;
}

.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #2b2723 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  box-shadow: 0 18px 36px rgba(53, 57, 62, 0.12) !important;
}

.hero,
.panel {
  border-radius: 24px !important;
  background: #fffdf8 !important;
  box-shadow: 0 18px 36px rgba(53, 57, 62, 0.12) !important;
}

.hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 98px 1fr !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 22px !important;
  background: linear-gradient(120deg, #d8effb 0%, #98d5ef 54%, #537fa5 100%) !important;
}

.hero-icon {
  width: 98px !important;
  height: 98px !important;
  border-radius: 28px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 46px !important;
  background: rgba(255, 248, 221, 0.92) !important;
  border: 4px solid rgba(255, 255, 255, 0.55) !important;
}

.brand-ribbon {
  display: none !important;
}

.panel {
  margin-top: 18px !important;
  padding: 20px !important;
}

.controls {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}

.control-card,
.teacher-card,
.summary-strip,
.feedback-box,
.target-card,
.target-box,
.grid-shell,
.reference-card,
.choice-card,
.play-card,
.scene-board,
.compare-card {
  border-radius: 18px !important;
  background: #fff !important;
  border: 2px solid rgba(26, 121, 165, 0.12) !important;
}

select,
button {
  border-radius: 14px !important;
  border: 2px solid rgba(26, 121, 165, 0.16) !important;
}

button.primary {
  background: #1a79a5 !important;
  border-color: transparent !important;
}

button.primary:hover {
  background: #155f82 !important;
}

.actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 16px !important;
}

.status {
  margin-top: 16px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: #f7fbfd !important;
  line-height: 1.7 !important;
  color: #59524b !important;
}

.workspace {
  display: grid !important;
  grid-template-columns: 1.24fr 0.92fr !important;
  gap: 18px !important;
  margin-top: 18px !important;
  align-items: start !important;
}

.board {
  border: 2px solid rgba(117, 107, 97, 0.14) !important;
  border-radius: 22px !important;
  background: #fffefb !important;
  padding: 18px !important;
}

.instruction {
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f4fbff 0%, #fffdfa 100%) !important;
  border: 2px solid rgba(26, 121, 165, 0.12) !important;
  line-height: 1.85 !important;
  margin-bottom: 14px !important;
}

.guide-card {
  border-radius: 20px !important;
  border: 2px solid rgba(26, 121, 165, 0.14) !important;
  background: linear-gradient(135deg, #f1f9fe 0%, #fffdf8 100%) !important;
}

.guide-link {
  border-radius: 999px !important;
  border: 2px solid rgba(26, 121, 165, 0.18) !important;
  color: #155f82 !important;
}

.teacher-panel {
  display: grid !important;
  gap: 12px !important;
}

@media (max-width: 940px) {
  .workspace {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .page {
    width: min(100%, calc(100vw - 24px)) !important;
    margin: 12px auto 28px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
  }

  .hero-icon {
    width: 84px !important;
    height: 84px !important;
    font-size: 40px !important;
  }

  .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .actions button {
    width: 100% !important;
  }
}