.question-page-body {
  --bg: #faf6ee;
  --bg-soft: #f3ecdf;
  --surface: rgba(255, 251, 243, 0.76);
  --surface-strong: rgba(255, 251, 243, 0.92);
  --paper: #fffbf3;
  --paper-soft: #fff1de;
  --line: rgba(36, 31, 26, 0.1);
  --line-strong: rgba(36, 31, 26, 0.16);
  --text: #241f1a;
  --text-muted: #6a5c4f;
  --paper-text: #241f1a;
  --accent: #c77d5a;
  --accent-strong: #9b5837;
  --shadow: 0 2px 6px rgba(36, 31, 26, 0.05), 0 32px 64px rgba(36, 31, 26, 0.1);
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(199, 125, 90, 0.1), transparent 20%),
    radial-gradient(circle at 84% 16%, rgba(201, 166, 107, 0.08), transparent 18%),
    linear-gradient(180deg, #faf6ee 0%, #f3ecdf 100%);
}

.question-page-body [hidden] {
  display: none !important;
}

.question-shell {
  margin-top: 18px;
}

.question-intro-card,
.question-locked,
.question-resume,
.question-flow-panel {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: rgba(255, 251, 243, 0.76);
  box-shadow: var(--shadow-soft);
}

.question-flow-panel {
  margin-top: 18px;
}

.question-lead {
  margin: 14px 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 18px;
}

.question-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.question-status-card {
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
}

.question-status-label,
.resume-label {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--terra-deep);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.question-status-card strong {
  display: block;
  font-size: 24px;
  font-weight: 500;
}

.question-status-card p,
.question-locked p,
.question-resume p,
.selected-material-note {
  margin: 10px 0 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.question-locked,
.question-resume {
  margin-top: 18px;
}

.question-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.question-locked.featured-card,
.question-resume.featured-card {
  color: var(--paper);
}

.selected-material-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
}

.selected-material-note strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
}

.flow-progress {
  margin-bottom: 26px;
}

.progress-dot {
  background: rgba(36, 31, 26, 0.1);
}

.progress-dot.is-active {
  background: var(--terra);
}

.flow-heading p,
.question-meta,
.rune-hint,
.wait-card p {
  color: var(--ink-soft);
}

.material-card,
.question-field textarea,
.result-card,
.wait-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}

.material-card {
  border-radius: var(--radius-lg);
}

.material-card.is-selected {
  border-color: rgba(199, 125, 90, 0.38);
  background: rgba(199, 125, 90, 0.08);
}

.material-name {
  color: var(--ink);
}

.material-copy {
  color: var(--ink-soft);
}

.question-field textarea {
  color: var(--ink);
}

.question-field textarea::placeholder {
  color: var(--ink-mute);
}

.rune-toolbar,
.result-meta,
.flow-actions,
.question-locked-actions,
.question-result-actions,
.wait-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rune-grid {
  gap: 14px;
}

.rune-tile {
  background: rgba(255, 255, 255, 0.68);
  border-color: var(--line);
}

.rune-tile.is-selected {
  border-color: rgba(199, 125, 90, 0.38);
  background: rgba(199, 125, 90, 0.08);
}

.wait-card {
  border-radius: var(--radius-lg);
}

.meta-chip {
  background: rgba(199, 125, 90, 0.1);
  color: var(--ink);
  border: 1px solid rgba(199, 125, 90, 0.18);
}

.result-label {
  color: var(--ink-mute);
}

.result-text,
#resultQuestion {
  color: var(--ink);
}

.question-result-actions {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .question-status-grid,
  .material-grid {
    grid-template-columns: 1fr;
  }

  .question-resume {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 780px) {
  .question-nav,
  .question-locked-actions,
  .question-result-actions,
  .wait-actions,
  .flow-actions {
    flex-direction: column;
  }

  .question-intro-card,
  .question-locked,
  .question-resume,
  .question-flow-panel {
    padding: 22px 18px;
    border-radius: 24px;
  }

  .selected-material-note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 18px;
  }
}