:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu; line-height:1.6; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem;
  width: 100%;
}

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

.card { border: 1px solid color-mix(in oklab, canvas, canvastext 10%); border-radius: 12px; padding: 1rem; background: color-mix(in oklab, canvas, canvastext 2%);margin-top: 10px; }

.badge { display:inline-block; padding:.25rem .5rem; border-radius:999px; border:1px solid color-mix(in oklab, canvas, canvastext 10%); }

.btn { display:inline-block; padding:.75rem 1rem; border-radius:8px; background:#111827; color:#fff; font-size:1rem;border: .1rem solid #7bdcb5;margin-top:.5rem; }
.btn:hover { opacity:.9; }

.header, .footer { border-bottom:1px solid color-mix(in oklab, canvas, canvastext 10%); }
.footer { border-top:1px solid color-mix(in oklab, canvas, canvastext 10%); margin-top:2rem; padding:1rem 0; }

.searchbar { display:flex; flex-wrap:wrap; gap:.5rem; }
.searchbar input[type="search"], .searchbar select, .searchbar button {
  flex: 1 1 100%;
  padding:.6rem .75rem;
  border:1px solid color-mix(in oklab, canvas, canvastext 10%);
  border-radius:8px;
  background: color-mix(in oklab, canvas, canvastext 2%);
}

/* Responsive breakpoints */
@media (min-width:640px) {
  .searchbar input[type="search"],
  .searchbar select { flex:1 1 auto; }
  .searchbar button { flex:0 0 auto; }
}

h1 { font-size:clamp(1.5rem, 5vw, 2.25rem); }
h2 { font-size:clamp(1.25rem, 4vw, 1.75rem); }

@media (max-width:680px) {
  .btn { width:100%; text-align:center; }
  .header { flex-direction:column; align-items:flex-start; }
}

.nav-wrapper {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand {
  font-weight:700;
  font-size:clamp(1.25rem, 5vw, 1.75rem);
}

.menu-btn {
  background:none;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
}

.nav ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.nav a {
  text-decoration:none;
  color:#111827;
  font-weight:500;
}

.hidden { display:none; }

/* Desktop breakpoint */
@media (min-width:768px) {
  .menu-btn { display:none; }
  .nav { display:block !important; }
  .nav ul { flex-direction:row; gap:2rem; }
}