/* AMC10 自适应辅导 · 学生端样式（现代化重写版） */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f0f4fa;
  color: #1f2937;
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- 顶栏 ---------- */
.topbar {
  background: linear-gradient(135deg, #1e3a6e 0%, #2c5282 100%);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(30, 58, 110, 0.25);
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  background: #fff; color: #1e3a6e; font-weight: 800;
  padding: 6px 12px; border-radius: 8px; font-size: 18px; letter-spacing: 0.5px;
}
.brand-sub { font-size: 14px; opacity: 0.9; }
.topbar-right { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.topbar-right select {
  padding: 6px 10px; border-radius: 6px; border: none;
  font-size: 14px; background: #fff; color: #1f2937;
}
.badge {
  padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600;
}
.badge-idle { background: rgba(255,255,255,0.2); }
.badge-live { background: #16a34a; color: #fff; }
.badge-basic { background: #dbeafe; color: #1e40af; }
.badge-mid { background: #fef3c7; color: #92400e; }
.diff-badge { background: #f1f5f9; color: #475569; }

/* ---------- 闯关地图 ---------- */
.map-section { padding: 18px 24px 8px; }
.section-title { font-size: 17px; color: #1e3a6e; margin-bottom: 12px; font-weight: 700; }
.section-title small { font-weight: 400; color: #64748b; font-size: 13px; margin-left: 8px; }
.topic-map {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px;
}
.topic-cell {
  flex: 0 0 110px; padding: 10px 10px; border-radius: 10px;
  background: #fff; border: 1.5px solid #e2e8f0;
  transition: all 0.2s;
}
.topic-cell.arrow {
  flex: 0 0 auto; display: flex; align-items: center;
  color: #94a3b8; background: transparent; border: none; font-size: 18px;
}
.topic-cell.completed { border-color: #16a34a; background: #f0fdf4; }
.topic-cell.active {
  border-color: #2563eb; background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.topic-cell.locked { opacity: 0.55; }
.tc-no { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.tc-name { font-size: 13px; font-weight: 600; color: #1f2937; }
.tc-state { font-size: 11px; margin-top: 4px; color: #475569; }
.tc-learn-btn {
  margin-top: 6px; width: 100%; padding: 4px 6px; font-size: 11px;
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
  border-radius: 6px; cursor: pointer; font-weight: 500;
}
.tc-learn-btn:hover { background: #dbeafe; }

/* ---------- 主布局（桌面） ---------- */
.main-layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
  gap: 18px; padding: 12px 24px 30px; align-items: start;
}
.question-panel {
  background: #fff; border-radius: 14px; padding: 22px 26px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  min-width: 0;
}
.q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.topic-name { font-size: 18px; font-weight: 700; color: #1e3a6e; }
.timer-row {
  display: flex; justify-content: space-between; color: #64748b;
  font-size: 13px; margin-bottom: 16px;
}
.idle-notice { color: #d97706; font-weight: 600; }
.question-text {
  font-size: 18px; line-height: 1.7; color: #111827;
  padding: 16px 18px; background: #f8fafc; border-radius: 10px;
  border-left: 4px solid #2563eb; margin-bottom: 18px;
}

/* ---------- 选项 ---------- */
.choice-area { display: grid; gap: 10px; margin-bottom: 18px; }
.choice-btn {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 16px; background: #fff;
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-size: 15px; cursor: pointer; transition: all 0.15s;
}
.choice-btn:hover { border-color: #2563eb; background: #eff6ff; }
.choice-btn.selected {
  border-color: #2563eb; background: #dbeafe;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.opt-key {
  flex: 0 0 28px; height: 28px; line-height: 28px; text-align: center;
  background: #e2e8f0; border-radius: 50%; font-weight: 700; font-size: 13px;
}
.choice-btn.selected .opt-key { background: #2563eb; color: #fff; }

/* ---------- 语音 / 图片 ---------- */
.voice-area, .image-area { margin-bottom: 18px; }
.btn {
  padding: 10px 18px; border-radius: 8px; border: none;
  font-size: 14px; cursor: pointer; font-weight: 600;
}
.btn-voice {
  background: #fef3c7; color: #92400e; width: 100%; padding: 14px;
  font-size: 15px; margin-bottom: 10px;
}
.btn-voice.recording { background: #fde68a; color: #78350f; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.7; } }
.voice-tip { font-size: 13px; color: #64748b; margin: 6px 0; }
.voice-result {
  width: 100%; min-height: 70px; padding: 10px 12px;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 14px; font-family: inherit; resize: vertical;
}
.voice-result:focus { outline: none; border-color: #2563eb; }
.image-preview { margin-top: 10px; }
.image-preview img { max-width: 280px; border-radius: 8px; border: 1px solid #e2e8f0; }
.image-note {
  width: 100%; padding: 8px 10px; margin-top: 8px;
  border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 13px;
}

/* ---------- 操作按钮 ---------- */
.action-row { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }
.btn-next { background: #16a34a; color: #fff; }
.btn-ghost { background: #f1f5f9; color: #475569; }
.btn-cta { background: #d97706; color: #fff; width: 100%; padding: 12px; }

/* ---------- 反馈 ---------- */
.feedback {
  padding: 12px 14px; border-radius: 8px; font-size: 14px; margin-top: 8px;
}
.feedback.ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.feedback.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ---------- 讲题面板 ---------- */
.lecture-panel {
  background: #fffbeb; border: 1.5px solid #fde68a;
  border-radius: 14px; padding: 20px 22px;
}
.lecture-title { color: #92400e; margin-bottom: 12px; font-size: 16px; }
.lecture-audio-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.lecture-steps { display: flex; flex-direction: column; gap: 10px; }
.lstep {
  background: #fff; padding: 10px 14px; border-radius: 8px;
  font-size: 14px; line-height: 1.6; border-left: 3px solid #d97706;
  transition: all 0.4s ease;
}
.lstep.pending { opacity: 0.25; transform: translateX(-8px); }
.lstep.current {
  border-left-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  opacity: 1; transform: translateX(0);
}
.trap-step { border-left-color: #dc2626; background: #fef2f2; }
.summary-step { border-left-color: #16a34a; background: #f0fdf4; }
.lecture-actions { margin-top: 14px; }

.hidden { display: none !important; }

/* ---------- 响应式 ---------- */
/* 中屏（Pad，768-1200px）：两栏但讲解面板变窄 */
@media (max-width: 1200px) {
  .main-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
  .question-panel { padding: 18px 20px; }
  .lecture-panel { padding: 16px 18px; }
}
/* 手机（<768px）：单列堆叠 */
@media (max-width: 768px) {
  .main-layout { grid-template-columns: 1fr; padding: 10px 12px 20px; }
  .topbar { padding: 10px 14px; flex-wrap: wrap; }
  .brand-sub { display: none; }
  .map-section { padding: 12px 12px 4px; }
  .topic-cell { flex: 0 0 92px; padding: 8px; }
  .tc-name { font-size: 12px; }
  .question-text { font-size: 16px; padding: 12px 14px; }
  .choice-btn { padding: 11px 12px; font-size: 14px; }
  .question-panel, .lecture-panel { padding: 16px 14px; }
  .lstep { font-size: 13px; padding: 8px 10px; }
  .lecture-audio-row { flex-wrap: wrap; }
  .btn { padding: 9px 14px; font-size: 13px; }
}
/* 小屏手机（<480px）：进一步紧凑 */
@media (max-width: 480px) {
  .topic-cell { flex: 0 0 80px; }
  .tc-no { font-size: 10px; }
  .tc-state { font-size: 10px; }
  .q-head { font-size: 14px; }
  .topic-name { font-size: 16px; }
}