/* ===== 力交互实验室 ===== */
:root {
  --primary: #4CAF50;
  --primary-light: #81C784;
  --primary-dark: #388E3C;
  --bg: #F5F9F5;
  --card-bg: #FFFFFF;
  --bg-card: #FFFFFF;
  --text: #2D2A26;
  --text-primary: #2D2A26;
  --text-secondary: #6B6B6B;
  --muted: #6B6B6B;
  --accent: #4CAF50;
  --accent2: #2196F3;
}

/* 继承共享样式 */
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }

.lab-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 16px; margin-bottom: 1rem;
  color: #fff;
}
.lab-title { font-size: 1.5rem; font-weight: 700; }
.back-btn {
  background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer;
  transition: all 0.2s;
}
.back-btn:hover { background: rgba(255,255,255,0.3); }
.mastery-badge {
  background: rgba(255,255,255,0.2); padding: 0.4rem 1rem;
  border-radius: 20px; font-weight: 600;
}

/* 进度条 */
.progress-track {
  display: flex; gap: 0.3rem; margin-bottom: 1rem; overflow-x: auto; padding: 0.5rem;
}
.progress-step {
  flex: 1; min-width: 80px; text-align: center; padding: 0.5rem;
  border-radius: 8px; background: #E8F5E9; cursor: pointer;
  transition: all 0.2s;
}
.progress-step.active { background: var(--primary); color: #fff; }
.progress-step-label { font-size: 0.75rem; font-weight: 600; }

/* 模块标签 */
.module-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;
}
.module-tab {
  flex: 1; min-width: 100px; padding: 0.6rem 1rem;
  border: 2px solid #E0E0E0; border-radius: 10px;
  background: #fff; cursor: pointer; transition: all 0.2s;
  font-weight: 600; font-size: 0.9rem;
}
.module-tab.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.module-tab:hover:not(.active) { border-color: var(--primary-light); }

/* 模块内容 */
.module-content { display: none; }
.module-content.active { display: block; }

.module-card {
  background: var(--card-bg); border-radius: 16px;
  padding: 1.5rem; border: 2px solid #E8F5E9;
}
.module-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.module-num {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
}
.module-title { font-size: 1.2rem; font-weight: 700; }
.module-desc { color: var(--muted); margin-bottom: 1rem; }

/* 动画容器 */
.anim-container { text-align: center; }
.svg-anim-container {
  min-height: 300px; border-radius: 12px;
  background: #f8f9fa; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.step-subtitle-bar {
  background: #E8F5E9; border-radius: 10px; padding: 0.8rem 1rem;
  margin: 0.5rem 0; font-size: 0.95rem; line-height: 1.5;
}
.anim-controls { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.anim-btn {
  padding: 0.5rem 1rem; border-radius: 8px; border: none;
  background: var(--primary); color: #fff; cursor: pointer; font-weight: 600;
  transition: all 0.2s;
}
.anim-btn:hover { background: var(--primary-dark); }

/* 画布控制 */
.canvas-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.canvas-btn {
  padding: 0.5rem 1rem; border-radius: 8px; border: none;
  background: var(--primary); color: #fff; cursor: pointer; font-weight: 600;
}
.canvas-btn:hover { background: var(--primary-dark); }

/* 问答卡片 */
.q-card {
  background: var(--bg); border: 2px solid #E0E0E0; border-radius: 12px;
  padding: 1.5rem; margin-bottom: 1rem;
}
.q-card.correct { border-color: #4CAF50; background: #E8F5E9; }
.q-card.wrong { border-color: #f44336; background: #FFEBEE; }

.q-stem { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.q-options { display: flex; flex-direction: column; gap: 0.5rem; }
.q-option {
  padding: 0.75rem 1rem; border: 2px solid #E0E0E0; border-radius: 8px;
  background: #fff; cursor: pointer; transition: all 0.2s;
}
.q-option:hover { border-color: var(--primary); background: #F1F8E9; }
.q-option.correct { border-color: #4CAF50; background: #E8F5E9; }
.q-option.wrong { border-color: #f44336; background: #FFEBEE; }
.q-option.disabled { pointer-events: none; opacity: 0.7; }

/* 解释面板 */
.explain-box {
  background: #E3F2FD; border-left: 4px solid #2196F3;
  padding: 1rem; border-radius: 0 8px 8px 0; margin-top: 1rem;
}

/* 知识卡片 */
.knowledge-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.knowledge-card {
  background: var(--bg); border: 2px solid #E0E0E0; border-radius: 12px;
  padding: 1.25rem;
}
.knowledge-card h4 { margin: 0 0 0.5rem 0; color: var(--primary); }
.knowledge-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* 掌握度 */
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.mastery-card {
  background: var(--bg); border: 2px solid #E0E0E0; border-radius: 12px;
  padding: 1.25rem; text-align: center;
}
.mastery-card .label { font-weight: 600; margin-bottom: 0.5rem; }
.mastery-card .bar-bg {
  height: 8px; background: #E0E0E0; border-radius: 4px; overflow: hidden;
}
.mastery-card .bar-fg {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transition: width 0.5s ease;
}

/* 练习统计 */
.practice-stats {
  display: flex; gap: 2rem; margin-bottom: 1.5rem;
  padding: 1rem; background: var(--bg); border-radius: 12px;
}
.stat-item { text-align: center; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 0.875rem; color: var(--muted); }

/* 拓展卡片 */
.extension-card {
  background: var(--bg); border: 2px solid #E0E0E0; border-radius: 12px;
  padding: 1.5rem; margin-bottom: 1rem;
}
.extension-card h3 { margin: 0 0 0.75rem 0; color: var(--primary); }
.extension-card p { margin: 0; color: var(--muted); line-height: 1.6; }

/* 公式 */
.formula-box {
  background: var(--bg); border: 2px solid #E0E0E0; border-radius: 12px;
  padding: 1rem; margin: 1rem 0; text-align: center;
  font-family: 'Times New Roman', serif; font-size: 1.25rem;
}

/* 提示 */
.hint-box {
  background: #FFF8E1; border: 2px solid #FFC107; border-radius: 12px;
  padding: 1rem; margin-top: 1rem;
}
.hint-box::before { content: '💡 '; }

/* 苏格拉底对话 */
.socrates-chat {
  min-height: 300px; background: var(--bg); border-radius: 12px;
  padding: 1.5rem; margin-bottom: 1rem; overflow-y: auto; max-height: 500px;
}
.socrates-msg {
  margin-bottom: 1rem; padding: 1rem; border-radius: 12px;
  background: #fff; border: 2px solid #E0E0E0; max-width: 85%;
}
.socrates-msg.teacher {
  margin-right: auto; border-color: var(--primary); background: #E8F5E9;
}
.socrates-msg.student {
  margin-left: auto; background: #E3F2FD; border-color: #2196F3;
}
.socrates-input-area {
  display: flex; gap: 0.5rem;
}
.socrates-input {
  flex: 1; padding: 0.75rem 1rem; border: 2px solid #E0E0E0;
  border-radius: 8px; font-size: 1rem; outline: none;
}
.socrates-input:focus { border-color: var(--primary); }
.socrates-send {
  padding: 0.75rem 1.5rem; background: var(--primary); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-weight: 600;
}

/* 适配深色 supplementary */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --card-bg: #16213e;
    --bg-card: #16213e;
    --text: #eaeaea;
    --text-primary: #eaeaea;
    --text-secondary: #a0a0a0;
    --muted: #a0a0a0;
  }
}

/* 响应式 */
@media (max-width: 768px) {
  .lab-header { flex-direction: column; gap: 0.75rem; text-align: center; }
  .progress-step { min-width: 60px; font-size: 0.65rem; }
  .module-tab { min-width: 80px; font-size: 0.8rem; padding: 0.5rem 0.75rem; }
  .knowledge-cards { grid-template-columns: 1fr; }
  .mastery-grid { grid-template-columns: 1fr 1fr; }
  .practice-stats { flex-direction: column; gap: 1rem; }
}