.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-title h1 {
  font-size: 28px;
  margin: 0 0 6px;
}

.dashboard-title p {
  margin: 0;
  color: var(--muted);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 1.8s infinite;
  display: inline-block;
  margin-right: 6px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-mid);
}

.stat-card:nth-child(1)::after {
  background: radial-gradient(circle at 20% 20%, var(--accent-sky-soft), transparent 60%);
}

.stat-card:nth-child(2)::after {
  background: radial-gradient(circle at 20% 20%, var(--accent-gold-soft), transparent 60%);
}

.stat-card:nth-child(3)::after {
  background: radial-gradient(circle at 20% 20%, var(--accent-warm-soft), transparent 60%);
}

.stat-card:nth-child(4)::after {
  background: radial-gradient(circle at 20% 20%, var(--accent-soft), transparent 60%);
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 120px;
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
}

.stat-value {
  font-size: 26px;
  font-weight: 600;
}

.stat-trend {
  font-size: 13px;
  color: var(--accent);
}

.stat-card:nth-child(1) .stat-trend { color: var(--accent-sky); }
.stat-card:nth-child(2) .stat-trend { color: var(--accent-gold); }
.stat-card:nth-child(3) .stat-trend { color: var(--accent-warm); }

.sparkline {
  height: 36px;
  width: 100%;
}

.stat-card:nth-child(1) .sparkline path { stroke: var(--accent-sky); }
.stat-card:nth-child(2) .sparkline path { stroke: var(--accent-gold); }
.stat-card:nth-child(3) .sparkline path { stroke: var(--accent-warm); }

.sparkline path {
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: draw 2.4s ease forwards;
}

.dash-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: 16px;
}

.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-mid);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-title {
  font-weight: 600;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 10px;
  height: 200px;
}

.bar {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-fade) 100%);
  border-radius: 12px 12px 6px 6px;
  position: relative;
  height: 20%;
  animation: grow 1.8s ease forwards;
}

.bar:nth-child(1) { background: linear-gradient(180deg, var(--accent-sky) 0%, var(--accent-sky-fade) 100%); }
.bar:nth-child(2) { background: linear-gradient(180deg, var(--accent-gold) 0%, var(--accent-gold-fade) 100%); }
.bar:nth-child(3) { background: linear-gradient(180deg, var(--accent-warm) 0%, var(--accent-warm-fade) 100%); }
.bar:nth-child(4) { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-fade) 100%); }
.bar:nth-child(5) { background: linear-gradient(180deg, var(--accent-sky) 0%, var(--accent-sky-fade) 100%); }
.bar:nth-child(6) { background: linear-gradient(180deg, var(--accent-gold) 0%, var(--accent-gold-fade) 100%); }

.bar::after {
  content: "";
  position: absolute;
  inset: 10% 15% auto 15%;
  height: 8px;
  background: var(--highlight);
  border-radius: 999px;
}

.bar span {
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.donut-wrap {
  display: grid;
  place-items: center;
  padding: 10px 0;
}

.donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 62%, var(--accent-warm) 62% 78%, var(--accent-sky) 78% 90%, var(--accent-ghost-strong) 90% 100%);
  position: relative;
  animation: spinIn 1.4s ease;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  background: var(--card);
  border-radius: 50%;
  border: 1px solid var(--border);
}

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 22px;
}

.list-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-mid);
}

.article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.article-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-mid);
  background: var(--card);
}

.article-item strong {
  font-weight: 600;
}

.article-meta {
  font-size: 12px;
  color: var(--muted);
}

.topic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-chip {
  background: var(--accent-ghost);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topic-chip .hot {
  color: var(--accent-warm);
}

.activity-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-mid);
}

.activity-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}

.activity-row:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.activity-row:nth-child(2) .activity-icon {
  background: var(--accent-warm-soft);
  color: var(--accent-warm);
}

.activity-row:nth-child(3) .activity-icon {
  background: var(--accent-sky-soft);
  color: var(--accent-sky);
}

.activity-meta {
  font-size: 12px;
  color: var(--muted);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes grow {
  from { height: 15%; }
  to { height: var(--h); }
}

@keyframes spinIn {
  from { transform: rotate(-20deg) scale(0.96); opacity: 0.6; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-grid {
    grid-template-columns: 1fr;
  }
}

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

.stat-card,
.chart-card,
.list-card,
.activity-card {
  border-radius: var(--radius-lg);
}

.article-item {
  border-radius: var(--radius-sm);
}

.bar {
  border-radius: var(--radius-sm) var(--radius-sm) 8px 8px;
}

.topic-chip {
  border-radius: 999px;
}