/* =============================================================
   Breachforge — Fusion-style Dark Premium SaaS
   Fonts: Plus Jakarta Sans (display) + DM Sans (body)
   Palette: Deep dark + orange/blue accent gradients + glass
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg: #08080e;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-solid: #0f0f18;
  --bg-elevated: rgba(255,255,255,0.06);
  --text: #ffffff;
  --text-secondary: rgba(255,255,255,0.55);
  --text-muted: rgba(255,255,255,0.3);
  --accent: #E8590C;
  --accent-2: #ff7b33;
  --blue: #3b82f6;
  --blue-light: #60a5fa;
  --border: rgba(255,255,255,0.07);
  --border-glow: rgba(232,89,12,0.25);
  --php: #a78bfa;
  --python: #60a5fa;
  --node: #34d399;
  --green: #22c55e;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', 'JetBrains Mono', monospace;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(232,89,12,0.12); color: var(--accent-2); padding: 2px 7px; border-radius: 5px; }

.section-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

/* ---- Reveal animation ---- */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  padding: 0.8rem 1.6rem; border-radius: 100px; border: none; cursor: pointer;
  transition: all 0.3s var(--ease); text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; box-shadow: 0 0 24px rgba(232,89,12,0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(232,89,12,0.5); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
.btn.lg { padding: 1rem 2.2rem; font-size: 1rem; }
.arrow-icon { display: inline-flex; }

/* ============ NAVBAR ============ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(8, 8, 14, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
}
.navbar.scrolled { border-bottom-color: var(--border); background: rgba(8,8,14,0.92); }
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0.9rem 2rem;
  display: flex; align-items: center; gap: 2rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }
.nav-links { display: flex; gap: 1.75rem; margin-left: auto; font-size: 0.92rem; font-weight: 500; color: var(--text-secondary); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  border: 1px solid var(--accent); color: var(--accent-2); padding: 0.55rem 1.2rem; border-radius: 100px;
  transition: all 0.3s var(--ease);
}
.nav-cta:hover { background: var(--accent); color: #fff; box-shadow: 0 0 20px rgba(232,89,12,0.3); }

/* ============ HERO ============ */
.hero {
  position: relative; padding: 9rem 0 5rem; overflow: hidden; min-height: 100vh;
  display: flex; align-items: center;
}
/* Diagonal light streaks */
.hero-streaks {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.hero-streaks::before, .hero-streaks::after {
  content: ''; position: absolute; width: 200px; height: 150%;
  top: -25%; filter: blur(60px); opacity: 0.35;
}
.hero-streaks::before {
  right: 15%; transform: rotate(-25deg);
  background: linear-gradient(180deg, transparent, var(--accent), var(--accent-2), transparent);
}
.hero-streaks::after {
  right: 25%; transform: rotate(-25deg);
  background: linear-gradient(180deg, transparent, var(--blue), var(--blue-light), transparent);
  opacity: 0.2;
}
.hero-glow {
  position: absolute; width: 600px; height: 600px; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,89,12,0.06), transparent 70%);
  border-radius: 50%; z-index: 0;
}
.hero-inner {
  position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; gap: 4rem;
}
.hero-text { flex: 1; min-width: 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  color: var(--accent-2); background: rgba(232,89,12,0.08);
  border: 1px solid rgba(232,89,12,0.2); padding: 0.4rem 1rem; border-radius: 100px;
  margin-bottom: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero-text h1 {
  font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1.5rem;
}
.hero-text h1 .gradient-word {
  background: linear-gradient(135deg, var(--accent), var(--accent-2), #fbbf24);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.65; max-width: 480px; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ============ NETWORK GRAPH ============ */
.hero-network-wrap {
  flex: 0 0 540px; display: flex; align-items: center; justify-content: center;
}
.net-graph {
  position: relative; width: 520px; height: 520px;
}
#net-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
}

/* Center core */
.net-core {
  position: absolute; z-index: 10; width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #2a1a0a, #1a0e05 55%, #0d0600);
  box-shadow: 0 0 0 1px rgba(232,89,12,0.25), 0 0 40px rgba(232,89,12,0.18), 0 0 80px rgba(232,89,12,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transform: translate(-50%, -50%); transition: box-shadow 0.4s, transform 0.3s var(--ease);
}
.net-core span {
  font-family: var(--font-display); font-size: 0.65rem; font-weight: 800;
  color: var(--accent-2); letter-spacing: 0.08em;
}
.net-core:hover {
  box-shadow: 0 0 0 1px rgba(232,89,12,0.4), 0 0 60px rgba(232,89,12,0.3), 0 0 100px rgba(232,89,12,0.12);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Family nodes (category hubs) */
.net-family {
  position: absolute; z-index: 5; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  color: #fff; background: rgba(232,89,12,0.12);
  border: 1px solid rgba(232,89,12,0.3); padding: 0.35rem 0.75rem; border-radius: 100px;
  cursor: default; user-select: none; white-space: nowrap;
  transition: all 0.3s var(--ease);
}
.net-family::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 6px rgba(232,89,12,0.5);
}
.net-family:hover, .net-family.active {
  background: rgba(232,89,12,0.22); border-color: rgba(232,89,12,0.5);
  box-shadow: 0 0 20px rgba(232,89,12,0.15);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Child vuln nodes */
.net-child {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 600;
  color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07); padding: 0.22rem 0.55rem; border-radius: 100px;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: all 0.3s var(--ease); opacity: 0.7;
}
.net-child::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}
.net-child.s-php::before { background: var(--php); }
.net-child.s-python::before { background: var(--python); }
.net-child.s-node::before { background: var(--node); }
.net-child:hover {
  color: #fff; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 16px rgba(232,89,12,0.4);
  transform: translate(-50%, -50%) scale(1.15); opacity: 1; z-index: 15;
}
.net-child.node-coming {
  opacity: 0.25; cursor: default;
}
.net-child.node-coming:hover {
  color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.07); box-shadow: none;
  transform: translate(-50%, -50%); opacity: 0.25;
}
/* Highlight children when their family is hovered */
.net-child.highlight { opacity: 1; color: rgba(255,255,255,0.85); border-color: rgba(232,89,12,0.2); }

/* ============ SECTION HEADER ============ */
.section-header { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.section-header .section-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  color: var(--accent-2); background: rgba(232,89,12,0.08);
  border: 1px solid rgba(232,89,12,0.15); padding: 0.35rem 0.9rem; border-radius: 100px;
  margin-bottom: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.section-header h2 {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800;
  letter-spacing: -0.025em; margin-bottom: 0.75rem; line-height: 1.1;
}
.section-header p { font-size: 1rem; color: var(--text-secondary); line-height: 1.65; }

/* ============ BENTO FEATURES ============ */
.features { padding: 5rem 0; }
.bento-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.bento-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 2rem; position: relative; overflow: hidden;
  transition: all 0.4s var(--ease);
}
.bento-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(232,89,12,0.03), transparent 50%);
  pointer-events: none;
}
.bento-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.bento-card.wide { grid-column: span 2; }
.bento-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem; }
.bento-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; max-width: 400px; }
.bento-card .bento-bullets { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bento-bullet {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; font-weight: 500;
}
.bento-bullet-icon {
  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(232,89,12,0.15), rgba(59,130,246,0.1));
  font-size: 0.8rem; flex-shrink: 0;
}

/* Terminal mockup inside bento cards */
.bento-visual {
  margin-top: 1.5rem; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: rgba(0,0,0,0.4);
}
.bento-terminal {
  background: #0a0a12; border-radius: var(--radius); overflow: hidden;
}
.term-bar { display: flex; gap: 0.3rem; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.05); }
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
.term-dot.r { background: #ef4444; } .term-dot.y { background: #eab308; } .term-dot.g { background: #22c55e; }
.term-code {
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.7;
  padding: 1rem; color: rgba(255,255,255,0.4); white-space: pre-wrap; word-break: break-all;
}
.term-prompt { color: var(--green); }
.term-hl { color: var(--accent-2); }
.term-success { color: var(--green); font-weight: 700; }
.term-dim { opacity: 0.35; }

/* Action list mockup */
.bento-actions-list {
  margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.bento-action-item {
  display: flex; align-items: center; gap: 0.65rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 0.65rem 0.9rem;
  font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.7);
  transition: all 0.2s;
}
.bento-action-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.bento-action-icon {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.bento-action-icon.php-bg { background: rgba(167,139,250,0.15); }
.bento-action-icon.py-bg { background: rgba(96,165,250,0.15); }
.bento-action-icon.node-bg { background: rgba(52,211,153,0.15); }
.bento-action-icon.docker-bg { background: rgba(36,150,237,0.15); }
.bento-action-icon.flag-bg { background: rgba(232,89,12,0.15); }

/* Flow diagram mockup */
.bento-flow {
  margin-top: 1.25rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
}
.flow-node {
  font-size: 0.75rem; font-weight: 600; padding: 0.45rem 0.9rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.65); transition: all 0.2s;
}
.flow-node.active-node { border-color: var(--accent); color: var(--accent-2); background: rgba(232,89,12,0.08); }
.flow-arrow { color: var(--text-muted); font-size: 0.7rem; }

/* ============ CATEGORY STRIP ============ */
.categories-section { padding: 3rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.categories-grid {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 1.25rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-card); min-width: 130px;
  transition: all 0.3s var(--ease); cursor: default;
}
.cat-card:hover { border-color: rgba(232,89,12,0.25); background: rgba(232,89,12,0.04); transform: translateY(-3px); }
.cat-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(232,89,12,0.1), rgba(59,130,246,0.08));
  border: 1px solid rgba(255,255,255,0.06);
}
.cat-label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }

/* ============ STATS ============ */
.stats-section { padding: 4rem 0; }
.stats-grid { display: flex; justify-content: center; gap: 5rem; flex-wrap: wrap; }
.stat-block { text-align: center; }
.stat-big { font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #fff, rgba(255,255,255,0.6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-text { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; margin-top: 0.3rem; }
.stat-stars { color: #eab308; font-size: 1.1rem; margin-top: 0.15rem; }

/* ============ LEADERBOARD ============ */
/* ============ LEADERBOARD ============ */
.leaderboard-section {
  padding: 5rem 0;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.leaderboard-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 30% -5%, rgba(232,89,12,0.08), transparent 60%),
    radial-gradient(500px 300px at 70% 100%, rgba(99,102,241,0.04), transparent 50%);
  pointer-events: none;
}

.lb-container {
  max-width: 860px;
  margin: 0 auto;
}

/* ── Controls bar: tabs + search + period ── */
.lb-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.lb-controls-right {
  display: flex; align-items: center; gap: 0.5rem;
}
.lb-tabs {
  display: flex; gap: 0.3rem;
  padding: 0.2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.lb-tab {
  background: none; border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.lb-tab:hover { color: var(--text-secondary); }
.lb-tab.active {
  background: rgba(232,89,12,0.14);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(232,89,12,0.08);
}
.lb-search-wrap {
  position: relative;
  display: flex; align-items: center;
}
.lb-search-icon {
  position: absolute; left: 10px;
  color: var(--text-muted); pointer-events: none;
}
.lb-search {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.4rem 0.6rem 0.4rem 2rem;
  font-size: 0.78rem; font-family: var(--font-body);
  color: var(--text); width: 160px;
  transition: border-color 0.2s, width 0.3s;
}
.lb-search:focus {
  outline: none; border-color: rgba(232,89,12,0.3);
  width: 200px;
}
.lb-search::placeholder { color: var(--text-muted); }
.lb-period {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem; font-family: var(--font-body);
  color: var(--text); cursor: pointer;
  transition: border-color 0.2s;
}
.lb-period:focus { outline: none; border-color: rgba(232,89,12,0.3); }
.lb-period option { background: var(--bg); color: var(--text); }

/* ── My rank banner ── */
.lb-my-rank {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(135deg, rgba(232,89,12,0.08), rgba(232,89,12,0.03));
  border: 1px solid rgba(232,89,12,0.18);
  border-radius: 12px;
  margin-bottom: 1.4rem;
  position: relative;
  overflow: hidden;
}
.lb-my-rank::before {
  content: "";
  position: absolute; top: -30px; right: -30px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(232,89,12,0.06);
  pointer-events: none;
}
.lb-my-left {
  display: flex; align-items: center; gap: 0.6rem;
}
.lb-my-rank-badge {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(232,89,12,0.3);
}
.lb-my-label {
  font-size: 0.7rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.lb-my-stats {
  display: flex; gap: 1.2rem;
}
.lb-my-stat-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
.lb-my-stat-val {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 800; color: var(--text);
}
.lb-my-stat-val.lb-accent { color: var(--accent); }
.lb-my-stat-lbl {
  font-size: 0.6rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Podium — top 3 ── */
.lb-podium {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
  min-height: 180px;
}
.lb-podium-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.2rem 1.4rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
  min-width: 135px;
  position: relative;
  animation: lb-slideUp 0.5s ease-out both;
}
.lb-podium-card:nth-child(1) { animation-delay: 0.15s; }
.lb-podium-card:nth-child(2) { animation-delay: 0s; }
.lb-podium-card:nth-child(3) { animation-delay: 0.3s; }
@keyframes lb-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lb-podium-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.lb-podium-card.first {
  padding: 1.6rem 1.8rem 1.2rem;
  min-width: 155px;
  border-color: rgba(255,215,0,0.25);
  background: linear-gradient(165deg, rgba(255,215,0,0.06), rgba(255,215,0,0.01));
  box-shadow: 0 8px 30px rgba(255,215,0,0.08), 0 0 60px rgba(255,215,0,0.03);
}
.lb-podium-card.gold   { border-color: rgba(255,215,0,0.2); }
.lb-podium-card.silver { border-color: rgba(192,192,192,0.2); background: linear-gradient(165deg, rgba(192,192,192,0.04), transparent); }
.lb-podium-card.bronze { border-color: rgba(205,127,50,0.2); background: linear-gradient(165deg, rgba(205,127,50,0.04), transparent); }

/* Rank number glow */
.lb-podium-rank {
  font-size: 1.6rem; margin-bottom: 0.4rem;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.1));
}
.lb-podium-card.first .lb-podium-rank {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.3));
  animation: lb-crownPulse 3s ease-in-out infinite;
}
@keyframes lb-crownPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,215,0,0.3)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,215,0,0.5)); }
}

.lb-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; margin-bottom: 0.5rem;
  border: 2px solid rgba(255,255,255,0.1);
  transition: border-color 0.2s;
}
.lb-podium-card.first .lb-avatar {
  width: 56px; height: 56px;
  border-color: rgba(255,215,0,0.3);
  box-shadow: 0 0 20px rgba(255,215,0,0.1);
}
.lb-podium-card.silver .lb-avatar { border-color: rgba(192,192,192,0.25); }
.lb-podium-card.bronze .lb-avatar { border-color: rgba(205,127,50,0.25); }
.lb-avatar.lb-avatar-initial {
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  background: var(--accent); color: #fff;
}

.lb-podium-name {
  font-size: 0.85rem; font-weight: 700; color: var(--text);
  margin-bottom: 0.3rem;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-podium-stat { text-align: center; }
.lb-podium-stat strong {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800; color: var(--text);
  display: block; line-height: 1;
}
.lb-podium-card.first .lb-podium-stat strong {
  font-size: 1.8rem;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lb-podium-stat span {
  font-size: 0.6rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.lb-podium-pct {
  margin-top: 0.4rem;
  font-size: 0.58rem; color: var(--text-muted);
  opacity: 0.6; letter-spacing: 0.02em;
}

/* ── Category breakdown ── */
.lb-breakdown {
  margin-bottom: 1.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
}
.lb-breakdown-title {
  font-size: 0.65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 0.7rem;
}
.lb-breakdown-bars {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.6rem;
}
.lb-bar-item {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.lb-bar-label {
  font-size: 0.65rem; color: var(--text-muted);
  display: flex; justify-content: space-between;
}
.lb-bar-label span:last-child { color: var(--text-secondary); font-weight: 600; }
.lb-bar-track {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.lb-bar-fill {
  height: 100%; border-radius: 2px;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(0.25,1,0.5,1);
}

/* ── Table (4th onward) ── */
.lb-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.015);
}
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.lb-table thead th {
  padding: 0.6rem 0.8rem;
  text-align: left;
  font-size: 0.65rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
.lb-table thead th.lb-th-rank { width: 42px; text-align: center; }
.lb-table thead th.lb-th-challenges,
.lb-table thead th.lb-th-labs,
.lb-table thead th.lb-th-total,
.lb-table thead th.lb-th-time { text-align: center; }

.lb-row {
  animation: lb-fadeRow 0.3s ease-out both;
}
.lb-row:nth-child(1) { animation-delay: 0.05s; }
.lb-row:nth-child(2) { animation-delay: 0.1s; }
.lb-row:nth-child(3) { animation-delay: 0.15s; }
.lb-row:nth-child(4) { animation-delay: 0.2s; }
.lb-row:nth-child(5) { animation-delay: 0.25s; }
@keyframes lb-fadeRow {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lb-row td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.15s;
}
.lb-row:hover td { background: rgba(232,89,12,0.03); }
.lb-row:last-child td { border-bottom: none; }
.lb-row.lb-highlight td { background: rgba(232,89,12,0.06); }

.lb-row-rank {
  text-align: center;
  font-weight: 700; color: var(--text-muted);
  font-size: 0.78rem;
}
.lb-row-rank .lb-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  font-size: 0.72rem; font-weight: 800;
}
.lb-rank-4 { background: rgba(255,255,255,0.04); color: var(--text-secondary); }
.lb-rank-5 { background: rgba(255,255,255,0.03); color: var(--text-muted); }

.lb-row-user {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--text);
}
.lb-row-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.lb-row-avatar.lb-avatar-initial {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  background: var(--accent); color: #fff;
}
.lb-row-challenges,
.lb-row-labs,
.lb-row-total,
.lb-row-time { text-align: center; color: var(--text-secondary); }
.lb-row-total { font-weight: 700; color: var(--accent); }
.lb-row-time { font-size: 0.7rem; color: var(--text-muted); }

.lb-loading {
  text-align: center; padding: 2rem; color: var(--text-muted);
  font-size: 0.82rem;
}

/* Empty state */
.lb-empty {
  text-align: center; padding: 3rem 1rem;
  color: var(--text-muted);
}
.lb-empty-icon { opacity: 0.3; margin-bottom: 0.8rem; }
.lb-empty p { font-size: 0.85rem; }

/* Mobile */
@media (max-width: 640px) {
  .lb-controls { flex-direction: column; align-items: stretch; }
  .lb-controls-right { justify-content: space-between; }
  .lb-search { width: 100px; }
  .lb-search:focus { width: 130px; }
  .lb-podium { gap: 0.4rem; }
  .lb-podium-card { padding: 0.8rem 0.6rem; min-width: 90px; }
  .lb-podium-card.first { padding: 1rem 0.8rem; min-width: 105px; }
  .lb-podium-name { font-size: 0.75rem; max-width: 75px; }
  .lb-podium-stat strong { font-size: 1.1rem; }
  .lb-podium-card.first .lb-podium-stat strong { font-size: 1.3rem; }
  .lb-avatar { width: 36px; height: 36px; }
  .lb-podium-card.first .lb-avatar { width: 44px; height: 44px; }
  .lb-table { font-size: 0.75rem; }
  .lb-table thead th { font-size: 0.6rem; padding: 0.4rem 0.5rem; }
  .lb-row td { padding: 0.4rem 0.5rem; }
  .lb-my-rank { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .lb-my-stats { gap: 0.8rem; }
  .lb-th-time, .lb-row-time { display: none; }
  .lb-breakdown-bars { grid-template-columns: 1fr 1fr; }
}

/* ============ SHOWCASE (DARK TERMINAL) ============ */
.showcase-section { padding: 5rem 0; }
.showcase-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.showcase-terminal {
  background: #0a0a12; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.showcase-content blockquote {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 1.5rem;
}
.showcase-author { margin-bottom: 2rem; }
.author-role { color: var(--text-muted); font-size: 0.88rem; }
.showcase-stats { display: flex; gap: 2.5rem; }
.ss-big { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; display: block; color: var(--accent-2); }
.ss-label { font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; }

/* ============ CHALLENGES ============ */
.challenges-section { padding: 5rem 0; }
.challenge-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.5rem; padding: 0.75rem 1rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.toolbar-stats { display: flex; gap: 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
.toolbar-stat strong { color: #fff; }
.stack-filters { display: flex; gap: 0.35rem; }
.filter-btn {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  padding: 0.4rem 0.8rem; border-radius: 100px; border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.35rem;
}
.filter-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 12px rgba(232,89,12,0.3); }
.fdot { width: 7px; height: 7px; border-radius: 50%; }
.fdot.php { background: var(--php); } .fdot.python { background: var(--python); } .fdot.node { background: var(--node); }

.vuln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.vuln-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; cursor: pointer; transition: all 0.3s var(--ease);
  animation: fadeUp 0.4s var(--ease) both;
}
.vuln-card:hover { border-color: rgba(232,89,12,0.3); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(232,89,12,0.08); }
.vuln-card.disabled { opacity: 0.2; cursor: not-allowed; pointer-events: none; }
.vc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.vc-num { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.vc-status { font-size: 0.65rem; font-weight: 600; }
.vc-status.ready { color: var(--green); }
.vc-status.coming { color: var(--text-muted); }
.vc-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.vc-stack {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 100px;
}
.vc-stack::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.vc-stack.s-php { color: var(--php); background: rgba(167,139,250,0.1); } .vc-stack.s-php::before { background: var(--php); }
.vc-stack.s-python { color: var(--python); background: rgba(96,165,250,0.1); } .vc-stack.s-python::before { background: var(--python); }
.vc-stack.s-node { color: var(--node); background: rgba(52,211,153,0.1); } .vc-stack.s-node::before { background: var(--node); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============ CTA ============ */
.cta-section { padding: 6rem 0; position: relative; overflow: hidden; }
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(232,89,12,0.06), transparent);
}
.cta-box { text-align: center; max-width: 600px; margin: 0 auto; position: relative; z-index: 1; }
.cta-box h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.cta-box p { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.cta-code {
  display: inline-block; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-muted); padding: 0.7rem 1.4rem;
  border-radius: 12px; font-family: var(--font-mono); font-size: 0.88rem; margin-bottom: 1.5rem;
}
.cta-code code { background: none; color: var(--green); padding: 0; }

/* ============ FOOTER ============ */
.site-footer { border-top: 1px solid var(--border); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.footer-tagline { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }
.footer-col h4 { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.75rem; }
.footer-col a { display: block; font-size: 0.88rem; padding: 0.25rem 0; color: var(--text-secondary); transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; font-size: 0.78rem; color: var(--text-muted); text-align: center; }

/* ============ DETAIL OVERLAY ============ */
.detail-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 2rem;
}
.detail-overlay[hidden] { display: none !important; pointer-events: none !important; }

/* Force all hidden modals to truly disappear */
.bf-rec-modal[hidden],
.bf-auth-modal[hidden] { display: none !important; pointer-events: none !important; }
.detail-panel {
  position: relative; width: 100%; max-width: 520px; max-height: 90vh;
  background: var(--bg-card-solid); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 40px rgba(232,89,12,0.08);
  animation: panelIn 0.3s var(--ease);
  overflow-y: auto; overflow-x: hidden;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }
.detail-close {
  position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text-secondary); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
  z-index: 10;
}
.detail-close:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.detail-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.detail-number {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--accent-2);
  background: rgba(232,89,12,0.1); padding: 0.3rem 0.6rem; border-radius: 6px;
}
.detail-header h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.detail-meta { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.detail-stack, .detail-status, .detail-tier {
  font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 100px;
}
.detail-status { background: rgba(34,197,94,0.1); color: var(--green); }
.detail-mark-host {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.detail-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.25rem; }
.launch-controls { display: flex; align-items: flex-end; gap: 0.75rem; }
.difficulty-label { display: flex; flex-direction: column; gap: 0.25rem; }
.label-text { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.select-wrapper select {
  appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: 0.85rem;
  background: rgba(255,255,255,0.04); color: #fff; border: 1px solid var(--border);
  padding: 0.55rem 2rem 0.55rem 0.75rem; border-radius: 10px; cursor: pointer; min-width: 120px;
}
.select-wrapper select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,89,12,0.15); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-sub { margin: 0 auto 2rem; }
  .hero-actions { justify-content: center; }
  .hero-network-wrap { flex: none; width: 100%; max-width: 420px; }
  .net-graph { width: 400px; height: 400px; }
  .net-core { width: 65px; height: 65px; }
  .net-family { font-size: 0.62rem; padding: 0.28rem 0.6rem; }
  .net-child { font-size: 0.55rem; padding: 0.18rem 0.4rem; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card.wide { grid-column: span 1; }
  .showcase-grid { grid-template-columns: 1fr; }
  .categories-grid { gap: 0.6rem; }
  .cat-card { min-width: 100px; padding: 0.9rem 1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .stats-grid { gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .launch-controls { flex-direction: column; align-items: stretch; }
  .categories-grid { gap: 0.5rem; }
  .cat-card { min-width: 80px; padding: 0.75rem 0.6rem; }
  .cat-icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .cat-label { font-size: 0.68rem; }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
::selection { background: rgba(232,89,12,0.3); color: #fff; }

/* ============ LABS TEASER (index.html) ============ */
.labs-teaser {
  padding: 5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.labs-teaser::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 30%, rgba(239,68,68,0.12), transparent 60%),
    radial-gradient(500px 400px at 15% 80%, rgba(232,89,12,0.10), transparent 55%);
  pointer-events: none;
}
.labs-teaser-box {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.8rem;
}
@media (max-width: 900px) {
  .labs-teaser-box { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
}
/* Labs teaser — eyebrow (refined, brand-accent) */
.labs-teaser-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  margin-bottom: 1.4rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1;
  backdrop-filter: blur(8px);
}
.labs-teaser-eyebrow .lte-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(232,89,12,0.18);
  flex-shrink: 0;
}
.labs-teaser-eyebrow .lte-label {
  color: #fafafa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.labs-teaser-eyebrow .lte-sep {
  width: 1px; height: 10px;
  background: rgba(255,255,255,0.14);
}
.labs-teaser-eyebrow .lte-meta {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.labs-teaser-copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.8rem 0 1rem;
}
.labs-teaser-copy p {
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.6rem;
  max-width: 560px;
}
.labs-teaser-copy strong { color: #fff; font-weight: 600; }
.labs-teaser-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.labs-teaser-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.labs-teaser-stat strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #E8590C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.labs-teaser-stat span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.labs-teaser-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.ltf-step {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: rgba(232,89,12,0.1);
  border: 1px solid rgba(232,89,12,0.25);
  color: #fff;
  white-space: nowrap;
}
.ltf-step.ltf-final {
  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.08));
  border-color: rgba(34,197,94,0.5);
  color: #bbf7d0;
}
.ltf-arrow { color: var(--text-muted); font-weight: 600; }

/* =============================================================
   TIER CHIPS + CAPTURED STATE ON CHALLENGE CARDS
   Added with the #13 Recommended Order System.
   ============================================================= */
.vc-meta {
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap;
}
.vc-tier {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.66rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: 100px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.vc-tier::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
}
.vc-tier.t-beginner     { color: #86efac; background: rgba(34,197,94,0.08); }
.vc-tier.t-beginner::before     { background: #22c55e; }
.vc-tier.t-intermediate { color: #fcd34d; background: rgba(245,158,11,0.08); }
.vc-tier.t-intermediate::before { background: #f59e0b; }
.vc-tier.t-advanced     { color: #fca5a5; background: rgba(239,68,68,0.08); }
.vc-tier.t-advanced::before     { background: #ef4444; }
.vc-tier.t-expert       { color: #f0abfc; background: rgba(217,70,239,0.10); }
.vc-tier.t-expert::before       { background: #d946ef; }

.vuln-card.captured { border-color: rgba(34,197,94,0.35); }
.vuln-card.captured::after {
  content: "\2713";
  position: absolute; top: 10px; right: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.5);
  color: #4ade80;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.vuln-card { position: relative; }

/* =============================================================
   DETAIL OVERLAY — Flag submission widget
   ============================================================= */
.bf-flag-submit {
  padding: 0.6rem 0;
}
.bf-flag-form {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.bf-flag-input-row {
  display: flex; gap: 0.5rem; align-items: center;
}
.bf-flag-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.bf-flag-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.bf-flag-input::placeholder { color: var(--text-muted); }

.bf-flag-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.bf-flag-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.bf-flag-btn:active { transform: translateY(0); }
.bf-flag-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.bf-flag-msg {
  font-size: 0.8rem;
  min-height: 1.2em;
}
.bf-flag-err { color: #f87171; }

.bf-flag-success {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: #86efac;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.4rem 0;
}
.bf-flag-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  border: 1px solid #22c55e;
  color: #4ade80;
  font-size: 12px;
  font-weight: 700;
}

.bf-flag-captured .bf-flag-input {
  border-color: rgba(34,197,94,0.35);
  color: #86efac;
}

/* =============================================================
   RECOMMENDATION MODAL — #13
   Launched when a user tries to run a challenge/lab whose prereqs
   they haven't marked as solved.
   ============================================================= */
.bf-rec-modal {
  position: fixed; inset: 0;
  background: rgba(8,8,14,0.78);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: bfRecFade 0.18s var(--ease);
}
@keyframes bfRecFade { from { opacity: 0; } to { opacity: 1; } }
.bf-rec-panel {
  position: relative;
  width: 100%; max-width: 560px;
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem 1.6rem;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 40px rgba(232,89,12,0.08);
  animation: bfRecPop 0.22s var(--ease);
}
@keyframes bfRecPop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bf-rec-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 10;
}
.bf-rec-close:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.15); }

.bf-rec-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.02);
}
.bf-rec-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,89,12,0.2);
}
.bf-rec-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  color: #fff;
}
.bf-rec-sub {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}
.bf-rec-sub strong { color: #fff; font-weight: 600; }

.bf-rec-list {
  display: flex; flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.bf-rec-item {
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s var(--ease);
}
.bf-rec-item:hover {
  border-color: rgba(232,89,12,0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 14px rgba(232,89,12,0.08);
}
.bf-rec-item-top {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.bf-rec-item-tier {
  font-size: 0.62rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 100px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bf-rec-item-tier.t-beginner     { color: #86efac; background: rgba(34,197,94,0.12); }
.bf-rec-item-tier.t-intermediate { color: #fcd34d; background: rgba(245,158,11,0.12); }
.bf-rec-item-tier.t-advanced     { color: #fca5a5; background: rgba(239,68,68,0.12); }
.bf-rec-item-tier.t-expert       { color: #f0abfc; background: rgba(217,70,239,0.12); }
.bf-rec-item-stack {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.bf-rec-item-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.bf-rec-item-cta {
  margin-top: 0.45rem;
  font-size: 0.8rem; font-weight: 600;
  color: var(--accent-2);
  display: inline-flex; align-items: center; gap: 0.35rem;
  opacity: 0.75;
  transition: opacity 0.15s, gap 0.15s;
}
.bf-rec-item:hover .bf-rec-item-cta { opacity: 1; gap: 0.55rem; }

.bf-rec-actions {
  display: flex; gap: 0.75rem; justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.bf-rec-anyway, .bf-rec-dismiss {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.18s;
  border: 1px solid transparent;
  background: transparent;
}
.bf-rec-dismiss { color: var(--text-muted); }
.bf-rec-dismiss:hover { color: #fff; background: rgba(255,255,255,0.04); }
.bf-rec-anyway {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.03);
}
.bf-rec-anyway:hover {
  border-color: var(--accent);
  color: var(--accent-2);
  background: rgba(232,89,12,0.06);
}

/* =============================================================
   POST-SOLVE EXPLANATION (Feature #3) — collapsible why / fix / deeper
   ============================================================= */
.detail-explain {
  margin-top: 1.25rem;
  animation: explainFadeIn 0.35s ease;
}
@keyframes explainFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.explain-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 1rem;
}
.explain-header {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #22c55e;
  margin-bottom: 0.85rem;
}
.explain-header svg { color: #22c55e; flex: 0 0 auto; }

.explain-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 0.55rem;
  overflow: hidden;
}
.explain-block[open] {
  background: rgba(34,197,94,0.03);
  border-color: rgba(34,197,94,0.2);
}
.explain-block-title {
  cursor: pointer;
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.explain-block-title::-webkit-details-marker { display: none; }
.explain-block-title::before {
  content: '\25B6';
  font-size: 0.55rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.explain-block[open] > .explain-block-title::before {
  transform: rotate(90deg);
  color: #22c55e;
}
.explain-block-title:hover {
  color: #22c55e;
}
.explain-block-body {
  margin: 0;
  padding: 0 1rem 0.85rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* =============================================================
   DETAIL METADATA (Feature #9) — attacker goal + CWE/OWASP/time/real-world
   ============================================================= */

/* --- Attacker goal callout --- */
.detail-goal {
  position: relative;
  margin: 0 0 1.25rem;
  padding: 0.95rem 1.1rem 1rem;
  background: linear-gradient(135deg, rgba(232,89,12,0.08), rgba(232,89,12,0.02));
  border: 1px solid rgba(232,89,12,0.25);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.detail-goal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.detail-goal-eyebrow svg {
  flex: 0 0 auto;
}
.detail-goal-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 500;
}

/* --- Metadata grid (CWE / OWASP / time + real-world) --- */
.detail-extra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 1.3rem;
}
.detail-extra-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 9px;
  min-width: 0;
}
.detail-extra-wide {
  grid-column: 1 / -1;
}
.detail-extra-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.detail-extra-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}
.detail-extra-realworld {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Subtle accent tint for the headline fields */
.detail-extra-item:nth-child(1) .detail-extra-value,
.detail-extra-item:nth-child(2) .detail-extra-value {
  font-family: "JetBrains Mono", "SF Mono", Consolas, ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

/* Responsive collapse */
@media (max-width: 560px) {
  .detail-extra {
    grid-template-columns: 1fr 1fr;
  }
}

/* =============================================================
   LABS PAGE — tier chip + captured pip on lab cards (reused)
   ============================================================= */
.lab-card .lab-tier {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.66rem; font-weight: 700;
  padding: 0.22rem 0.6rem; border-radius: 100px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0abfc; background: rgba(217,70,239,0.12);
}
.lab-card .lab-tier::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #d946ef;
}

/* =============================================================
   Feature #11 — Defensive View (Tabs + Blue-team Content)
   ============================================================= */

/* --- Tab bar --- */
.detail-tabs {
  display: flex; gap: 0; margin: 0 -2rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.detail-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary); background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 0.25s var(--ease);
  letter-spacing: 0.02em;
}
.detail-tab:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.detail-tab.active[data-tab="attack"] {
  color: var(--accent); border-bottom-color: var(--accent);
}
.detail-tab.active[data-tab="defend"] {
  color: var(--blue); border-bottom-color: var(--blue);
}
.detail-tab svg { flex-shrink: 0; }
.detail-tab.active[data-tab="attack"] svg { color: var(--accent); }
.detail-tab.active[data-tab="defend"] svg { color: var(--blue); }

.defend-lock-icon {
  display: inline-flex; color: var(--text-muted); margin-left: 0.15rem;
}

/* --- Tab content panels --- */
.detail-tab-content { display: none; }
.detail-tab-content.active { display: block; }

/* --- Defend: locked state --- */
.defend-locked {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 3rem 1.5rem; min-height: 280px;
}
.defend-locked-icon {
  color: var(--text-muted); margin-bottom: 1.2rem;
  opacity: 0.5;
}
.defend-locked-title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.5rem;
}
.defend-locked-desc {
  font-size: 0.85rem; color: var(--text-secondary);
  max-width: 340px; line-height: 1.55;
}

/* --- Defend: content sections --- */
.defend-content { padding: 1.5rem 0 0; }

.defend-section {
  margin-bottom: 1.5rem;
  background: rgba(59,130,246,0.04);
  border: 1px solid rgba(59,130,246,0.1);
  border-radius: 12px;
  overflow: hidden;
}
.defend-section-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.78rem; font-weight: 700;
  color: var(--blue-light);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(59,130,246,0.06);
  border-bottom: 1px solid rgba(59,130,246,0.08);
}
.defend-section-header svg { flex-shrink: 0; color: var(--blue); }

.defend-text {
  padding: 0.9rem 1rem;
  font-size: 0.82rem; line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.defend-code {
  padding: 0.9rem 1rem;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
  background: rgba(0,0,0,0.25);
  border: none; margin: 0;
}
.defend-code-fix {
  color: var(--green);
  background: rgba(34,197,94,0.04);
}

/* Animate defend content entrance */
.defend-content .defend-section {
  animation: defendFadeIn 0.4s var(--ease) both;
}
.defend-content .defend-section:nth-child(2) { animation-delay: 0.06s; }
.defend-content .defend-section:nth-child(3) { animation-delay: 0.12s; }
.defend-content .defend-section:nth-child(4) { animation-delay: 0.18s; }

@keyframes defendFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Responsive: mobile stacking --- */
@media (max-width: 560px) {
  .detail-tabs { margin: 0 -1.25rem; }
  .detail-tab { font-size: 0.78rem; padding: 0.65rem 0.5rem; }
  .defend-locked { padding: 2rem 1rem; min-height: 200px; }
  .defend-code { font-size: 0.7rem; }
}

/* =============================================================
   Auth Terminal + User Menu
   ============================================================= */

/* --- Auth modal overlay --- */
.bf-auth-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
  animation: termFadeIn 0.3s ease;
}
@keyframes termFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Terminal window --- */
.bf-term {
  position: relative;
  width: 600px; max-width: 95vw;
  max-height: 85vh;
  background: #0a0a0a;
  border: 1px solid #1a1a2e;
  border-radius: 12px;
  box-shadow: 0 30px 100px rgba(0,0,0,0.8), 0 0 60px rgba(232,89,12,0.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: termSlideUp 0.35s var(--ease);
}
@keyframes termSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* --- Title bar --- */
.bf-term-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: #0e0e14;
  border-bottom: 1px solid #1a1a2e;
  flex-shrink: 0;
}
.bf-term-dots {
  display: flex; gap: 6px;
}
.bf-term-dot {
  width: 11px; height: 11px; border-radius: 50%;
}
.bf-term-dot.r { background: #ff5f57; }
.bf-term-dot.y { background: #febc2e; }
.bf-term-dot.g { background: #28c840; }
.bf-term-bar-title {
  flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem;
  color: rgba(255,255,255,0.3); letter-spacing: 0.03em;
}
.bf-term-close {
  background: none; border: none; color: rgba(255,255,255,0.2);
  font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0;
  transition: color 0.15s;
}
.bf-term-close:hover { color: #ff5f57; }

/* --- Terminal body --- */
.bf-term-body {
  padding: 1.25rem 1.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: #b0b0b0;
  overflow-y: auto;
  flex: 1;
  min-height: 300px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.bf-term-body::-webkit-scrollbar { width: 6px; }
.bf-term-body::-webkit-scrollbar-track { background: transparent; }
.bf-term-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* --- Terminal text colors --- */
.t-green   { color: #22c55e; }
.t-orange  { color: #E8590C; }
.t-red     { color: #ef4444; }
.t-blue    { color: #60a5fa; }
.t-yellow  { color: #eab308; }
.t-cyan    { color: #22d3ee; }
.t-dim     { color: rgba(255,255,255,0.25); }
.t-bold    { font-weight: 700; color: #fff; }
.t-comment { color: rgba(255,255,255,0.2); font-style: italic; }

/* --- ASCII banner --- */
.bf-term-banner {
  color: #E8590C;
  white-space: pre;
  font-size: 0.62rem;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

/* --- Input line --- */
.bf-term-input-row {
  display: flex; align-items: center; gap: 0;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.bf-term-prompt {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: #E8590C; white-space: nowrap;
  user-select: none;
}
.bf-term-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: #22c55e; caret-color: #22c55e;
  padding: 0; margin: 0;
}
.bf-term-input::placeholder { color: rgba(255,255,255,0.15); }
.bf-term-input.password-mode { -webkit-text-security: disc; }

/* --- Blinking cursor for output lines --- */
@keyframes termBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.bf-term-cursor {
  display: inline-block; width: 7px; height: 14px;
  background: #22c55e; margin-left: 2px;
  animation: termBlink 1s infinite;
  vertical-align: text-bottom;
}

/* --- Access granted / denied flash --- */
.bf-term-access {
  padding: 1rem 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: termPulse 0.5s ease;
}
.bf-term-access.granted { color: #22c55e; text-shadow: 0 0 20px rgba(34,197,94,0.4); }
.bf-term-access.denied  { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,0.4); }
@keyframes termPulse {
  0%   { opacity: 0; transform: scale(0.95); }
  50%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Terminal OAuth button bar --- */
.bf-term-oauth {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
}
.bf-term-oauth-label {
  font-size: 0.7rem; color: rgba(255,255,255,0.35);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  white-space: nowrap;
}
.bf-term-oauth-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.bf-term-oauth-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.bf-term-oauth-btn svg {
  width: 14px; height: 14px; flex-shrink: 0;
}

/* --- User menu (navbar) --- */
.bf-user-menu { position: relative; }
.bf-user-trigger {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--border);
  border-radius: 100px; padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  cursor: pointer; transition: all 0.2s;
  color: var(--text); font-family: var(--font-body);
}
.bf-user-trigger:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }

.bf-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover;
}
.bf-user-avatar-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: white;
  font-size: 0.75rem; font-weight: 700;
}
.bf-user-name {
  font-size: 0.82rem; font-weight: 500;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bf-user-chevron { transition: transform 0.2s; flex-shrink: 0; }

/* --- Dropdown --- */
.bf-user-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 220px; background: var(--bg-card-solid);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 0.5rem 0; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 100;
}
.bf-user-dropdown-info { padding: 0.6rem 1rem; }
.bf-user-dropdown-name { font-size: 0.85rem; font-weight: 600; }
.bf-user-dropdown-email { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
.bf-user-dropdown-divider { height: 1px; background: var(--border); margin: 0.3rem 0; }
.bf-user-dropdown-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text-secondary);
  padding: 0.5rem 1rem; font-size: 0.82rem; cursor: pointer;
  font-family: var(--font-body); transition: all 0.15s;
}
.bf-user-dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
a.bf-user-dropdown-item { text-decoration: none; }
.bf-user-logout:hover { color: #ef4444; }

/* --- Mobile auth --- */
@media (max-width: 560px) {
  .bf-term { max-width: 100vw; border-radius: 0; max-height: 100vh; }
  .bf-term-banner { font-size: 0.42rem; }
  .bf-term-body { font-size: 0.75rem; min-height: 250px; }
  .bf-term-input { font-size: 0.75rem; }
  .bf-term-prompt { font-size: 0.75rem; }
  .bf-term-oauth { flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.6rem; }
  .bf-term-oauth-label { font-size: 0.65rem; }
  .bf-term-oauth-btn { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
  .bf-user-name { display: none; }
}

/* =============================================================
   NOTEBOOK (#8) — slide-out panel inside detail overlay
   ============================================================= */

.bf-notebook {
  position: absolute; inset: 0;
  background: rgba(10, 10, 14, 0.97);
  backdrop-filter: blur(12px);
  z-index: 50;
  display: none; flex-direction: column;
  border-radius: 16px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s, transform 0.25s;
  overflow: hidden;
}
.bf-notebook.open {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}
.bf-nb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.bf-nb-title-row {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text);
}
.bf-nb-title {
  font-size: 0.9rem; font-weight: 600;
}
.bf-nb-vuln-label {
  font-size: 0.75rem; color: var(--accent);
  background: rgba(232,89,12,0.1);
  padding: 0.15rem 0.5rem; border-radius: 100px;
}
.bf-nb-close {
  background: none; border: none;
  color: var(--text-muted); font-size: 1.4rem;
  cursor: pointer; line-height: 1; padding: 0.2rem;
  transition: color 0.15s;
}
.bf-nb-close:hover { color: var(--text); }

.bf-nb-body {
  flex: 1; overflow-y: auto;
  padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.bf-nb-body::-webkit-scrollbar { width: 5px; }
.bf-nb-body::-webkit-scrollbar-track { background: transparent; }
.bf-nb-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.bf-nb-section { display: flex; flex-direction: column; gap: 0.4rem; }
.bf-nb-label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.bf-nb-label-row {
  display: flex; align-items: center; justify-content: space-between;
}
.bf-nb-textarea {
  width: 100%; min-height: 140px; max-height: 300px; resize: vertical;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  color: var(--text); font-size: 0.82rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.6;
  transition: border-color 0.15s;
}
.bf-nb-textarea:focus {
  outline: none;
  border-color: rgba(232,89,12,0.4);
}
.bf-nb-textarea::placeholder { color: rgba(255,255,255,0.15); }

.bf-nb-add-payload {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted); border-radius: 6px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
}
.bf-nb-add-payload:hover {
  border-color: var(--accent); color: var(--accent);
}

.bf-nb-payloads {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.bf-nb-payload-row {
  display: flex; align-items: center; gap: 0.35rem;
}
.bf-nb-payload-input {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  color: #22c55e; font-size: 0.78rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  transition: border-color 0.15s;
}
.bf-nb-payload-input:focus {
  outline: none; border-color: rgba(34,197,94,0.4);
}
.bf-nb-payload-input::placeholder { color: rgba(255,255,255,0.12); }

.bf-nb-payload-copy, .bf-nb-payload-del {
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  padding: 0.25rem; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
}
.bf-nb-payload-copy:hover { color: var(--accent); }
.bf-nb-payload-del:hover { color: #ef4444; }

.bf-nb-footer {
  padding: 0.5rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: right;
}
.bf-nb-status {
  font-size: 0.68rem; color: var(--text-muted);
  transition: color 0.3s;
}
.bf-nb-status.flash { color: #22c55e; }

/* Actions row: mark-solved + notebook button side by side */
.detail-actions-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap;
}

/* Notebook trigger button inside detail overlay */
.bf-nb-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  color: var(--text-secondary);
  font-size: 0.78rem; font-family: var(--font-body);
  cursor: pointer; transition: all 0.15s;
}
.bf-nb-trigger:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: var(--text);
}
.bf-nb-trigger .nb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: none;
}
.bf-nb-trigger.has-notes .nb-dot { display: block; }

/* =============================================================
   BADGES & MILESTONES (#12)
   ============================================================= */

/* --- Toast notifications --- */
.bf-toast-host {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column-reverse; gap: 0.6rem;
  z-index: 11000;
  pointer-events: none;
}
.bf-toast {
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  min-width: 280px; max-width: 360px;
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s;
}
.bf-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.bf-toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

/* Tier accent border */
.bf-toast.tier-bronze  { border-left: 3px solid #cd7f32; }
.bf-toast.tier-silver  { border-left: 3px solid #c0c0c0; }
.bf-toast.tier-gold    { border-left: 3px solid #ffd700; }
.bf-toast.tier-platinum { border-left: 3px solid #e5e4e2; box-shadow: 0 0 20px rgba(229,228,226,0.1); }

.bf-toast-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bf-toast.tier-bronze  .bf-toast-icon { color: #cd7f32; }
.bf-toast.tier-silver  .bf-toast-icon { color: #c0c0c0; }
.bf-toast.tier-gold    .bf-toast-icon { color: #ffd700; }
.bf-toast.tier-platinum .bf-toast-icon { color: #e5e4e2; }

.bf-toast-icon svg { width: 24px; height: 24px; }
.bf-toast-text { display: flex; flex-direction: column; gap: 0.1rem; }
.bf-toast-label {
  font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.bf-toast-name {
  font-size: 0.85rem; font-weight: 700; color: var(--text);
}
.bf-toast-desc {
  font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35;
}

/* --- Navbar badge button --- */
.nav-badge-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  position: relative;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.nav-badge-btn:hover { color: var(--accent); }
.nav-badge-count {
  font-size: 0.65rem; font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  padding: 0.1rem 0.35rem;
  border-radius: 100px;
  min-width: 18px; text-align: center;
  transition: all 0.2s;
}
.nav-badge-count.has-badges {
  background: var(--accent);
  color: #fff;
}

/* --- Badge panel (modal overlay) --- */
.bf-badge-panel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
}
.bf-badge-panel:not([hidden]) {
  display: flex;
}
.bf-badge-panel-inner {
  background: var(--bg-card-solid, #0f0f14);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  width: 100%; max-width: 680px; max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.bf-badge-panel-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 1rem;
  position: relative;
}
.bf-badge-panel-title-row {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text);
}
.bf-badge-panel-title-row h3 {
  font-size: 1.05rem; font-weight: 700; margin: 0;
}
.bf-badge-panel-stats {
  font-size: 0.78rem; color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  padding: 0.2rem 0.6rem; border-radius: 100px;
}
.bf-badge-panel-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none;
  color: var(--text-muted); font-size: 1.4rem;
  cursor: pointer; line-height: 1; padding: 0.2rem;
  transition: color 0.15s;
}
.bf-badge-panel-close:hover { color: var(--text); }

.bf-badge-grid {
  padding: 1.2rem 1.5rem;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 0.8rem;
}
.bf-badge-grid::-webkit-scrollbar { width: 5px; }
.bf-badge-grid::-webkit-scrollbar-track { background: transparent; }
.bf-badge-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

.bf-badge-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 1rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  transition: all 0.2s;
  position: relative;
}
.bf-badge-card.locked {
  opacity: 0.35;
  filter: grayscale(1);
}
.bf-badge-card.unlocked:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

/* Tier accent */
.bf-badge-card.tier-bronze.unlocked  { border-color: rgba(205,127,50,0.3); }
.bf-badge-card.tier-silver.unlocked  { border-color: rgba(192,192,192,0.3); }
.bf-badge-card.tier-gold.unlocked    { border-color: rgba(255,215,0,0.3); }
.bf-badge-card.tier-platinum.unlocked { border-color: rgba(229,228,226,0.4); box-shadow: 0 0 16px rgba(229,228,226,0.06); }

.bf-badge-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.5rem;
}
.bf-badge-icon svg { width: 28px; height: 28px; }

.bf-badge-card.tier-bronze  .bf-badge-icon { color: #cd7f32; }
.bf-badge-card.tier-silver  .bf-badge-icon { color: #c0c0c0; }
.bf-badge-card.tier-gold    .bf-badge-icon { color: #ffd700; }
.bf-badge-card.tier-platinum .bf-badge-icon { color: #e5e4e2; }
.bf-badge-card.locked .bf-badge-icon { color: var(--text-muted); }

.bf-badge-name {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  margin-bottom: 0.2rem;
}
.bf-badge-desc {
  font-size: 0.68rem; color: var(--text-muted); line-height: 1.35;
  margin-bottom: 0.4rem;
}
.bf-badge-tier {
  font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem; border-radius: 100px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
}
.bf-badge-card.tier-bronze  .bf-badge-tier { color: #cd7f32; background: rgba(205,127,50,0.1); }
.bf-badge-card.tier-silver  .bf-badge-tier { color: #c0c0c0; background: rgba(192,192,192,0.1); }
.bf-badge-card.tier-gold    .bf-badge-tier { color: #ffd700; background: rgba(255,215,0,0.08); }
.bf-badge-card.tier-platinum .bf-badge-tier { color: #e5e4e2; background: rgba(229,228,226,0.08); }

/* --- Mobile badges --- */
@media (max-width: 560px) {
  .bf-badge-panel { padding: 0.5rem; }
  .bf-badge-panel-inner { max-height: 90vh; border-radius: 12px; }
  .bf-badge-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 0.8rem; }
  .bf-badge-card { padding: 0.7rem 0.4rem; }
  .bf-toast-host { bottom: 0.8rem; right: 0.8rem; left: 0.8rem; }
  .bf-toast { min-width: auto; }
  .bf-notebook { border-radius: 0; }
}