.knowledge-page {
  min-height: 100vh;
  background: var(--color-bg);
}

.knowledge-header {
  padding: var(--space-xl) var(--space-lg) var(--space-md);
}

.knowledge-header h2 {
  font-size: var(--font-size-xxl);
  color: var(--color-text-title);
}

.knowledge-header p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

.knowledge-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0 var(--space-lg);
}

.knowledge-topic {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-round);
  background: var(--color-bg-white);
  color: var(--color-text-body);
  font-size: var(--font-size-lg);
  font-weight: 600;
  border: 1px solid var(--color-border);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.knowledge-topic:active {
  transform: scale(0.98);
}

.knowledge-topic.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.knowledge-input-area {
  margin: var(--space-lg);
}

.knowledge-input {
  width: 100%;
  min-height: 76px;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-lg);
  line-height: 1.5;
  background: var(--color-bg-white);
  resize: none;
  min-height: 60px;
}

.knowledge-input:focus {
  border-color: var(--color-primary);
}

.knowledge-generate-btn {
  margin: 0 var(--space-lg);
}

.knowledge-output {
  margin: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-height: 120px;
  position: relative;
}

.knowledge-output-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-title);
  line-height: 1.8;
  white-space: pre-wrap;
}

.knowledge-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--color-primary);
  animation: blink 1s infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

.knowledge-output-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-divider);
}

.knowledge-history {
  margin: var(--space-lg);
}

.knowledge-history-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-title);
  margin-bottom: var(--space-md);
}

.knowledge-history-item {
  padding: var(--space-md);
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.knowledge-history-topic {
  font-size: var(--font-size-base);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.knowledge-history-content {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}

.knowledge-history-time {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}