/* ──────────────────────────────────────────────────────────────────────────
   Streaks + XP + Badges widget (research §1.3 deловой стиль)
   ────────────────────────────────────────────────────────────────────────── */

.stats-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: center;
}

.stats-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.stats-level-ring {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-level-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.stats-level-ring-bg { stroke: var(--c-surface-2); }
.stats-level-ring-fg {
  stroke: var(--c-primary);
  transition: stroke-dashoffset var(--t-normal) var(--e-out);
}
.stats-level-num {
  position: relative;
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--c-primary-text);
  line-height: 1;
}
.stats-level-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  margin-top: 4px;
}

.stats-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
}
.stats-item {
  display: flex;
  flex-direction: column;
}
.stats-item-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stats-item-suffix {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  text-transform: lowercase;
}
.stats-item-label {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.stats-item.is-streak-active .stats-item-value { color: #b45309; }
.stats-item.is-streak-broken .stats-item-value { color: var(--c-text-muted); }

.stats-progress-row {
  margin-top: var(--s-4);
  grid-column: 1 / -1;
}
.stats-progress-bar {
  height: 6px;
  background: var(--c-surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}
.stats-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), #2563eb);
  border-radius: 999px;
  transition: width var(--t-normal) var(--e-out);
}
.stats-progress-hint {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* Badges row */
.badges-row {
  margin-top: var(--s-4);
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--c-text);
  font-weight: var(--fw-medium);
}
.badge-pill svg { color: var(--c-primary-text); }
.badge-pill.is-cert { background: #fef3c7; border-color: #fbbf24; color: #78350f; }
.badge-pill.is-cert svg { color: #b45309; }
.badge-pill.is-streak { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.badge-pill.is-streak svg { color: #b91c1c; }
.badge-pill.is-level { background: var(--c-primary-soft); border-color: rgba(30,58,138,0.25); color: var(--c-primary-text); }
.badge-pill.is-level svg { color: var(--c-primary); }

@media (max-width: 720px) {
  .stats-card { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-4); }
  .stats-level { flex-direction: row; gap: var(--s-3); }
  .stats-level-ring { width: 72px; height: 72px; }
  .stats-level-num { font-size: 24px; }
  .stats-body { grid-template-columns: 1fr 1fr; }
}