/* ============================================
   explore.css — 测试 / 知识图谱 / 图表解读 栏目样式
   依赖 theme-classical.css 的雅致变量，此处仅布局与组件。
   ============================================ */

/* ========== 通用面板 ========== */
.panel {
  background: linear-gradient(180deg, #F7F0DF 0%, var(--color-parchment) 100%);
  border: 1px solid var(--color-gold-light);
  box-shadow: inset 0 0 0 3px rgba(247,240,223,0.9), inset 0 0 0 4px rgba(176,141,79,0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.panel h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink-deep);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gold-light);
}

/* ========== 测试栏目 ========== */
.quiz-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-xl);
}
.quiz-toolbar .field { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-stone); }
.quiz-toolbar select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-md);
  background: var(--color-parchment);
  color: var(--color-ink-black);
}
.quiz-progress { max-width: 720px; margin: 0 auto var(--space-lg); }
.quiz-progress .bar { height: 10px; border-radius: 999px; background: var(--color-parchment-dark); overflow: hidden; border: 1px solid var(--color-gold-light); }
.quiz-progress .bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-vermillion), var(--color-gold)); transition: width 0.3s ease; }
.quiz-progress .meta { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-stone); margin-top: var(--space-xs); }

.quiz-question { max-width: 760px; margin: 0 auto var(--space-xl); }
.quiz-qtype {
  display: inline-block; font-family: var(--font-display); font-size: var(--text-xs);
  color: #F7F0DF; background: var(--color-vermillion); padding: 2px 10px; border-radius: 4px; margin-bottom: var(--space-md);
}
.quiz-qtext { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.8; color: var(--color-ink-deep); margin-bottom: var(--space-lg); }

.quiz-options { display: flex; flex-direction: column; gap: var(--space-sm); }
.quiz-option {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-md);
  background: var(--color-parchment);
  cursor: pointer; transition: all var(--transition-fast);
  font-size: var(--text-base); color: var(--color-ink-black);
}
.quiz-option:hover { border-color: var(--color-gold); background: var(--color-parchment-dark); }
.quiz-option .opt-key {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  background: var(--color-gold-light); color: var(--color-gold-dark);
}
.quiz-option.selected { border-color: var(--color-vermillion); background: rgba(155,45,32,0.06); }
.quiz-option.correct { border-color: var(--color-jade); background: rgba(78,107,87,0.12); }
.quiz-option.correct .opt-key { background: var(--color-jade); color: #F7F0DF; }
.quiz-option.wrong { border-color: var(--color-vermillion); background: rgba(155,45,32,0.10); }
.quiz-option.wrong .opt-key { background: var(--color-vermillion); color: #F7F0DF; }
.quiz-option.disabled { cursor: default; }

.quiz-explain {
  max-width: 760px; margin: var(--space-md) auto 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-gold);
  background: rgba(176,141,79,0.10);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm); color: var(--color-ink-black); line-height: 1.7;
  display: none;
}
.quiz-explain.show { display: block; }
.quiz-explain b { color: var(--color-vermillion); }

.quiz-actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); }

.quiz-result { max-width: 620px; margin: var(--space-2xl) auto; text-align: center; padding: var(--space-2xl); }
.quiz-result .score-num { font-family: var(--font-display); font-size: 4rem; color: var(--color-vermillion); line-height: 1; }
.quiz-result .score-sub { color: var(--color-stone); margin: var(--space-md) 0 var(--space-lg); }
.quiz-result .score-grade { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-gold-dark); margin-bottom: var(--space-lg); }

.quiz-review { max-width: 760px; margin: var(--space-xl) auto 0; }
.quiz-review .rv-item { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-mist); font-size: var(--text-sm); line-height: 1.7; }
.quiz-review .rv-item .rv-q { color: var(--color-ink-deep); font-weight: 600; }
.quiz-review .rv-item .rv-ok { color: var(--color-jade); }
.quiz-review .rv-item .rv-no { color: var(--color-vermillion); }

/* ========== 知识图谱 ========== */
.kg-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-xl); align-items: start; }
.kg-canvas-wrap {
  position: relative;
  background:
    radial-gradient(circle at 50% 40%, rgba(176,141,79,0.06), transparent 70%),
    var(--color-parchment);
  border: 1px solid var(--color-gold-light);
  box-shadow: inset 0 0 0 3px rgba(247,240,223,0.9), inset 0 0 0 4px rgba(176,141,79,0.28);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#kgCanvas { display: block; width: 100%; height: 620px; cursor: grab; }
#kgCanvas:active { cursor: grabbing; }
.kg-side {
  background: linear-gradient(180deg, #F7F0DF 0%, var(--color-parchment) 100%);
  border: 1px solid var(--color-gold-light);
  box-shadow: inset 0 0 0 3px rgba(247,240,223,0.9), inset 0 0 0 4px rgba(176,141,79,0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: sticky; top: calc(var(--header-height) + var(--space-lg));
}
.kg-side h3 { font-family: var(--font-display); color: var(--color-ink-deep); font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.kg-side .kg-node-name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-vermillion); margin-bottom: var(--space-xs); }
.kg-side .kg-node-cat { display: inline-block; font-size: var(--text-xs); padding: 2px 10px; border-radius: 4px; background: rgba(176,141,79,0.18); color: var(--color-gold-dark); margin-bottom: var(--space-md); }
.kg-side .kg-node-desc { font-size: var(--text-sm); color: var(--color-ink-black); line-height: 1.7; }
.kg-side .kg-rel-list { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.kg-side .kg-rel { font-size: var(--text-sm); padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-gold-light); border-radius: var(--radius-sm); background: var(--color-parchment); }
.kg-hint { font-size: var(--text-xs); color: var(--color-stone); text-align: center; margin-top: var(--space-sm); }
.kg-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.kg-filter .fbtn { font-size: var(--text-xs); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--color-gold-light); background: var(--color-parchment); cursor: pointer; transition: all var(--transition-fast); }
.kg-filter .fbtn.active { background: var(--color-vermillion); color: #F7F0DF; border-color: var(--color-vermillion-dark); }

/* 思维导图 */
.mindmap-wrap { background: var(--color-parchment); border: 1px solid var(--color-gold-light); box-shadow: inset 0 0 0 3px rgba(247,240,223,0.9), inset 0 0 0 4px rgba(176,141,79,0.28); border-radius: var(--radius-lg); padding: var(--space-lg); overflow-x: auto; }
#mindmapSvg { width: 100%; height: 640px; display: block; }

/* ========== 图表解读 ========== */
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.chart-card {
  background: linear-gradient(180deg, #F7F0DF 0%, var(--color-parchment) 100%);
  border: 1px solid var(--color-gold-light);
  box-shadow: inset 0 0 0 3px rgba(247,240,223,0.9), inset 0 0 0 4px rgba(176,141,79,0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.chart-card .cc-head { margin-bottom: var(--space-md); }
.chart-card .cc-head h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink-deep); }
.chart-card .cc-head p { font-size: var(--text-xs); color: var(--color-stone); margin-top: 4px; line-height: 1.6; }
.chart-card canvas { width: 100% !important; height: 320px !important; }
.chart-insight {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-gold); background: rgba(176,141,79,0.08);
  font-size: var(--text-xs); color: var(--color-ink-black); line-height: 1.7; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

@media (max-width: 900px) {
  .kg-layout { grid-template-columns: 1fr; }
  .kg-side { position: static; }
  .chart-grid { grid-template-columns: 1fr; }
}