/* Vocabulary Booster landing page — tokens/navbar shared from topics/topic.css */

.vb-hero{
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(225,29,72,.14), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(59,130,246,.14), transparent 55%);
}
.vb-hero-inner{
  max-width:900px; margin:0 auto; padding:3.5rem 2rem 2.75rem; text-align:center;
}
.vb-hero h1{
  font-family:'Bangers', cursive; font-weight:400; letter-spacing:.5px;
  font-size:3rem; color:#fff; margin-bottom:.9rem;
}
.vb-hero .lead{ font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.vb-hero .sub{ font-size:1rem; color:var(--muted); margin-bottom:1.75rem; }

.vb-legend{
  display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;
  font-size:.88rem; color:var(--muted); font-weight:600;
}
.legend-item{ display:inline-flex; align-items:center; gap:.5rem; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.beginner{ background:var(--brand-2); }
.dot.intermediate{ background:var(--warning); }
.dot.advanced{ background:var(--brand); }
.legend-count{
  padding:.3rem .75rem; border:1px solid var(--border); border-radius:20px; color:var(--text);
}

.vb-wrap{ max-width:1200px; margin:0 auto; padding:2.5rem 2rem 3.5rem; }

.vocab-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem;
}

.vocab-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vocab-card:hover{
  transform:translateY(-4px); border-color:var(--brand-3);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.card-icon{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--brand-3);
}
.card-icon .icon{ width:22px; height:22px; }

.level{
  font-size:.72rem; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:20px; white-space:nowrap;
}
.level.beginner{ background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.35); }
.level.intermediate{ background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.35); }
.level.advanced{ background:rgba(225,29,72,.15); color:#ffb3c1; border:1px solid rgba(225,29,72,.35); }

.vocab-card h3{ font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:.55rem; }
.vocab-card p{ font-size:.92rem; color:var(--muted); margin-bottom:.9rem; flex-grow:1; }
.vocab-card .preview{
  font-size:.82rem; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .85rem;
}

.vb-footer{
  margin-top:3rem; text-align:center; color:var(--muted); font-size:.95rem;
}
.vb-footer p{ margin-bottom:.5rem; }
.vb-footer strong{ color:var(--text); }
.footer-link{ color:var(--brand-3); font-weight:700; text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }

@media (max-width:700px){
  .vb-hero h1{ font-size:2.3rem; }
  .vb-hero-inner{ padding:2.5rem 1.25rem 2rem; }
  .vb-wrap{ padding:2rem 1.25rem 2.5rem; }
}