/**
 * 组件规范样式 (Cards, Buttons, Inputs, Icons, Tables, Charts)
 * 严格保证卡片边框与阴影互斥，所有视觉属性引用 CSS 变量
 */
.card-bordered {
  background-color: var(--color-neutral-50);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-elevated {
  background-color: var(--color-neutral-50);
  box-shadow: var(--shadow-level-1);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-elevated-strong {
  background-color: var(--color-neutral-50);
  box-shadow: var(--shadow-level-2);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-subtle {
  background-color: var(--color-neutral-200);
  border: var(--border-card);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 按钮组件（禁止圆角胶囊与渐变，悬停加深约 10%） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-body);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-neutral-50);
  border: var(--border-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-neutral-50);
  color: var(--text-color-primary);
  border: var(--border-input);
}

.btn-secondary:hover {
  background-color: var(--color-neutral-200);
}

.player-tab-btn {
  background-color: var(--color-neutral-50);
  border: var(--border-card);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.player-tab-btn:hover {
  background-color: var(--color-neutral-200);
}

.player-tab-btn.is-active {
  background-color: var(--color-primary);
  color: var(--color-neutral-50);
  border-color: var(--color-primary);
}

.player-tab-btn.is-active .text-secondary,
.player-tab-btn.is-active .text-tertiary {
  color: var(--color-neutral-200);
}

/* 输入框与下拉框（1px solid #d1d5db, 6px 圆角, focus 边框变色+轮廓） */
.input-control,
.select-control {
  background-color: var(--color-neutral-50);
  color: var(--text-color-primary);
  border: var(--border-input);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.input-control:focus,
.select-control:focus {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

/* 图标尺寸（行内 16px，独立 20px） */
.icon-inline {
  width: var(--icon-inline);
  height: var(--icon-inline);
  flex-shrink: 0;
}

.icon-standalone {
  width: var(--icon-standalone);
  height: var(--icon-standalone);
  flex-shrink: 0;
}

.icon-primary {
  color: var(--color-primary);
}

.icon-secondary {
  color: var(--color-secondary);
}

.icon-error {
  color: var(--color-error);
}
/* 文本与徽章工具类 */
.text-primary { color: var(--text-color-primary); }
.text-secondary { color: var(--text-color-secondary); }
.text-tertiary { color: var(--text-color-tertiary); }
.text-brand { color: var(--color-primary); }
.text-amber { color: var(--color-secondary); }
.text-danger { color: var(--color-error); }

.font-mono { font-family: var(--font-family-mono); }
.font-semibold { font-weight: var(--font-semibold); }

.kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-heading);
  color: var(--text-color-primary);
}

.kpi-label {
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kpi-sub {
  font-size: var(--text-xs);
  color: var(--text-color-tertiary);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  background-color: var(--color-neutral-200);
  color: var(--text-color-primary);
  border: var(--border-card);
}

.badge-primary {
  background-color: var(--color-neutral-100);
  color: var(--color-primary);
  border: var(--border-primary);
}

.badge-secondary {
  background-color: var(--color-neutral-100);
  color: var(--color-secondary);
  border: var(--border-secondary);
}

.badge-error {
  background-color: var(--color-neutral-100);
  color: var(--color-error);
  border: var(--border-error);
}

/* 原生 <progress> 进度条（零内联样式） */
.stat-progress {
  width: 100%;
  height: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--color-neutral-200);
  overflow: hidden;
  appearance: none;
}

.stat-progress::-webkit-progress-bar {
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-sm);
}

.stat-progress::-webkit-progress-value {
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
}

.stat-progress.progress-secondary::-webkit-progress-value {
  background-color: var(--color-secondary);
}

.stat-progress.progress-error::-webkit-progress-value {
  background-color: var(--color-error);
}

/* 列表与数据行 */
.stat-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}

.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bullet-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-color-primary);
}

.quote-box {
  background-color: var(--color-neutral-100);
  border: var(--border-card);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
}

/* 数据表格样式 */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
}

.data-table th {
  background-color: var(--color-neutral-100);
  color: var(--text-color-secondary);
  font-weight: var(--font-semibold);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-card);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-card);
  color: var(--text-color-primary);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background-color: var(--color-neutral-100);
}

/* 编年史时间轴 */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.timeline-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-neutral-100);
  border: var(--border-card);
  border-radius: var(--radius-sm);
}

.timeline-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.timeline-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* SVG 矢量图表类（完全基于 CSS 变量控制颜色与字号） */
.svg-chart {
  width: 100%;
  height: auto;
  display: block;
}

.svg-grid-line {
  stroke: var(--color-neutral-300);
  stroke-width: 1px;
}

.svg-axis-label {
  fill: var(--text-color-secondary);
  font-family: var(--font-family-sans);
  font-size: var(--text-xs);
}

.svg-value-label {
  fill: var(--text-color-primary);
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.svg-bar-primary {
  fill: var(--color-primary);
}

.svg-bar-secondary {
  fill: var(--color-secondary);
}

.svg-bar-error {
  fill: var(--color-error);
}

.svg-bar-neutral {
  fill: var(--color-neutral-400);
}

.svg-heat-0 { fill: var(--color-neutral-200); }
.svg-heat-1 { fill: var(--color-neutral-400); }
.svg-heat-2 { fill: var(--color-secondary); }
.svg-heat-3 { fill: var(--color-primary); }

.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

@media (max-width: 640px) {
  .timeline-item {
    grid-template-columns: minmax(0, 1fr);
  }
}