:root{
  --bg: #f6efe7;
  --sidebar: #f6efe7;
  --accent: #d7472b;
  --accent2: #f3b4ab;
  --text: #1d1d1d;
  --muted: #6b6b6b;
  --card: #ffffff;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --radius: 14px;
  --gap: 18px;
}

*{ box-sizing: border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.layout{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width: 220px;
  padding: 22px 16px;
  background: var(--sidebar);
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 26px;
}
.brand-icon{ font-size: 22px; }
.brand-title{ font-size: 22px; font-weight: 700; }

.nav{ display:flex; flex-direction: column; gap: 10px; }
.nav-item{
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  padding: 10px 10px;
  border-radius: 10px;
}
.nav-item.active{
  color: var(--accent);
}

.content{
  flex:1;
  padding: 22px 24px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gap);
}

.card{
  display:block;
  text-decoration:none;
  color: var(--text);
  background: var(--card);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.card-img{ height: 160px; background:#eee; }
.card-img img{ width:100%; height:100%; object-fit: cover; display:block; }
.img-placeholder{ width:100%; height:100%; background: linear-gradient(135deg,#eee,#ddd); }
.card-title{
  padding: 10px 12px 14px;
  font-weight: 700;
}

.search-bar input{
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  outline: none;
  font-size: 18px;
  background: #fff;
}

.browse{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.browse-title{
  text-align:center;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .06em;
  margin: 8px 0 10px;
}

.pill-list{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.pill{
  background: var(--accent2);
  padding: 14px 16px;
  border-radius: 10px;
  text-align:center;
  cursor:pointer;
  font-weight: 700;
  text-decoration: underline;
}
.pill.tags{
  background: var(--accent);
  color: #fff;
}
.pill.selected{
  outline: 3px solid rgba(0,0,0,.15);
}

.results{
  margin-top: 22px;
}

.recipe-page .h1{ margin: 0 0 12px; }
.hero{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.hero img{ width:100%; height: 260px; object-fit: cover; display:block; }

.tag-row{ display:flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.tag{
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: var(--shadow);
  font-weight: 700;
  font-size: 13px;
}

.panel{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px;
  margin-bottom: 16px;
}
.panel h2{ margin: 6px 0 10px; }
.panel h3{ margin: 14px 0 8px; color: var(--accent); }

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.checklist li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.checklist input{ margin-top: 4px; }

.muted{ color: var(--muted); font-size: 13px; margin-top: 8px; }

.components-banner{
  text-align:center;
  background: #d9d9d9;
  padding: 12px;
  border-radius: 10px;
  margin: 12px 0 16px;
  font-weight: 700;
}

.components-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ing-link{ font-weight: 800; }

@media (max-width: 980px){
  .browse{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .components-grid{ grid-template-columns: 1fr; }
  .sidebar{ width: 200px; }
}


.card-badge{
  margin: 0 12px 14px;
  display: inline-block;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: 12px;
  text-transform: lowercase;
}


.search-meta{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:10px;
}
.result-count{
  font-weight:800;
  color:var(--muted);
}
.clear-btn{
  border:0;
  background:transparent;
  color:var(--accent);
  font-weight:900;
  cursor:pointer;
  text-decoration:underline;
}


.sort-label{
  font-weight: 800;
  color: var(--muted);
}
.sort-select{
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  background: #fff;
}