/* ============================================================
   羡曦吾语AI · 功能组件样式（四）
   题库 / 词典 / 学习树 / 时间轴 / 游戏化 / 习惯养成 / 统计增强
   ============================================================ */

/* ---------- 题库 Quiz ---------- */
.qh-quiz { padding: 8px 0; }
.qh-qz-progress {
  font-size: 12px;
  color: var(--lake);
  font-weight: 600;
  margin-bottom: 10px;
}
.qh-qz-q {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
  line-height: 1.5;
}
.qh-qz-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qh-qz-opt {
  text-align: left;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-s);
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  color: #1f2937;
  transition: all .15s;
}
.qh-qz-opt:hover:not(:disabled) {
  background: #eef2ff;
  border-color: var(--lake);
}
.qh-qz-opt:disabled { cursor: default; }
.qh-qz-right {
  background: #d1fae5 !important;
  border-color: #10b981 !important;
  color: #065f46;
}
.qh-qz-wrong {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #991b1b;
}
.qh-qz-feedback {
  margin-top: 12px;
  font-size: 13px;
  min-height: 24px;
}
.qh-qz-exp {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  line-height: 1.5;
}
.qh-quiz-result {
  text-align: center;
  padding: 20px;
}
.qh-quiz-result h3 { margin: 0 0 12px; color: #1f2937; }
.qh-qz-score { font-size: 24px; font-weight: 800; color: var(--lake); margin-bottom: 6px; }
.qh-qz-stars { font-size: 14px; color: #f59e0b; margin-bottom: 14px; }
.qh-qz-btn {
  background: var(--lake);
  color: #fff;
  border: none;
  border-radius: var(--r-s);
  padding: 10px 24px;
  font-size: 14px;
  cursor: pointer;
}

/* ---------- AI 词典 ---------- */
.qh-dict h4 { margin: 0 0 10px; color: #374151; }
.qh-dict-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: var(--r-s);
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
}
.qh-dict-search:focus { border-color: var(--lake); }
.qh-dict-entries {
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qh-dict-entry {
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 3px solid var(--lake);
}
.qh-dict-term {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}
.qh-dict-en {
  font-size: 11px;
  color: #8b5cf6;
  font-weight: 400;
  margin-left: 6px;
}
.qh-dict-def {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* ---------- 学习树 ---------- */
.qh-learning-tree { padding: 8px 0; }
.qh-lt-svg { width: 100%; height: auto; }
.qh-lt-edge { stroke: #e5e7eb; stroke-width: 1; }
.qh-lt-node { fill: #f3f4f6; stroke: #9ca3af; stroke-width: 2; }
.qh-lt-node-visited { fill: var(--sky); stroke: var(--lake); stroke-width: 2; }
.qh-lt-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
}
.qh-lt-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.qh-lt-dot.qh-lt-node-visited { background: var(--sky); }
.qh-lt-dot.qh-lt-node { background: #f3f4f6; border: 1px solid #9ca3af; }

/* ---------- AI 时间轴 ---------- */
.qh-timeline { padding: 8px 0; }
.qh-tl-list {
  position: relative;
  padding-left: 20px;
}
.qh-tl-list::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--lake), #e5e7eb);
}
.qh-tl-item {
  position: relative;
  padding: 8px 0 12px 12px;
}
.qh-tl-dot {
  position: absolute;
  left: -16px;
  top: 6px;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid var(--lake);
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qh-tl-year {
  font-size: 11px;
  color: var(--lake);
  font-weight: 700;
}
.qh-tl-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin-top: 2px;
}
.qh-tl-desc {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

/* ---------- 个人卡片 ---------- */
.qh-profile h4 { margin: 0 0 12px; color: #374151; }
.qh-pf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.qh-pf-avatar {
  width: 48px;
  height: 48px;
  background: var(--grad-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.qh-pf-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}
.qh-pf-sub {
  font-size: 12px;
  color: var(--lake);
  margin-top: 2px;
}
.qh-pf-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.qh-pf-bar-fill {
  height: 100%;
  background: var(--grad-main);
  border-radius: 4px;
  transition: width .4s;
}
.qh-pf-bar-text {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  text-align: center;
}
.qh-pf-next {
  font-size: 11px;
  color: #6b7280;
  margin-top: 6px;
  padding: 6px 10px;
  background: #f3f4f6;
  border-radius: 6px;
}
.qh-pf-checkin { margin-top: 12px; }
.qh-pf-checkin-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: var(--r-s);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.qh-pf-checked {
  display: block;
  padding: 8px;
  background: #dcfce7;
  color: #166534;
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
}

/* ---------- 称号墙 ---------- */
.qh-title-wall h4 { margin: 0 0 10px; color: #374151; }
.qh-title-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.qh-title-item {
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--r-s);
  background: #f3f4f6;
}
.qh-title-got {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
}
.qh-title-emoji { font-size: 22px; }
.qh-title-name { font-size: 11px; font-weight: 600; color: #374151; margin-top: 2px; }
.qh-title-min { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* ---------- 习惯养成 ---------- */
.qh-habits h4 { margin: 0 0 10px; color: #374151; }
.qh-habit-add {
  background: var(--lake);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 10px;
}
.qh-habit-list { display: flex; flex-direction: column; gap: 8px; }
.qh-habit-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-s);
  padding: 10px 12px;
}
.qh-habit-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.qh-habit-icon { font-size: 18px; }
.qh-habit-name { flex: 1; font-size: 13px; font-weight: 600; color: #1f2937; }
.qh-habit-streak { font-size: 11px; color: #f97316; }
.qh-habit-week {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.qh-hb-cell {
  flex: 1;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #9ca3af;
}
.qh-hb-on { background: #10b981; color: #fff; }
.qh-hb-off { background: #f3f4f6; }
.qh-habit-toggle {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
}
.qh-ht-done {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
}

/* ---------- 周统计 ---------- */
.qh-weekly h4, .qh-cat-breakdown h4, .qh-time-pref h4 {
  margin: 0 0 10px;
  color: #374151;
  font-size: 13px;
}
.qh-weekly-bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 100px;
}
.qh-wb-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.qh-wb-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--lake), #a5b4fc);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}
.qh-wb-lbl { font-size: 10px; color: #9ca3af; }
.qh-wb-val { font-size: 10px; color: var(--lake); font-weight: 600; }
.qh-cat-list { display: flex; flex-direction: column; gap: 6px; }
.qh-cat-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 12px;
}
.qh-cat-name { color: #374151; }
.qh-cat-done { color: var(--lake); font-weight: 600; }
.qh-tp-bars {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.qh-tp-cell {
  width: calc((100% - 46px) / 24);
  aspect-ratio: 1;
  background: #e5e7eb;
  border-radius: 2px;
}
.qh-tp-peak { background: #f59e0b; }

/* ---------- 周学习计划 ---------- */
.qh-week-plan h4 { margin: 0 0 10px; color: #374151; }
.qh-wp-day {
  background: #f9fafb;
  border-left: 3px solid var(--lake);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.qh-wp-day-name {
  font-size: 11px;
  color: var(--lake);
  font-weight: 600;
}
.qh-wp-day-zone {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin: 2px 0 4px;
}
.qh-wp-tasks {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  color: #6b7280;
}
.qh-wp-tasks li { line-height: 1.5; }

/* ---------- 每日语录 ---------- */
.qh-daily-quote {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: var(--r-m);
  padding: 16px;
  text-align: center;
  font-style: italic;
}
.qh-dq-text {
  font-size: 14px;
  color: #92400e;
  line-height: 1.6;
}
.qh-dq-author {
  margin-top: 8px;
  font-size: 11px;
  color: #b45309;
  font-style: normal;
}

/* ---------- 深色模式 ---------- */
[data-theme="dark"] .qh-tl-title,
[data-theme="dark"] .qh-pf-title,
[data-theme="dark"] .qh-title-name { color: #f1f5f9; }
[data-theme="dark"] .qh-tl-desc,
[data-theme="dark"] .qh-dict-def,
[data-theme="dark"] .qh-qz-exp,
[data-theme="dark"] .qh-wp-tasks li { color: #94a3b8; }
[data-theme="dark"] .qh-dict-entry,
[data-theme="dark"] .qh-wp-day,
[data-theme="dark"] .qh-habit-item,
[data-theme="dark"] .qh-cat-item { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .qh-tl-list::before { background: linear-gradient(to bottom, var(--sky), #475569); }
[data-theme="dark"] .qh-lt-edge { stroke: #334155; }

/* ---------- AI 安全素养 ---------- */
.qh-safety h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-safety-list { display: flex; flex-direction: column; gap: 8px; }
.qh-safety-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-s);
  padding: 10px 12px;
}
.qh-safety-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.qh-safety-icon { font-size: 18px; }
.qh-safety-title { font-size: 13px; font-weight: 700; color: #1f2937; }
.qh-safety-desc {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 6px;
}
.qh-safety-tips { display: flex; flex-wrap: wrap; gap: 4px; }
.qh-safety-tip {
  font-size: 10px;
  color: var(--lake);
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: var(--r-s);
}

/* ---------- 学习里程碑 ---------- */
.qh-milestone h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-ms-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.qh-ms-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: var(--r-s);
}
.qh-ms-done {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border: 1px solid #10b981;
}
.qh-ms-emoji { font-size: 22px; }
.qh-ms-info { flex: 1; }
.qh-ms-name { font-size: 12px; font-weight: 700; color: #1f2937; }
.qh-ms-reward { font-size: 10px; color: #6b7280; margin-top: 1px; }
.qh-ms-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.qh-ms-bar-fill {
  height: 100%;
  background: var(--grad-main);
  border-radius: 2px;
}
.qh-ms-prog { font-size: 10px; color: var(--lake); font-weight: 600; margin-top: 2px; }

/* ---------- 激励语录 ---------- */
.qh-inspiration {
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
  border-radius: var(--r-m);
  padding: 16px;
}
.qh-insp-quote {
  font-size: 14px;
  font-weight: 600;
  color: #4c1d95;
  line-height: 1.6;
  text-align: center;
}

/* ---------- 知识快照 ---------- */
.qh-fcg h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-fcg-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.qh-fcg-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-s);
  padding: 10px 8px;
  text-align: center;
}
.qh-fcg-title {
  font-size: 11px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
  min-height: 28px;
  line-height: 1.3;
}
.qh-fcg-zone { font-size: 9px; color: #8b5cf6; }
.qh-fcg-meta { font-size: 9px; color: #9ca3af; margin-top: 2px; }

/* ---------- 深色模式补全 ---------- */
[data-theme="dark"] .qh-safety-item,
[data-theme="dark"] .qh-ms-item,
[data-theme="dark"] .qh-fcg-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .qh-safety-title,
[data-theme="dark"] .qh-ms-name,
[data-theme="dark"] .qh-fcg-title { color: #f1f5f9; }
[data-theme="dark"] .qh-safety-tip { background: #312e81; color: #a5b4fc; }
[data-theme="dark"] .qh-inspiration { background: linear-gradient(135deg, #4c1d95, #6d28d9); }
[data-theme="dark"] .qh-insp-quote { color: #e9d5ff; }

/* ---------- 技能徽章 ---------- */
.qh-skill-badge h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-sb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.qh-sb-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-s);
  padding: 10px 6px;
  text-align: center;
}
.qh-sb-icon { font-size: 20px; }
.qh-sb-name { font-size: 10px; font-weight: 700; color: #1f2937; margin-top: 2px; line-height: 1.2; }
.qh-sb-stars { font-size: 10px; margin-top: 2px; color: #f59e0b; letter-spacing: -2px; }
.qh-sb-lv { font-size: 9px; color: #6b7280; margin-top: 2px; }

/* ---------- 学习反思 ---------- */
.qh-reflection h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-rp-prompt {
  font-size: 13px;
  font-weight: 600;
  color: #4338ca;
  background: #eef2ff;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
}
.qh-rp-hint {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}
.qh-rp-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
}
.qh-rp-input:focus { border-color: var(--lake); }
.qh-rp-save {
  margin-top: 6px;
  background: var(--lake);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- 专注度自评 ---------- */
.qh-focus-assess h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-fa-q { font-size: 12px; font-weight: 600; color: #374151; margin: 8px 0 4px; }
.qh-fa-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.qh-fa-opt {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: var(--r-m);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: #6b7280;
}
.qh-fa-opt-on {
  background: var(--lake);
  color: #fff;
  border-color: var(--lake);
}
.qh-fa-submit {
  margin-top: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 12px;
  cursor: pointer;
}
.qh-fa-done {
  background: #dcfce7;
  color: #166534;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- 每日目标 ---------- */
.qh-daily-goal h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-dg-list { display: flex; flex-wrap: wrap; gap: 6px; }
.qh-dg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  color: #374151;
}
.qh-dg-on {
  background: #f0fdf4;
  border-color: #10b981;
}
.qh-dg-done {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border-color: #10b981 !important;
}
.qh-dg-icon { font-size: 16px; }
.qh-dg-label { font-weight: 600; }
.qh-dg-xp { font-size: 10px; color: #f59e0b; font-weight: 700; }

/* ---------- 每周术语 ---------- */
.qh-weekly-terms h4 { margin: 0 0 10px; color: #374151; font-size: 13px; }
.qh-wt-list { display: flex; flex-direction: column; gap: 6px; }
.qh-wt-item {
  background: #fff;
  border-left: 3px solid #06b6d4;
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
}
.qh-wt-term { font-size: 13px; font-weight: 700; color: #0e7490; }
.qh-wt-en { font-size: 10px; color: #8b5cf6; margin-left: 4px; }
.qh-wt-def { font-size: 11px; color: #6b7280; margin-top: 2px; line-height: 1.4; }

/* ---------- 深色模式补全 ---------- */
[data-theme="dark"] .qh-sb-item,
[data-theme="dark"] .qh-rp-input,
[data-theme="dark"] .qh-fa-opt,
[data-theme="dark"] .qh-dg-item,
[data-theme="dark"] .qh-wt-item {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .qh-rp-prompt { background: #1e1b4b; color: #c4b5fd; }
[data-theme="dark"] .qh-sb-name,
[data-theme="dark"] .qh-dg-label,
[data-theme="dark"] .qh-wt-term,
[data-theme="dark"] .qh-fa-q { color: #f1f5f9; }