/* =====================================================
   STATS LAYOUT: GitHub (left) + LeetCode/TUF stacked (right)
   ===================================================== */
.stats-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.stats-col .gh-card { flex: 1; }

/* =====================================================
   TAKEUFORWARD CARD
   ===================================================== */
.tuf-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}
.tuf-top {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tuf-total {
  flex: none;
  min-width: 92px;
  text-align: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, rgba(0, 245, 255, 0.12), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(0, 245, 255, 0.22);
}
.tuf-total-num {
  display: block;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, #00f5ff, #a855f7);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tuf-total-lbl {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.tuf-breakdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.tuf-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
}
.tuf-diff {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.tuf-diff.easy   { color: #2cbb5d; }
.tuf-diff.medium { color: #ffb800; }
.tuf-diff.hard   { color: #ff4d5e; }
.tuf-bar {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.tuf-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tuf-bar.easy   > i { background: linear-gradient(90deg, #1f9d55, #2cbb5d); }
.tuf-bar.medium > i { background: linear-gradient(90deg, #d99400, #ffb800); }
.tuf-bar.hard   > i { background: linear-gradient(90deg, #d13444, #ff4d5e); }
.tuf-count {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text, #e6ecf5);
  white-space: nowrap;
}
.tuf-count b { color: #fff; }
.tuf-count .den { color: var(--muted); font-weight: 400; }

@media (max-width: 900px) {
  .tuf-top { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  .tuf-bar > i { transition: none !important; }
}

.gh-status .live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green, #2cbb5d);
  margin-right: 6px;
  box-shadow: 0 0 8px rgba(44, 187, 93, 0.85);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .gh-status .live-dot { animation: none !important; }
}