:root {
  --bg: #f4f4f6;
  --card: #fff;
  --text: #17171c;
  --muted: #8b8b96;
  --accent: #6b3fd9;
  --accent-soft: #ece6fb;
  --danger: #d93f3f;
  --radius: 22px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif; font-size: 16px;
}
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 110px max(16px, env(safe-area-inset-left)); }
h1 { font-size: 30px; font-weight: 800; margin: 0; }
h2 { font-size: 24px; font-weight: 800; margin: 28px 0 12px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 14px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; background: #e9e9ee;
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
}
.search {
  width: 100%; border: 0; background: #e9e9ee; border-radius: 18px;
  padding: 14px 18px; outline: none;
}
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 16px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; background: var(--card); border-radius: 999px; padding: 10px 18px;
  font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.chip.active { background: var(--accent); color: #fff; }

.card {
  background: var(--card); border-radius: var(--radius); padding: 12px;
  margin-bottom: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.04); display: block; cursor: pointer;
}
.card .photo {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; display: block;
  background: #e9e9ee;
}
.card .photo.empty { display: grid; place-items: center; font-size: 42px; }
.card h3 { margin: 12px 6px 2px; font-size: 20px; font-weight: 800; }
.card p { margin: 0 6px 6px; color: var(--muted); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.menu-section { background: var(--card); border-radius: var(--radius); padding: 8px 18px; margin-bottom: 18px; }
.menu-section h2 { margin: 14px 0 4px; font-size: 21px; }
.row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #eee; cursor: pointer; }
.row:first-of-type { border-top: 0; }
.row .info { flex: 1; min-width: 0; }
.row h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.row p { margin: 0; color: var(--muted); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row img, .row .thumb { width: 96px; height: 80px; border-radius: 14px; object-fit: cover; background: #e9e9ee; flex: none; }
.row .thumb { display: grid; place-items: center; font-size: 28px; }

.segment { display: flex; background: #e4e4ea; border-radius: 999px; padding: 4px; margin-top: 16px; }
.segment button { flex: 1; background: transparent; border-radius: 999px; padding: 11px; font-weight: 700; }
.segment button.active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.hero { margin: 0 -16px; height: 240px; position: relative; background: #e9e9ee; }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .icon-btn { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.9); }
.section-card { background: var(--card); border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; }
.section-card h2 { margin: 0 0 10px; font-size: 21px; }
.section-card .text { white-space: pre-wrap; line-height: 1.5; }
.muted { color: var(--muted); }

.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.bottom-bar .inner { max-width: 560px; margin: 0 auto; display: flex; gap: 10px; }
.btn {
  flex: 1; background: var(--accent); color: #fff; border-radius: 999px; padding: 17px;
  font-weight: 800; font-size: 17px; box-shadow: 0 6px 18px rgba(107,63,217,.3);
}
.btn.secondary { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.btn.danger { background: #fbe6e6; color: var(--danger); box-shadow: none; flex: none; padding: 17px 22px; }

form label { display: block; font-weight: 700; margin: 16px 0 6px; }
form input[type=text], form input[type=password], form textarea, form select {
  width: 100%; border: 0; background: var(--card); border-radius: 16px; padding: 14px 16px; outline: none;
}
form textarea { min-height: 110px; resize: vertical; }
.preview { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; margin-top: 8px; }
.empty-state { text-align: center; color: var(--muted); padding: 50px 0; }
.cat-row { display: flex; gap: 8px; margin-bottom: 10px; }
.cat-row input { flex: 1; }
.cat-row button { background: var(--card); border-radius: 14px; padding: 0 14px; font-weight: 700; }