/* darkboard.css — dark dashboard theme
 * Drop-in styles for Tailwind CSS dark dashboards.
 * Requires: Tailwind CSS (CDN or build), anime.js (optional, for animations)
 *
 * Usage:
 *   <link href="darkboard.css" rel="stylesheet" />
 *   <script src="darkboard-tailwind.js"></script>  <!-- before tailwind -->
 *   <script src="darkboard.js"></script>            <!-- before </body> -->
 */

/* ── Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

body {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8em;
}

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(6px);
}

/* ── Hero glow ─────────────────────────────────────── */
.glow {
  box-shadow:
    0 0 30px rgba(99, 102, 241, 0.35),
    0 0 80px rgba(99, 102, 241, 0.15);
}

.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08) 0%,
    rgba(139, 92, 246, 0.06) 50%,
    rgba(99, 102, 241, 0.03) 100%
  );
}

/* ── Progress bars ─────────────────────────────────── */
.bar-fill {
  width: 0;
}

.coverage-seg {
  height: 100%;
  display: inline-block;
  transition: width 1.2s ease-out;
}

/* ── Animations (initial states, animated by darkboard.js) */
.count-up {
  opacity: 0;
}

.tag-anim {
  opacity: 0;
  transform: translateY(4px);
}