* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "DM Sans", Arial, sans-serif;
  background: #f8f4ee;
  color: #2a251f;
}
.header {
  padding: 24px 20px 14px;
  border-bottom: 1px solid #e5dace;
  background: #fffaf2;
}
.header h1 { margin: 0 0 8px; font-size: 28px; }
.header p { margin: 0 0 8px; color: #5a5045; }
.meta { display: flex; gap: 12px; font-size: 13px; color: #75695d; flex-wrap: wrap; }
main { max-width: 1100px; margin: 0 auto; padding: 20px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
#q {
  flex: 1;
  border: 1px solid #ddcfbf;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
button {
  border: 0;
  border-radius: 8px;
  background: #c06144;
  color: #fff;
  padding: 10px 14px;
  cursor: pointer;
}
.course-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.course-item {
  background: #fff;
  border: 1px solid #e5dace;
  border-radius: 12px;
  padding: 14px;
}
.course-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
}
.course-item .slug { color: #7a6f61; font-size: 12px; margin-bottom: 8px; }
.course-item .links { display: flex; gap: 10px; flex-wrap: wrap; }
.course-item a { color: #3e5f9b; text-decoration: none; }
.course-item a:hover { text-decoration: underline; }
.empty { color: #8a7d6f; }
.hidden { display: none; }
.footer {
  margin-top: 16px;
  border-top: 1px solid #e5dace;
  padding: 12px 20px;
  color: #7a6f61;
  font-size: 12px;
}