@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap');

:root {
  --bg: #fffaf4;
  --bg-soft: #f2fffd;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-border: rgba(255, 255, 255, 0.9);
  --text: #2c2b4b;
  --muted: #7a7798;
  --accent: #23b9b1;
  --accent-2: #7fdc95;
  --accent-3: #57c8ff;
  --rainbow: linear-gradient(90deg, #35c6d3, #62ddb8, #8ce08c, #7bc8ff, #8c97ff);
  --shadow: 0 22px 70px rgba(71, 183, 187, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Noto Sans SC', sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(35, 185, 177, 0.18), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(87, 200, 255, 0.22), transparent 26%),
    radial-gradient(circle at 84% 84%, rgba(127, 220, 149, 0.18), transparent 25%),
    radial-gradient(circle at 15% 84%, rgba(140, 151, 255, 0.14), transparent 23%),
    linear-gradient(180deg, #f7fffe 0%, #ffffff 45%, #f3fffb 100%);
  overflow-x: hidden;
}

.bg-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(91, 211, 207, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 211, 207, 0.12) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.65), transparent 92%);
  pointer-events: none;
}

.bg-orb {
  position: fixed;
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
}
.orb-a { top: -8vw; right: -6vw; background: radial-gradient(circle, rgba(35, 185, 177, 0.38), transparent 66%); }
.orb-b { bottom: -10vw; left: -8vw; background: radial-gradient(circle, rgba(87, 200, 255, 0.36), transparent 66%); }

.shell {
  position: relative;
  width: min(1380px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.15);
}

.hero {
  padding: 10px 22px;
  margin-bottom: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)),
    var(--rainbow);
  border: 1px solid rgba(255, 255, 255, 0.95);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.18em;
  color: #21aba6;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  text-transform: uppercase;
}

h1, h2 {
  font-family: 'M PLUS Rounded 1c', 'Noto Sans SC', sans-serif;
  margin: 0;
}

h1 {
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.06;
  margin-bottom: 6px;
  background: var(--rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.lead {
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 12px;
  font-size: 14px;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  padding: 6px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(35, 185, 177, 0.14), rgba(127, 220, 149, 0.14), rgba(87, 200, 255, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #4a4770;
  font-size: 11px;
  font-weight: 700;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.stat {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 10px 22px rgba(71, 183, 187, 0.08);
}
.stat span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.stat strong { font-size: 18px; color: #37345b; }

.grid { display: grid; gap: 20px; margin-bottom: 20px; align-items: start; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.top-band { grid-template-columns: 1fr; }
.stack-col { display: grid; gap: 20px; align-content: start; }
.panel { padding: 22px; }
.dashboard-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
/* 知识库摘要 | 知识库导入与事件日志：两列并排 */
.kb-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.kb-two-col > .panel {
  display: flex;
  flex-direction: column;
}
.kb-two-col > .panel:last-child {
  flex: 1;
}
.path-band {
  grid-template-columns: 1fr;
}
.dashboard-left,
.dashboard-right {
  display: flex;
  flex-direction: column;
}
.dashboard-left > .panel,
.dashboard-right > .panel,
.path-panel {
  display: flex;
  flex-direction: column;
}
.dashboard-left > .panel:last-child,
.dashboard-right > .panel:last-child,
.path-panel {
  flex: 1;
}
.knowledge-panel .knowledge-box,
.ingest-panel .knowledge-box,
.ingest-panel .event-list,
.metric-panel .evaluation-box,
.path-panel .timeline-wide {
  flex: 1;
}
.timeline-wide {
  overflow: auto;
}
/* 学习效果评估：内容过多时内部滚动，整体高度与「智能体协同输出」保持一致 */
.metric-panel { display: flex; flex-direction: column; }
.metric-panel .evaluation-box {
  max-height: 658px;
  overflow-y: auto;
  padding-right: 6px;
}
.accent-panel {
  background: linear-gradient(180deg, rgba(255, 245, 251, 0.94), rgba(255, 251, 244, 0.94));
}
.compact-head { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(191, 238, 236, 0.85); }
.panel-head h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #3c345b;
}
.panel-head p { margin: 0 0 18px; color: var(--muted); }

.agent-switcher {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.68fr);
  gap: 16px;
  align-items: stretch;
}
.agent-sidebar {
  display: grid;
  gap: 14px;
  align-self: center;
}
.agent-figure-avatar,
.agent-tab-avatar,
.agent-modal-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.agent-figure-avatar svg,
.agent-tab-avatar svg,
.agent-modal-avatar svg {
  width: 64px;
  height: 64px;
  display: block;
}
.agent-figure h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #3a345c;
}
.agent-figure p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.agent-tabs {
  display: grid;
  gap: 10px;
}
.agent-tab {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.84);
  color: #4d4768;
  padding: 14px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(71, 183, 187, 0.1);
  font-weight: 800;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  --agent-accent: #35c6d3;
  --agent-soft: rgba(53, 198, 211, 0.18);
}
.agent-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(71, 183, 187, 0.14);
}
.agent-tab-kicker {
  font-size: 11px;
  color: var(--agent-accent);
  letter-spacing: 0.08em;
}
.agent-tab-title {
  font-size: 14px;
  line-height: 1.2;
}
.agent-tab-copy {
  display: grid;
  gap: 4px;
}
.agent-tab.active {
  background: linear-gradient(135deg, rgba(35,185,177,0.12), rgba(127,220,149,0.14), rgba(87,200,255,0.14));
  border-color: var(--agent-accent);
  color: #2f5d73;
}
.agent-tab-status {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agent-tab-status.thinking {
  color: #ff9f6e;
  animation: status-pulse 1s ease-in-out infinite;
}
.agent-tab-status.not-started {
  color: #8e81a8;
}
.agent-tab-status.done {
  color: #2ca46d;
}
.agent-tab.is-thinking {
  box-shadow: 0 16px 30px var(--agent-soft);
}
.agent-viewer .agent-card { min-height: 100%; cursor: pointer; }
.agent-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.agent-view-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: start;
}
.agent-view-left {
  display: grid;
  gap: 12px;
  align-content: start;
}
.agent-avatar-hero {
  width: 140px;
  height: 140px;
  border-radius: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--agent-soft), rgba(255,255,255,0.22));
  border: 1px solid var(--agent-accent);
  box-shadow: 0 16px 30px rgba(71, 183, 187, 0.1);
}
.agent-avatar-hero svg {
  width: 110px;
  height: 110px;
}
.agent-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.agent-stat {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--agent-soft);
}
.agent-stat span {
  display: block;
  color: #8e81a8;
  font-size: 12px;
  margin-bottom: 6px;
}
.agent-stat strong {
  display: block;
  color: #3a345c;
  font-size: 17px;
}
.agent-view-right {
  display: grid;
  gap: 12px;
  align-content: start;
  max-height: 520px;
  overflow-y: auto;
}
.agent-chip {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--agent-soft);
  color: var(--agent-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agent-summary {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--agent-soft);
  color: #2f5d73;
}
.agent-content strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  color: #3a345c;
}
.agent-view-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.agent-open-button {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  background: linear-gradient(135deg, var(--agent-accent), #57c8ff);
}
.agent-refresh-button {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
}

@keyframes status-pulse {
  0%, 100% { opacity: 0.65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

.agent-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.agent-modal.open { display: flex; }
.agent-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 38, 0.52);
  backdrop-filter: blur(4px);
}
.agent-modal-panel {
  position: relative;
  width: min(1010px, calc(100vw - 24px));
  max-height: calc(67vh - 22px);
  height: auto;
  margin-left: 0;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,255,252,0.96));
  box-shadow: 0 24px 60px rgba(10, 20, 36, 0.22);
  overflow-y: auto;
}
.path-modal-panel {
  width: min(1010px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(10, 20, 36, 0.22);
}
#tutor-modal .path-modal-panel {
  border-radius: 24px;
}
/* 思维导图弹窗单独放大：宽度 +60%、高度 +100%（接近铺满屏幕） */
#mindmap-modal .path-modal-panel {
  width: min(1616px, calc(100vw - 24px));
  min-height: 78vh;
  max-height: calc(100vh - 32px);
}
.agent-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #2f5d73;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(71, 183, 187, 0.14);
}
.agent-modal-head {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(35,185,177,0.12), rgba(127,220,149,0.12), rgba(87,200,255,0.12));
  border: 1px solid rgba(186, 239, 236, 0.95);
  margin-bottom: 18px;
}
.agent-modal-head h3 {
  margin: 4px 0 2px;
  font-size: 28px;
  color: #2f5d73;
}
.agent-modal-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 13px;
}
.agent-modal-avatar svg { width: 72px; height: 72px; }
.agent-modal-body {
  display: grid;
  gap: 14px;
}
.path-modal-body {
  padding-bottom: 4px;
}
.agent-modal-output {
  display: grid;
  gap: 14px;
}
.agent-modal-copy {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--agent-soft);
}
.agent-modal-copy h4 {
  margin: 0 0 10px;
  color: #3a345c;
  font-size: 20px;
}
.agent-modal-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}
.modal-lock { overflow: hidden; }

.course-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.course-tab {
  border: 1px solid rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.82);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(71, 183, 187, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.course-tab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(71, 183, 187, 0.16); }
.course-tab.active {
  background: linear-gradient(135deg, rgba(35,185,177,0.16), rgba(127,220,149,0.18), rgba(87,200,255,0.18));
  border-color: rgba(35, 185, 177, 0.55);
}
.course-tab small { display: block; color: var(--muted); margin-top: 4px; }

.prompt-form, .score-form { display: grid; gap: 12px; }
.profile-chat {
  margin: 8px 0 16px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
}

#profile-form textarea {
  min-height: 96px;
}
textarea, input {
  width: 100%;
  border: 1px solid rgba(125, 226, 219, 0.95);
  background: rgba(255,255,255,0.86);
  color: var(--text);
  border-radius: 20px;
  padding: 14px 16px;
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
textarea:focus, input:focus {
  border-color: rgba(35, 185, 177, 0.75);
  box-shadow: 0 0 0 4px rgba(35, 185, 177, 0.12);
}
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
button {
  border: none;
  border-radius: 16px;
  padding: 13px 16px;
  cursor: pointer;
  color: #ffffff;
  background: var(--rainbow);
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(71, 183, 187, 0.18);
}
button.ghost {
  background: rgba(255,255,255,0.84);
  color: #4d4768;
  border: 1px solid rgba(170, 235, 232, 0.9);
  box-shadow: none;
}
button.primary-blue {
  background: linear-gradient(135deg, #2f86f6, #55a8ff);
  box-shadow: 0 12px 24px rgba(47, 134, 246, 0.22);
}
button.primary-blue:hover { box-shadow: 0 16px 28px rgba(47, 134, 246, 0.28); }
button.danger {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 12px 24px rgba(239, 68, 68, 0.22);
}
button.danger:hover { box-shadow: 0 16px 28px rgba(239, 68, 68, 0.28); }
button.learning-path-button {
  background: linear-gradient(135deg, #b3d9ff, #87ceeb);
  color: #000000;
  border: 1px solid rgba(135, 206, 235, 0.8);
  box-shadow: 0 12px 24px rgba(135, 206, 235, 0.18);
}
button.learning-path-button:hover { box-shadow: 0 16px 28px rgba(135, 206, 235, 0.28); }
button.light-blue {
  background: linear-gradient(135deg, #b3d9ff, #87ceeb);
  color: #000000;
  border: 1px solid rgba(135, 206, 235, 0.65);
  box-shadow: 0 12px 24px rgba(135, 206, 235, 0.18);
}
button.light-blue:hover { box-shadow: 0 16px 28px rgba(135, 206, 235, 0.28); }

/* ── 语音输入按钮 ─────────────────────────────────────────── */
button.voice-input-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  color: #555;
  border: 2px solid rgba(180, 180, 180, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: none;
}
button.voice-input-btn:hover {
  background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
button.voice-input-btn:active {
  transform: scale(0.95);
}
button.voice-input-btn.recording {
  background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
  color: #fff;
  border-color: rgba(255, 80, 80, 0.8);
  box-shadow: 0 0 0 6px rgba(255, 80, 80, 0.18);
  animation: voice-pulse 1.2s ease-in-out infinite;
}
button.voice-input-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
/* 弹窗内语音按钮：用 ID 选择器提升优先级，覆盖 .tutor-dialog-actions button 的 padding */
#tutor-dialog-voice-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  flex: none;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 80, 80, 0.2); }
  50% { box-shadow: 0 0 0 12px rgba(255, 80, 80, 0.05); }
}

/* ── 语音识别中转圈 ─────────────────────────────────────────── */
button.voice-input-btn.is-recognizing {
  background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
  cursor: wait;
}
button.voice-input-btn.is-recognizing svg { display: none; }
button.voice-input-btn.is-recognizing::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border: 2.5px solid #888;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

/* ── 语音输入：屏幕中央弹窗 ─────────────── */
body.voice-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.voice-input-bar {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 110px;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  border-radius: 55px;
  background: radial-gradient(ellipse at center, #5ba0ff 0%, #2f7de8 50%, #1a5dc7 100%);
  box-shadow: 0 0 60px rgba(30, 100, 220, 0.45), 0 12px 48px rgba(0, 0, 0, 0.25);
}
body.voice-mode .voice-input-bar {
  display: flex;
}

.voice-bar-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  flex: none;
}
.voice-bar-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
.voice-bar-btn svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* 中间波形圆点 */
.voice-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 44px;
  flex: 1;
}
.voice-waveform i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transition: transform 0.1s ease, opacity 0.1s ease;
}
button.is-loading,
button.is-cooldown {
  cursor: wait;
}
button.is-fresh {
  box-shadow: 0 0 0 4px rgba(47, 134, 246, 0.12), 0 12px 24px rgba(47, 134, 246, 0.22);
}
button:hover { transform: translateY(-1px); }

.profile-action-status {
  min-height: 0;
  margin-top: 0;
}
.action-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #4d4768;
  border: 1px solid rgba(170, 235, 232, 0.9);
  font-size: 12px;
  font-weight: 800;
}
.action-badge.loading {
  background: rgba(47, 134, 246, 0.1);
  border-color: rgba(47, 134, 246, 0.2);
  color: #2f5d73;
}
.action-badge.success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.24);
  color: #166534;
  animation: status-pulse 1s ease-in-out infinite;
}
.action-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: dot-bounce 1s infinite ease-in-out;
}
button.is-updated {
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 12px 24px rgba(47, 134, 246, 0.18);
}
.action-badge i:nth-child(2) { animation-delay: 0.15s; }
.action-badge i:nth-child(3) { animation-delay: 0.3s; }

.resource-timer {
  min-width: 96px;
  color: #2f5d73;
  font-size: 12px;
  font-weight: 800;
}
.resource-timer-inline {
  min-width: 0;
}
.button-loading {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 8px;
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 0.2s ease;
}
.button-loading.active { opacity: 1; }
.button-loading i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: dot-bounce 1s infinite ease-in-out;
}
.button-loading i:nth-child(2) { animation-delay: 0.15s; }
.button-loading i:nth-child(3) { animation-delay: 0.3s; }

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.mini-card {
  padding: 11px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(243,255,252,0.9));
  border: 1px solid rgba(186, 239, 236, 0.9);
}
.mini-card label { display: block; color: #8e81a8; font-size: 12px; margin-bottom: 5px; }
.mini-card strong { display: block; font-size: 14px; line-height: 1.45; color: #372f57; }

.resource-stack { display: grid; gap: 12px; }
.resource-item, .timeline-item, .chat-item, .event-item, .knowledge-item, .evaluation-card {
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,255,252,0.9));
  border: 1px solid rgba(191, 238, 236, 0.95);
  box-shadow: 0 12px 24px rgba(71, 183, 187, 0.08);
}
.resource-item h3, .timeline-item h3, .chat-item h3, .knowledge-item h3, .evaluation-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #3a345c;
}
.chat-item.user { background: linear-gradient(180deg, rgba(238,251,255,0.96), rgba(241,246,255,0.9)); }
.chat-item.assistant { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,255,252,0.9)); }
.resource-item .meta, .timeline-item .meta, .knowledge-item .meta, .event-item .meta {
  color: #21aba6;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 800;
}
.chat-item .role {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(35,185,177,0.12);
  color: #21aba6;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}
.resource-item p, .timeline-item p, .chat-item p, .knowledge-item p, .event-item p, .evaluation-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.agent-card-loading {
  position: relative;
  overflow: hidden;
}
.agent-card-thinking {
  animation: card-glow 2s ease-in-out infinite;
}
.agent-thinking-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 22px;
  text-align: center;
  gap: 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--agent-soft), rgba(255,255,255,0.6));
  margin-bottom: 14px;
}
.thinking-spinner {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner-ring {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(47, 134, 246, 0.16);
  border-top-color: var(--agent-accent, #2f86f6);
  animation: spin 0.8s linear infinite;
}
.thinking-main-text {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #2f5d73;
  letter-spacing: 0.04em;
}
.thinking-sub-text {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.thinking-chip {
  color: #ff9f6e;
  background: rgba(255, 159, 110, 0.14);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--agent-soft); }
  50% { box-shadow: 0 0 0 8px var(--agent-soft); }
}
.agent-card.is-fresh {
  animation: fresh-pop 1.2s ease;
}
.agent-card-empty {
  cursor: default;
}
.agent-empty-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  gap: 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--agent-soft), rgba(255,255,255,0.5));
  margin: 14px 0;
}
.agent-empty-icon {
  width: 72px;
  height: 72px;
  opacity: 0.5;
}
.agent-empty-icon svg {
  width: 100%;
  height: 100%;
}
.empty-main-text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.empty-sub-text {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.agent-chip.not-started {
  background: rgba(122, 119, 152, 0.12);
  color: var(--muted);
}
.agent-refresh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}
.agent-refresh-button {
  background: linear-gradient(135deg, #2f86f6, #55a8ff);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(47, 134, 246, 0.22);
}
.agent-refresh-button:hover { box-shadow: 0 16px 28px rgba(47, 134, 246, 0.28); }
.agent-refresh-button.is-cooldown,
.agent-refresh-button.is-loading { cursor: wait; }
.resource-success-note {
  color: #169087;
  font-size: 13px;
  font-weight: 800;
}
.agent-loading-panel {
  display: grid;
  gap: 10px;
  padding: 8px 0 4px;
}
.loading-skeleton {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,134,246,0.08), rgba(47,134,246,0.18), rgba(47,134,246,0.08));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s infinite linear;
}
.loading-skeleton.skeleton-title {
  width: 72%;
  height: 18px;
}
.loading-skeleton.short { width: 66%; }
.loading-chip {
  color: #2f86f6;
  background: rgba(47,134,246,0.12);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fresh-pop {
  0% { transform: scale(0.985); box-shadow: 0 0 0 0 rgba(47, 134, 246, 0.24); }
  55% { transform: scale(1.01); box-shadow: 0 0 0 10px rgba(47, 134, 246, 0); }
  100% { transform: scale(1); box-shadow: 0 12px 24px rgba(71, 183, 187, 0.08); }
}
.reference-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.reference-list span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(35,185,177,0.1);
  color: #2f5d73;
  font-size: 12px;
  font-weight: 700;
}
/* 拓展阅读推荐（书/视频 + 真实搜索链接） */
.recommend-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.recommend-group { display: flex; flex-direction: column; gap: 6px; }
.recommend-group-title { font-size: 12px; font-weight: 700; color: #8e81a8; margin-bottom: 2px; }
.recommend-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 12px; text-decoration: none; transition: .15s;
  border: 1px solid rgba(35,185,177,0.25);
  background: linear-gradient(135deg, rgba(35,185,177,0.08), rgba(87,200,255,0.08));
}
.recommend-item:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(35,185,177,0.18); border-color: rgba(35,185,177,0.5); }
.recommend-item.recommend-video { border-color: rgba(255,146,11,0.3); background: linear-gradient(135deg, rgba(255,146,11,0.08), rgba(255,107,107,0.08)); }
.recommend-icon { font-size: 20px; flex: none; }
.recommend-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.recommend-title { font-size: 14px; font-weight: 700; color: #2a2f45; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recommend-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(35,185,177,0.2); color: #1f6f78; }
.recommend-video .recommend-tag { background: rgba(255,146,11,0.2); color: #b35a00; }
.recommend-author, .recommend-platform { font-size: 11px; color: #6c6188; }
.recommend-author::after { content: '·'; margin: 0 4px; }
.recommend-platform::before { content: '🎬 '; }
.recommend-reason { font-size: 12px; color: #5b5278; line-height: 1.4; }
.recommend-go { font-size: 16px; font-weight: 700; color: #35c6d3; flex: none; }
.recommend-video .recommend-go { color: #ff922b; }

.hint-line {
  margin: 0.4cm 0 10px;
  color: #6b6a86;
  font-size: 13px;
}

/* Profile summary */
.profile-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 6px;
}
.profile-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(243,255,252,0.92));
  border: 1px solid rgba(186, 239, 236, 0.9);
}
.profile-mini-icon {
  font-size: 22px;
  flex: none;
}
.profile-mini-label {
  display: block;
  color: #8e81a8;
  font-size: 12px;
  margin-bottom: 4px;
}
.profile-mini-card strong {
  display: block;
  font-size: 15px;
  color: #372f57;
}
.profile-mini-wide {
  grid-column: 1 / -1;
}

/* Course switch toast */
.course-switch-toast {
  text-align: center;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  margin: 4px 0 10px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.course-switch-toast[hidden] {
  display: none;
}
.course-switch-toast.is-loading {
  background: rgba(47, 134, 246, 0.1);
  color: #2f5d73;
  border: 1px solid rgba(47, 134, 246, 0.2);
  animation: toast-pulse 1.2s ease-in-out infinite;
}
.course-switch-toast.is-done {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.28);
  animation: toast-pop 0.4s ease;
}
.course-switch-toast.is-blocked {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.28);
  animation: toast-pop 0.4s ease;
}
@keyframes toast-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@keyframes toast-pop {
  0% { transform: scale(0.92); opacity: 0; }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

/* Agent card switching state */
.agent-card-switching {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.agent-card-switching .agent-thinking-hero {
  margin-bottom: 0;
}

.timeline { display: grid; gap: 12px; }
.timeline-item { position: relative; padding-left: 20px; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--rainbow);
}
.timeline-item strong { color: #3a345c; }
.timeline-item .step { color: #ff6b95; font-size: 12px; margin-bottom: 8px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
.timeline-item .step { color: #21aba6; }

.tutor-box { margin-top: 12px; }
.empty-state {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  color: var(--muted);
  border: 1px dashed rgba(155, 226, 225, 0.9);
}
.chat-log, .event-list, .knowledge-box, .evaluation-box { display: grid; gap: 10px; margin-top: 14px; }
.chat-log {
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
}
.event-list {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.chat-item .qa { display: grid; gap: 8px; }
.chat-item .question { color: #5b507f; font-weight: 700; }
.chat-item .question { color: #2f5d73; font-weight: 700; }
.chat-item .answer { color: var(--muted); }
.chat-item.is-loading .answer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.loading-line {
  color: #4a4770;
  font-weight: 700;
}
.loading-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.loading-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: dot-bounce 1s infinite ease-in-out;
}
.loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.loading-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.knowledge-box + .knowledge-box { margin-top: 12px; }
.knowledge-item p + p { margin-top: 10px; }

.score-form {
  grid-template-columns: minmax(0, 1fr);
}
.score-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.score-form input[type="text"] { grid-column: 1 / -1; }
.score-form button { grid-column: 1 / -1; padding: 12px 24px; font-size: 15px; font-weight: 600; }
.eval-auto-tip {
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f0f7ff;
  color: #3b5998;
  font-size: 13px;
  line-height: 1.6;
  border-left: 3px solid #4a90d9;
}
/* 学习效果评估：标题+说明+表单整块高度缩减约 30% */
.metric-panel .panel-head h2 { font-size: 17px; margin-bottom: 5px; }
.metric-panel .panel-head p { margin: 0 0 12px; font-size: 13px; }
.metric-panel .score-form { gap: 8px; }
.metric-panel .eval-auto-tip { margin: 0 0 3px; padding: 8px 11px; font-size: 11px; line-height: 1.4; }
.metric-panel .score-form input[type="text"] { padding: 9px 14px; font-size: 13px; }
.metric-panel .score-form button { padding: 8px 18px; font-size: 13px; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.kpi {
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(35,185,177,0.09), rgba(127,220,149,0.09), rgba(87,200,255,0.1));
  border: 1px solid rgba(186, 239, 236, 0.95);
}
.kpi span { display: block; color: #8e81a8; font-size: 11px; margin-bottom: 2px; }
.kpi strong { font-size: 15px; color: #3a345c; }

/* 学习效果评估卡片扩展 */
.eval-head { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.level-badge { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, rgba(87,200,255,0.18), rgba(35,185,177,0.18)); color: #2a6f8a; }
.overall-score { font-size: 15px; font-weight: 700; color: #3a345c; }
.eval-section { margin-top: 14px; }
.eval-section-title { font-size: 12px; color: #8e81a8; margin-bottom: 6px; font-weight: 600; }
.dim-row { display: grid; grid-template-columns: 88px 1fr 36px; align-items: center; gap: 10px; margin: 6px 0; }
.dim-label { font-size: 13px; color: #3a345c; }
.dim-track { height: 8px; border-radius: 999px; background: rgba(138,129,168,0.18); overflow: hidden; }
.dim-fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #23b9b1, #57c8ff); transition: width .4s ease; }
.dim-val { font-size: 12px; color: #6c6188; text-align: right; }
.weak-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12px; color: #8e81a8; }
.weak-tag { padding: 2px 9px; border-radius: 999px; font-size: 12px; color: #b03a4a;
  background: rgba(231,103,124,0.12); border: 1px solid rgba(231,103,124,0.35); }
.eval-analysis { margin-top: 12px; padding: 12px; border-radius: 14px;
  background: rgba(35,185,177,0.07); border: 1px solid rgba(186,239,236,0.7); }
.eval-analysis p, .eval-section p { margin: 4px 0 0; color: #5b527a; line-height: 1.7; font-size: 13px; }
.eval-point { margin: 6px 0 0; font-size: 13px; color: #5b527a; }
.eval-pos { color: #1f9e8f; font-weight: 600; }
.eval-neg { color: #b03a4a; font-weight: 600; }
.eval-tip { margin-top: 12px; font-size: 12px; color: #8e81a8; }
.trend-chart { width: 100%; max-width: 60%; height: auto; margin-top: 6px; }
.trend-axis { stroke: rgba(138,129,168,0.4); stroke-width: 1; }
.trend-line { fill: none; stroke-width: 2; }
.trend-line.mastery { stroke: #23b9b1; }
.trend-line.score { stroke: #7f6cff; }
.trend-dot { stroke: #fff; stroke-width: 1; }
.trend-dot.mastery { fill: #23b9b1; }
.trend-dot.score { fill: #7f6cff; }
.trend-legend { display: flex; gap: 16px; margin-top: 6px; font-size: 12px; color: #8e81a8; }
.trend-legend .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.trend-legend .legend-dot.mastery { background: #23b9b1; }
.trend-legend .legend-dot.score { background: #7f6cff; }

@media (max-width: 1080px) {
  .two-col { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .kb-two-col { grid-template-columns: 1fr; }
  .path-band { grid-template-columns: 1fr; }
  .dashboard-left, .dashboard-right { display: grid; }
  .agent-switcher, .agent-view-grid, .agent-modal-head { grid-template-columns: 1fr; }
  .agent-sidebar { position: static; }
  .agent-avatar-hero { width: 120px; height: 120px; }
  .mini-grid, .kpi-row, .profile-summary-grid { grid-template-columns: 1fr; }
}

/* Scrollbar for chat areas */
.profile-chat::-webkit-scrollbar,
.chat-log::-webkit-scrollbar {
  width: 6px;
}
.profile-chat::-webkit-scrollbar-track,
.chat-log::-webkit-scrollbar-track,
.event-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}
.profile-chat::-webkit-scrollbar-thumb,
.chat-log::-webkit-scrollbar-thumb,
.event-list::-webkit-scrollbar-thumb {
  background: rgba(35, 185, 177, 0.35);
  border-radius: 10px;
}

@media (max-width: 640px) {
  .shell { width: min(100vw - 18px, 1380px); }
  .hero, .panel { padding: 18px; }
  h1 { max-width: 100%; white-space: normal; }
  .score-form { grid-template-columns: 1fr; }
  .agent-modal { align-items: flex-end; }
  .agent-modal-panel {
    width: 100vw;
    height: min(86vh, 100%);
    border-radius: 26px 26px 0 0;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.28s ease;
  }
  .agent-modal.open .agent-modal-panel { transform: translateY(0); }
  .agent-tab { grid-template-columns: 48px 1fr; }
  .agent-switcher { grid-template-columns: 1fr; }
  .agent-view-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ─── Diagram / Quiz inline scroll ─── */
.agent-diagram {
  background: rgba(255,255,255,0.7);
  border-radius: 16px;
  padding: 10px;
  text-align: center;
  overflow: auto;
  max-height: 420px;
}
.quiz-scroll {
  overflow-y: auto;
  max-height: 470px;
  margin-top: -14px;
  padding-right: 4px;
  scroll-behavior: smooth;
}
/* Toast */
.toast-overlay {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 12px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239,68,68,0.94), rgba(249,115,22,0.94));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 12px 32px rgba(239,68,68,0.4);
  animation: toast-in 0.3s ease, toast-out 0.3s ease 1.2s forwards;
  pointer-events: none;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.agent-diagram svg {
  max-width: 100%;
  height: auto;
}
.agent-diagram.is-fullscreen {
  position: fixed;
  inset: 24px;
  z-index: 60;
  max-height: none;
  background: rgba(255,255,255,0.98);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(10,20,36,0.4);
  padding: 24px;
  overflow: auto;
}
.diagram-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.diagram-zoom-btn {
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, #35c6d3, #57c8ff);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.diagram-zoom-btn:hover { box-shadow: 0 8px 18px rgba(53,198,211,0.28); }

/* ─── Quiz ─── */
.quiz-block {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.quiz-card {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(235,235,250,0.95);
}
.quiz-stem {
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.quiz-num {
  color: var(--accent);
  font-weight: 800;
}
.quiz-options {
  display: grid;
  gap: 6px;
}
.quiz-option {
  padding: 8px 14px;
  border-radius: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  background: rgba(245,247,255,0.9);
  border: 1px solid rgba(210,220,245,0.8);
  color: #4a4770;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quiz-option:hover { background: rgba(230, 240, 255, 0.9); border-color: var(--accent-3); }
.quiz-option.selected {
  background: linear-gradient(135deg, rgba(53,198,211,0.18), rgba(87,200,255,0.18));
  border-color: var(--accent);
  color: #2f5d73;
  box-shadow: 0 4px 12px rgba(53,198,211,0.18);
}
.quiz-option:disabled { cursor: default; opacity: 0.7; }
.quiz-feedback {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.quiz-correct {
  background: rgba(34,197,94,0.12);
  color: #166534;
  border: 1px solid rgba(34,197,94,0.22);
}
.quiz-wrong {
  background: rgba(239,68,68,0.1);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,0.18);
}
.quiz-submit-btn {
  padding: 10px 20px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  background: linear-gradient(135deg, #23b9b1, #35c6d3);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(35,185,177,0.22);
  transition: box-shadow 0.2s;
  justify-self: center;
}
.quiz-submit-btn:hover { box-shadow: 0 14px 30px rgba(35,185,177,0.32); }
.quiz-submit-btn:disabled { opacity: 0.5; cursor: default; }
.quiz-score {
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: #169087;
}

/* ─── Tutor Error ─── */
.tutor-error {
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  margin-top: 4px;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.28);
  animation: toast-pop 0.4s ease;
}
.tutor-error[hidden] {
  display: none;
}

/* ─── Tutor modal success flash ─── */
#tutor-modal .agent-modal-panel.is-success {
  animation: tutor-success-pop 0.5s ease;
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.18), 0 24px 60px rgba(10, 20, 36, 0.22);
}
@keyframes tutor-success-pop {
  0% { transform: scale(0.92); opacity: 0.6; }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

/* 流式答疑光标 */
.stream-cursor{display:inline-block;width:8px;color:#35c6d3;font-weight:700;animation:stream-blink 1s steps(2,start) infinite;}
@keyframes stream-blink{50%{opacity:0;}}

/* ── 交互式思维导图 ─────────────────────────────────────────── */
.mindmap-tree{padding:4px 2px;font-size:14px;line-height:1.7;}
.mindmap-root{font-weight:700;font-size:17px;padding:6px 12px;border-radius:10px;background:linear-gradient(135deg,rgba(53,198,211,.18),rgba(87,200,255,.18));margin-bottom:10px;display:inline-block;}
.mindmap-progress{font-size:13px;color:#8a93a6;margin:6px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mindmap-progress b{color:#35c6d3;}
.mindmap-progress-bar{display:inline-block;flex:1;min-width:120px;max-width:260px;height:8px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;vertical-align:middle;}
.mindmap-progress-bar i{display:block;height:100%;background:linear-gradient(90deg,#35c6d3,#7fdc95);border-radius:6px;transition:width .3s;}
.mindmap-branch{border-left:2px solid rgba(53,198,211,.4);margin:8px 0;padding:2px 0 6px 10px;}
.mindmap-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:600;padding:4px 0;user-select:none;}
.mindmap-summary::-webkit-details-marker{display:none;}
.mindmap-toggle{display:inline-block;width:14px;color:#35c6d3;transition:transform .2s;}
.mindmap-branch:not([open]) .mindmap-toggle{transform:rotate(-90deg);}
.mindmap-branch-name{color:#e8edf5;}
.mindmap-children{list-style:none;margin:6px 0 0 6px;padding:0;}
.mindmap-leaf{padding:3px 0;}
.mindmap-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.mindmap-check input{position:absolute;opacity:0;width:0;height:0;}
.mindmap-checkmark{width:18px;height:18px;border-radius:6px;border:2px solid rgba(53,198,211,.55);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:.15s;}
.mindmap-check input:checked + .mindmap-checkmark{background:#35c6d3;border-color:#35c6d3;}
.mindmap-check input:checked + .mindmap-checkmark::after{content:'✓';color:#0b2230;font-size:13px;font-weight:700;}
.mindmap-node-text{color:#c9d3e0;transition:.15s;}
.mindmap-leaf.is-mastered .mindmap-node-text{color:#6b7585;text-decoration:line-through;}

/* ── markmap 辐射状思维导图（鲜艳配色）─────────────────────────── */
.markmap-wrap{width:100%;height:100%;min-height:380px;}
.markmap-host{width:100%;height:100%;min-height:380px;}
#mindmap-modal-diagram.markmap-wrap{min-height:70vh;}
.markmap-host svg{width:100%;height:100%;}
.markmap-node text{font-weight:700;font-size:15px;}
.markmap-node circle{stroke-width:2.5px;}
.markmap-link{stroke-width:2.5px;}
/* 降级列表树：让字体更鲜艳 */
.mindmap-tree .mindmap-root{color:#1f6f78;}
.mindmap-tree ul{list-style:none;margin:6px 0 0 4px;padding-left:6px;border-left:2px dashed rgba(53,198,211,.4);}
.mindmap-tree li{color:#3a345c;font-weight:600;padding:2px 0;}
.mindmap-tree ul ul li{color:#5b5278;font-weight:500;}

/* ── 讲解弹窗追问按钮 ─────────────────────────────────────────── */
.tutor-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.tutor-modal-followup {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tutor-modal-followup:hover {
  background: rgba(35, 185, 177, 0.12);
  border-color: rgba(35, 185, 177, 0.95);
  color: #23b9b1;
}

/* ── 讲解弹窗对话式布局 ─────────────────────────────────────────── */
.tutor-dialog-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 70vh;
}

.tutor-dialog-history {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tutor-empty-state {
  color: #8a93a6;
  text-align: center;
  padding: 40px 20px;
  font-size: 15px;
}

.tutor-chat-item {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 12px;
}

.tutor-chat-item.user-question {
  background: rgba(35, 185, 177, 0.08);
  border: 1px solid rgba(35, 185, 177, 0.2);
}

.tutor-chat-item.assistant-answer {
  background: rgba(87, 200, 255, 0.06);
  border: 1px solid rgba(87, 200, 255, 0.15);
}

.tutor-chat-role {
  font-size: 13px;
  font-weight: 700;
  color: #5b6478;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tutor-chat-item.user-question .tutor-chat-role::before {
  content: '👤';
}

.tutor-chat-item.assistant-answer .tutor-chat-role::before {
  content: '🤖';
}

.tutor-chat-content {
  font-size: 15px;
  line-height: 1.6;
  color: #2c2b4b;
  white-space: pre-wrap;
}

.tutor-section {
  margin-bottom: 10px;
}

.tutor-section:last-child {
  margin-bottom: 0;
}

.tutor-section strong {
  color: #23b9b1;
  font-weight: 600;
}

.tutor-dialog-input-area {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.tutor-dialog-input-area textarea {
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  border: 1px solid rgba(170, 235, 232, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  color: #2c2b4b;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.tutor-dialog-input-area textarea:focus {
  border-color: #23b9b1;
}

.tutor-dialog-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.tutor-dialog-actions button {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#tutor-dialog-send {
  background: linear-gradient(135deg, #23b9b1, #35c6d3);
  color: white;
  border: none;
  box-shadow: 0 6px 16px rgba(35, 185, 177, 0.22);
}

#tutor-dialog-send:hover {
  box-shadow: 0 8px 20px rgba(35, 185, 177, 0.28);
}

#tutor-dialog-send:disabled {
  background: rgba(35, 185, 177, 0.4);
  cursor: wait;
}

#tutor-dialog-clear:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.95);
  color: #ef4444;
}

/* ── 通用按钮加载 spinner ───────────────────────────────────────── */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── 课程标签切换中加载态 ───────────────────────────────────────── */
.course-tab.is-switching {
  position: relative;
  opacity: 0.85;
  cursor: wait;
}
.course-tab.is-switching::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  vertical-align: middle;
}
.course-tab:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}