:root {
  color: #183f31;
  background: #dcefe3;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #dcefe3; }
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: center; position: relative; background: #f4faf6; border-bottom: 1px solid rgba(32, 84, 64, .12); }
.back-button { position: absolute; left: 28px; border: 0; background: transparent; color: #173e30; font-size: 36px; line-height: 1; }
.topbar-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.page { max-width: 1180px; margin: 0 auto; padding: 28px 26px 56px; }
.search-panel { padding: 0 0 18px; }
.search-wrap { position: relative; }
.search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-52%); color: #285d48; font-size: 25px; }
#food-search { width: 100%; height: 72px; border: 1px solid rgba(32, 84, 64, .28); border-radius: 18px; background: rgba(250, 253, 251, .86); color: #183f31; padding: 0 24px 0 60px; outline: none; box-shadow: 0 4px 16px rgba(26, 83, 58, .04); }
#food-search:focus { border-color: #227452; box-shadow: 0 0 0 3px rgba(34, 116, 82, .16); }
.filters { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.filter-button { border: 1px solid rgba(32, 84, 64, .24); border-radius: 13px; background: rgba(250, 253, 251, .8); color: #224c3a; padding: 12px 25px; transition: .2s ease; }
.filter-button:hover, .filter-button.active { border-color: transparent; background: #c6ead7; }
.result-count { margin: 20px 0 0; color: #527366; font-size: 14px; }
.food-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.food-card { min-height: 174px; display: flex; align-items: stretch; position: relative; overflow: hidden; border: 1px solid rgba(32, 84, 64, .22); border-radius: 14px; background: rgba(250, 253, 251, .9); box-shadow: 0 4px 14px rgba(26, 83, 58, .04); }
.food-image { width: 178px; min-width: 178px; object-fit: cover; }
.food-card-content { padding: 28px 22px; }
.food-card h2 { margin: 0 0 12px; font-size: 23px; font-weight: 700; }
.food-card p { margin: 0; color: #5b6d65; font-size: 16px; }
.favorite-button { position: absolute; top: 20px; right: 18px; width: 42px; height: 42px; border: 0; background: transparent; color: #274d3d; font-size: 34px; line-height: 1; }
.favorite-button[aria-pressed="true"] { color: #c7644e; }
.empty-state { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: #527366; }

@media (max-width: 680px) {
  .topbar { height: 64px; }
  .back-button { left: 16px; font-size: 30px; }
  .page { padding: 18px 14px 36px; }
  #food-search { height: 58px; border-radius: 15px; }
  .food-grid { grid-template-columns: 1fr; gap: 14px; }
  .food-card { min-height: 132px; }
  .food-image { width: 122px; min-width: 122px; }
  .food-card-content { padding: 23px 16px; }
  .food-card h2 { font-size: 20px; margin-bottom: 8px; }
}