/* ============================================================
 * BioQuest — 学习模块样式
 * 设计主题: Modern Botanical Laboratory
 * ============================================================ */

/* ----- 学习页面整体布局 ----- */
.study-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height, 64px));
}

.study-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* ----- 顶部进度统计 ----- */
.study-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.study-stat-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.study-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.study-stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.study-stat-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-deep);
  line-height: 1.1;
}

.study-stat-value .study-stat-unit {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

.study-stat-card--highlight {
  border-left: 4px solid var(--color-sage);
}

.study-stat-card--amber {
  border-left: 4px solid var(--color-amber);
}

.study-stat-card--deep {
  border-left: 4px solid var(--color-deep);
}

/* 整体进度条 */
.study-overall-progress {
  margin-bottom: 32px;
  background: var(--surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.study-overall-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.study-overall-progress-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-deep);
}

.study-overall-progress-pct {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-sage);
}

.study-progress-bar-track {
  width: 100%;
  height: 10px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.study-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-sage), var(--color-mid), var(--color-deep));
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 0;
}

/* ----- 左侧知识体系树 ----- */
.study-sidebar {
  width: 340px;
  flex-shrink: 0;
  background: var(--surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-height, 64px) + 24px);
  max-height: calc(100vh - var(--header-height, 64px) - 48px);
  display: flex;
  flex-direction: column;
}

.study-sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.study-sidebar-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-deep);
}

.study-sidebar-toggle-all {
  font-size: 0.78rem;
  color: var(--color-sage);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.study-sidebar-toggle-all:hover {
  background: rgba(90, 125, 92, 0.08);
}

.study-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* 篇 (Part) */
.study-tree-part {
  margin-bottom: 4px;
}

.study-tree-part-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast);
}

.study-tree-part-header:hover {
  background: rgba(90, 125, 92, 0.06);
}

.study-tree-part-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.study-tree-part-title {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-deep);
}

.study-tree-part-progress {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.study-tree-arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  flex-shrink: 0;
  color: var(--text-muted);
}

.study-tree-arrow svg {
  width: 12px;
  height: 12px;
}

.study-tree-part.collapsed .study-tree-arrow {
  transform: rotate(-90deg);
}

.study-tree-part.collapsed .study-tree-chapters {
  display: none;
}

/* 章 (Chapter) */
.study-tree-chapters {
  padding-left: 12px;
}

.study-tree-chapter {
  margin-bottom: 2px;
}

.study-tree-chapter-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition-fast);
  border-left: 2px solid var(--border-light);
  margin-left: 16px;
}

.study-tree-chapter-header:hover {
  background: rgba(90, 125, 92, 0.04);
}

.study-tree-chapter-title {
  flex: 1;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.study-tree-chapter-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.study-tree-chapter.collapsed .study-tree-arrow {
  transform: rotate(-90deg);
}

.study-tree-chapter.collapsed .study-tree-topics {
  display: none;
}

/* 节 (Topic) */
.study-tree-topics {
  padding-left: 8px;
}

.study-tree-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 40px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border-left: 2px solid var(--border-light);
  margin-left: 32px;
}

.study-tree-topic:hover {
  background: rgba(90, 125, 92, 0.06);
}

.study-tree-topic.active {
  background: rgba(90, 125, 92, 0.1);
  border-left-color: var(--color-sage);
}

.study-tree-topic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color var(--transition-base);
}

.study-tree-topic-dot[data-mastery="0"] { background: #c0c0c0; }
.study-tree-topic-dot[data-mastery="1"] { background: #7ab8d4; }
.study-tree-topic-dot[data-mastery="2"] { background: #7bc47e; }
.study-tree-topic-dot[data-mastery="3"] { background: #2d6a47; }

.study-tree-topic-title {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.study-tree-topic.active .study-tree-topic-title {
  color: var(--color-deep);
  font-weight: 600;
}

.study-tree-topic-recommend {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: rgba(232, 168, 48, 0.12);
  color: var(--color-warning);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ----- 右侧知识点详情面板 ----- */
.study-detail {
  flex: 1;
  min-width: 0;
}

.study-detail-empty {
  background: var(--surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 80px 40px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.study-detail-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.4;
}

.study-detail-empty-text {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.study-detail-empty-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* 知识点详情卡片 */
.study-detail-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

.study-detail-card-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, rgba(90, 125, 92, 0.04) 0%, rgba(196, 149, 106, 0.03) 100%);
}

.study-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.study-detail-breadcrumb-sep {
  color: var(--border-default);
}

.study-detail-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-deep);
  line-height: 1.3;
}

/* 掌握程度选择 */
.study-detail-section {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-light);
}

.study-detail-section:last-child {
  border-bottom: none;
}

.study-detail-section-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-deep);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.study-detail-section-title .section-icon {
  font-size: 1rem;
}

.study-mastery-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.study-mastery-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-light);
  background: var(--surface-primary);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-base);
}

.study-mastery-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.study-mastery-btn.active {
  border-color: currentColor;
  font-weight: 700;
}

.study-mastery-btn[data-level="0"] {
  color: #9a9a9a;
}
.study-mastery-btn[data-level="0"].active {
  background: rgba(192, 192, 192, 0.1);
  border-color: #9a9a9a;
}

.study-mastery-btn[data-level="1"] {
  color: #5a9ab8;
}
.study-mastery-btn[data-level="1"].active {
  background: rgba(90, 154, 184, 0.1);
  border-color: #5a9ab8;
}

.study-mastery-btn[data-level="2"] {
  color: #4a9c5c;
}
.study-mastery-btn[data-level="2"].active {
  background: rgba(74, 156, 92, 0.1);
  border-color: #4a9c5c;
}

.study-mastery-btn[data-level="3"] {
  color: #2d6a47;
}
.study-mastery-btn[data-level="3"].active {
  background: rgba(45, 106, 71, 0.1);
  border-color: #2d6a47;
}

.study-mastery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.study-mastery-btn[data-level="0"] .study-mastery-dot { background: #c0c0c0; }
.study-mastery-btn[data-level="1"] .study-mastery-dot { background: #7ab8d4; }
.study-mastery-btn[data-level="2"] .study-mastery-dot { background: #7bc47e; }
.study-mastery-btn[data-level="3"] .study-mastery-dot { background: #2d6a47; }

/* 知识点摘要 */
.study-detail-summary {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
  padding: 4px 0;
}

/* 相关题目链接 */
.study-detail-quiz-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--color-sage), var(--color-mid));
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
}

.study-detail-quiz-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-button);
  color: #fff;
}

.study-detail-quiz-link svg {
  width: 16px;
  height: 16px;
}

/* 学习笔记 */
.study-notes-area {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.7;
  resize: vertical;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.study-notes-area:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(90, 125, 92, 0.12);
}

.study-notes-area::placeholder {
  color: var(--text-muted);
}

.study-notes-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.study-notes-save-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.study-notes-save-hint.saved {
  color: var(--color-success);
}

.study-notes-save-btn {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-sage);
  background: transparent;
  color: var(--color-sage);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}

.study-notes-save-btn:hover {
  background: var(--color-sage);
  color: #fff;
}

/* ----- 推荐学习标签 ----- */
.study-recommend-section {
  margin-bottom: 32px;
}

.study-recommend-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.study-recommend-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-deep);
}

.study-recommend-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(232, 168, 48, 0.12);
  color: var(--color-warning);
}

.study-recommend-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.study-recommend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.study-recommend-item:hover {
  border-color: var(--color-sage);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.study-recommend-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-warning);
  flex-shrink: 0;
}

.study-recommend-item-title {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.study-recommend-item-chapter {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ----- 章节进度条 ----- */
.study-tree-chapter-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  margin-left: 40px;
  padding: 0 16px;
}

.study-tree-mini-bar {
  flex: 1;
  height: 3px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.study-tree-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-sage), var(--color-mid));
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

/* ----- 深色模式适配 ----- */
[data-theme="dark"] .study-stat-card {
  border-color: var(--border-default);
}

[data-theme="dark"] .study-overall-progress {
  border-color: var(--border-default);
}

[data-theme="dark"] .study-sidebar {
  border-color: var(--border-default);
}

[data-theme="dark"] .study-detail-card {
  border-color: var(--border-default);
}

[data-theme="dark"] .study-detail-card-header {
  background: linear-gradient(135deg, rgba(90, 125, 92, 0.06) 0%, rgba(196, 149, 106, 0.04) 100%);
}

[data-theme="dark"] .study-mastery-btn {
  border-color: var(--border-default);
  background: var(--surface-secondary);
}

[data-theme="dark"] .study-notes-area {
  background: var(--surface-tertiary);
  border-color: var(--border-default);
}

[data-theme="dark"] .study-recommend-item {
  border-color: var(--border-default);
}

[data-theme="dark"] .study-tree-chapter-header {
  border-left-color: var(--border-default);
}

[data-theme="dark"] .study-tree-topic {
  border-left-color: var(--border-default);
}

/* ----- 响应式设计 ----- */
@media (max-width: 1024px) {
  .study-layout {
    flex-direction: column;
  }

  .study-sidebar {
    width: 100%;
    position: static;
    max-height: 50vh;
  }

  .study-detail {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .study-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .study-stat-card {
    padding: 14px 18px;
  }

  .study-stat-value {
    font-size: 1.5rem;
  }

  .study-detail-card-header {
    padding: 18px 20px 16px;
  }

  .study-detail-section {
    padding: 16px 20px;
  }

  .study-detail-title {
    font-size: 1.15rem;
  }

  .study-mastery-buttons {
    gap: 8px;
  }

  .study-mastery-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .study-recommend-list {
    flex-direction: column;
  }

  .study-recommend-item {
    width: 100%;
  }

  .study-sidebar {
    max-height: 40vh;
  }
}

@media (max-width: 480px) {
  .study-mastery-buttons {
    flex-direction: column;
  }

  .study-mastery-btn {
    width: 100%;
    justify-content: center;
  }
}