.metrics-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(300px, 1.2fr);
  gap: 12px;
  margin-top: 12px;
}

.metric,
.summary-box,
.table-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--panel-shadow);
}

.metric,
.summary-box,
.dataset-card {
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}

.metric:hover,
.summary-box:hover,
.dataset-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(177, 18, 38, 0.18);
}

.metric {
  padding: 16px;
}

.metric span,
.summary-box span {
  display: block;
  color: #7b8292;
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.metric strong,
.summary-box strong {
  font-size: 1.45rem;
  color: #313842;
}

.metric--chart {
  padding-bottom: 8px;
}

.sparkline {
  height: 84px;
}

.sparkline svg {
  width: 100%;
  height: 100%;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.page-head h2,
.data-hero h1 {
  margin: 0;
  font-size: 1.6rem;
  color: #505966;
}

.page-head p {
  margin: 6px 0 0;
  color: #7f8797;
}

.page-head__actions {
  display: flex;
  gap: 10px;
}

.alpha-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.summary-box {
  padding: 16px;
}

.table-card {
  margin-bottom: 12px;
}

.table-card__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: #5a6270;
  font-weight: 600;
}

.alpha-table__head,
.alpha-row {
  display: grid;
  grid-template-columns: 2.2fr 0.9fr 1fr 0.7fr 0.8fr 0.8fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.alpha-table__head {
  color: #7d8595;
  font-size: 0.82rem;
  font-weight: 600;
}

.alpha-row {
  border-top: 1px solid #eef2f6;
  font-size: 0.92rem;
}

.status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.status--good {
  background: #e8f7f0;
  color: #1f8a59;
}

.status--watch {
  background: #fff3db;
  color: #9d6b00;
}

.split-cards {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

.news-stream,
.watchlist {
  padding: 8px 0;
}

.news-item,
.watchlist-row {
  padding: 12px 16px;
}

.news-item + .news-item,
.watchlist-row + .watchlist-row {
  border-top: 1px solid #eef2f6;
}

.news-item__meta,
.watchlist-row span {
  color: #7f8797;
  font-size: 0.82rem;
}

.news-item h3 {
  margin: 7px 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: #373e47;
}

.news-item a {
  color: var(--blue);
  text-decoration: none;
  font-size: 0.88rem;
}

.watchlist-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.watchlist-row strong {
  font-weight: 600;
}

.tag-up { color: #1f8a59; }
.tag-flat { color: #a36c07; }