/* ================================================
   人生重启课程 — 主题样式（琥珀暖色系）
   传达能量、转化与重启感
   设计理由：
   - 琥珀/深橙色系传达紧迫感和行动力，同时保持温暖而非攻击性
   - 深色文字搭配温暖背景，既有力量感又不冷酷
   ================================================ */

/* === Theme Variables === */
:root {
  --color-bg: #faf8f5;
  --color-bg-alt: #f3efe8;
  --color-bg-rgb: 250, 248, 245;
  --color-surface-hover: #f5f0e8;
  --color-border: #e0d5c5;
  --color-text: #2a2118;
  --color-text-secondary: #5c4d3c;
  --color-text-muted: #9a8b78;
  --color-primary: #c47a2a;
  --color-primary-light: #d48f3f;
  --color-primary-dark: #a86420;
  --color-primary-glow: rgba(196, 122, 42, 0.10);
  --color-primary-rgb: 196, 122, 42;
  --color-accent: #8b5e3c;
  --color-accent-rgb: 139, 94, 60;
  --color-switcher-from: #2a2118;
  --color-switcher-to: #3a3028;
}

/* === Extra hero padding === */
.hero {
  padding-top: 140px;
}

.page-header {
  padding-top: 140px;
}

/* === Teaching quote style === */
.teaching-quote {
  background: rgba(var(--color-primary-rgb), 0.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px;
  margin: 20px 0;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.8;
}

/* === Stage list for session 4 === */
.stage-list p {
  margin-bottom: 12px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* === Session 6: 协议回答框 === */
.protocol-answer-wrap {
  margin-top: var(--space-3);
}

.protocol-answer {
  width: 100%;
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-primary-rgb), 0.03);
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.7;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
  box-sizing: border-box;
}

.protocol-answer:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.protocol-answer::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

/* === Responsive === */
@media (max-width: 768px) {
  .hero { padding-top: 120px; }
  .page-header { padding-top: 120px; }
  .protocol-answer { font-size: max(1rem, 16px); }
}