.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s; }
.card:hover { border-color: rgba(75,142,240,0.15); }
.card-glow:hover { box-shadow: 0 0 22px rgba(37,99,200,0.07); }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card { padding: 18px 20px; }
.stat-card .sc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.stat-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.stat-badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
.badge-green { background: rgba(22,163,74,0.14); color: var(--green); }
.badge-red   { background: rgba(220,38,38,0.14);  color: var(--red); }
.badge-blue  { background: rgba(75,142,240,0.14); color: var(--primary2); }
.stat-val   { font-size: 26px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.badge-connected { background:rgba(22,163,74,0.1); color:var(--green); font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600; }

.chart-card-title { font-size:13.5px; font-weight:600; padding:16px 18px 12px; border-bottom:1px solid var(--border); }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(34,197,94,0.7);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 6px rgba(34,197,94,0.7); }
  50%      { transform: scale(1.5); opacity: 0.6; box-shadow: 0 0 14px rgba(34,197,94,0.5); }
}