/* static/css/learn_category.css */
.learn-shell{ max-width: 1080px; margin: 0 auto; padding: 0 12px; }

.hero{
  margin-top: 14px;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.hero h1{ margin:0 0 10px; font-size: 22px; line-height: 1.7; }
.hero p{ margin:0; color: rgba(255,255,255,.78); line-height: 1.9; }

.learn-breadcrumbs{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.65);
  font-size:13px;
}
.learn-breadcrumb-link{ color:rgba(255,255,255,.7); text-decoration:none; }
.learn-breadcrumb-sep{ opacity:.5; }

.bar{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.search{
  flex: 1;
  min-width: 220px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.search-icon{ opacity:.75; }
.search input{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255,255,255,.9);
  font-size: 14px;
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  text-decoration:none;
}
.pill:hover{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); }

.grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 820px){ .grid{ grid-template-columns: 1fr; } }

.card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 14px;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.card:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }

.card h3{ margin:0 0 6px; font-size: 16px; line-height: 1.7; }
.card a{ text-decoration:none; color: rgba(255,255,255,.92); }
.card p{ margin:0; color: rgba(255,255,255,.72); line-height: 1.9; font-size: 13px; }

.meta{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.badge{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 5px 9px;
  border-radius: 999px;
}

.empty{
  margin-top: 14px;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.75);
  line-height: 1.9;
  display:none;
}