.food-preview {
  --ink: #121826;
  --muted: #6b7280;
  --panel: #ffffff;
  --line: rgba(18, 24, 38, .10);
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.food-preview * { box-sizing: border-box; }
.food-preview a { color: inherit; text-decoration: none; }
.food-preview img { display: block; max-width: 100%; }

.preview-stage {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 28px 18px;
  display: grid;
  grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.phone {
  width: min(410px, 100%);
  margin: 0 auto;
  border-radius: 34px;
  border: 10px solid #111827;
  background: var(--phone-bg, #f8fff5);
  box-shadow: 0 30px 80px rgba(16, 24, 40, .28);
  overflow: hidden;
}

.phone-inner { min-height: 820px; padding: 18px 16px 22px; }
.status { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 900; margin-bottom: 14px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.75); }
.location { min-width: 0; flex: 1; display: grid; gap: 2px; }
.location span { font-size: .73rem; opacity: .72; font-weight: 500; }
.location strong { font-size: .94rem; line-height: 1.2; font-weight: 600; }
.round-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08); font-weight: 600; box-shadow: 0 8px 18px rgba(16,24,40,.12); }
.search-pill { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 24px; background: #fff; color: #8a94a6; font-size: .88rem; font-weight: 400; box-shadow: 0 12px 28px rgba(16,24,40,.10); }
.search-dot { width: 17px; height: 17px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: 0 0 auto; }
.search-dot:after { content: ""; position: absolute; width: 7px; height: 2px; right: -6px; bottom: -3px; background: currentColor; transform: rotate(45deg); border-radius: 99px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
.section-head h2 { margin: 0; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.section-head a { color: var(--muted); font-size: .76rem; font-weight: 500; }

.category-row { display: grid; grid-auto-flow: column; grid-auto-columns: 78px; gap: 12px; overflow: hidden; padding: 4px 0; }
.category { display: grid; justify-items: center; gap: 7px; font-size: .72rem; font-weight: 500; color: var(--muted); }
.cat-img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 10px 20px rgba(16,24,40,.14); }
.chip-row { display: flex; gap: 10px; overflow: hidden; }
.chip { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.75); color: var(--ink); font-weight: 500; font-size: .82rem; }
.chip.active { background: var(--accent, #22c55e); color: #fff; font-weight: 600; }

.card-row { display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: 14px; overflow: hidden; }
.food-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 34px rgba(16,24,40,.14); }
.food-img { width: 100%; height: 150px; object-fit: cover; }
.food-copy { padding: 11px 12px 13px; display: grid; gap: 5px; }
.food-copy strong { font-size: .96rem; line-height: 1.2; font-weight: 600; }
.meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .76rem; font-weight: 400; }
.price { color: var(--accent, #22c55e); font-weight: 700; }

.deal-banner { position: relative; min-height: 156px; border-radius: 24px; padding: 18px; overflow: hidden; color: #fff; background: var(--banner, #ff5b2e); box-shadow: 0 18px 35px rgba(16,24,40,.18); }
.deal-banner h2 { position: relative; z-index: 1; max-width: 235px; margin: 0; font-size: 1.45rem; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.deal-banner p { position: relative; z-index: 1; max-width: 205px; margin: 8px 0 0; font-weight: 500; font-size: .88rem; opacity: .92; }
.deal-banner h2,
.deal-banner p { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.36); }
.deal-banner img { position: absolute; right: -16px; bottom: -18px; width: 190px; height: 150px; object-fit: cover; border-radius: 28px; transform: rotate(-5deg); }
.small-list { display: grid; gap: 12px; }
.list-card { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 12px 28px rgba(16,24,40,.10); }
.list-card img { width: 92px; height: 78px; border-radius: 14px; object-fit: cover; }
.list-card strong { display: block; line-height: 1.2; font-weight: 600; font-size: .94rem; }
.add-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent, #22c55e); color: #fff; font-weight: 600; font-size: .82rem; white-space: nowrap; }
.bottom-nav { margin-top: 18px; min-height: 64px; border-radius: 28px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 8px; background: rgba(255,255,255,.94); box-shadow: 0 12px 32px rgba(16,24,40,.16); }
.bottom-nav a { display: grid; place-items: center; gap: 3px; color: #8a94a6; font-size: .64rem; font-weight: 500; }
.bottom-nav .active { color: var(--accent, #22c55e); font-weight: 600; }
.nav-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 12px; background: rgba(18,24,38,.06); font-size: .72rem; }
.bottom-nav .active .nav-icon { background: var(--accent, #22c55e); color: #fff; }

.showcase { padding: 22px 0; }
.showcase h1 { margin: 0; max-width: 670px; font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; }
.showcase p { max-width: 560px; margin: 16px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; font-weight: 400; }
.service-panel { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.service-panel a { min-height: 122px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(16,24,40,.10); display: grid; align-content: space-between; }
.service-panel b { font-size: .98rem; font-weight: 600; }
.service-panel span:not(.service-blend-icon) { font-size: .84rem; font-weight: 400; color: var(--muted); }
.ad-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.ad-preview { min-height: 150px; border-radius: 20px; overflow: hidden; position: relative; color: #fff; background: #111827; }
.ad-preview img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; filter: saturate(1.12); }
.ad-preview:after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.68)); }
.ad-preview span { position: absolute; z-index: 1; left: 12px; bottom: 12px; right: 12px; color: #fff; font-weight: 600; font-size: .86rem; text-shadow: 0 2px 14px rgba(0,0,0,.55); }

.green-soft { --accent:#67c96b; --phone-bg:#f7fff2; background: linear-gradient(135deg,#e8f8e5,#fff 45%,#f7fbff); }
.green-soft .phone { border-color: #f4f9ef; }
.green-soft .phone-inner { background: linear-gradient(180deg,#62c86b 0 132px,#fbfff8 132px); border-radius: 24px; }
.green-soft .top-row,
.green-soft .status { color: #fff; }

.lime-dark { --accent:#b7dc58; --phone-bg:#b4d764; background: linear-gradient(135deg,#d9f28b,#f9ffe6 48%,#edf7ff); }
.lime-dark .phone-inner { background: #b5d763; }
.lime-dark .food-card,
.lime-dark .list-card { background: #384139; color: #fff; }
.lime-dark .food-copy .meta,
.lime-dark .list-card .meta { color: rgba(255,255,255,.72); }
.lime-dark .bottom-nav { background: #4b443c; }
.lime-dark .bottom-nav .active { color: #fff; }

.black-orange { --accent:#ff5a1f; --phone-bg:#111111; background: linear-gradient(135deg,#171717,#2c150d 55%,#fff2ea); }
.black-orange,
.black-orange .showcase p { color: #fff; }
.black-orange .phone { border-color: #2b2b2b; }
.black-orange .phone-inner { background: #111111; color: #fff; }
.black-orange .search-pill,
.black-orange .food-card,
.black-orange .list-card,
.black-orange .bottom-nav { background: #1c1c1f; color: #fff; }
.black-orange .chip { background: #2a1a14; color: #ffb199; font-weight: 500; }
.black-orange .chip.active { background: #ff5a1f; color: #fff; font-weight: 600; }
.black-orange .section-head a { color: #8a94a6; }
.black-orange .section-head a:hover { color: #ff7a45; }
.black-orange .price { color: #ff7a45; font-weight: 700; }
.black-orange .meta { color: #a3a3a3; }
.black-orange .service-panel a { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.12); }
.black-orange .phone .deal-banner {
  display: block;
  background: linear-gradient(135deg,#ff5a1f,#f97316) !important;
}
.black-orange .phone .deal-banner h2,
.orange-bold .phone .deal-banner h2 { max-width: 210px; font-size: 1.34rem; }
.black-orange .phone .deal-banner img,
.orange-bold .phone .deal-banner img { right: -8px; bottom: -8px; width: 155px; height: 122px; border-radius: 22px; opacity: .92; }

.orange-bold { --accent:#ff6433; --phone-bg:#101010; background: linear-gradient(135deg,#ff5b2e 0 42%,#101010 42%); }
.orange-bold,
.orange-bold .showcase p { color: #fff; }
.orange-bold .phone { border-color: #0c0c0c; }
.orange-bold .phone-inner { background: linear-gradient(180deg,#ff5b2e 0 250px,#101010 250px); color: #fff; }
.orange-bold .search-pill { background: #101010; color: #98a2b3; }
.orange-bold .food-card,
.orange-bold .list-card { background: #1b1b1d; color: #fff; }
.orange-bold .meta { color: #9ca3af; }
.orange-bold .service-panel a { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.15); }
.orange-bold .bottom-nav { background: #101010; }
.orange-bold .phone .deal-banner { display: block; background: linear-gradient(135deg,#d83b13,#ff8a57) !important; }

@media (max-width: 920px) {
  .preview-stage { grid-template-columns: 1fr; }
  .showcase { order: -1; }
}

@media (max-width: 520px) {
  .preview-stage { padding: 0; }
  .showcase { display: none; }
  .phone { width: 100%; border: 0; border-radius: 0; min-height: 100vh; box-shadow: none; }
  .phone-inner { min-height: 100vh; border-radius: 0; }
  .card-row { grid-auto-columns: 220px; }
  .service-panel { grid-template-columns: repeat(2, minmax(0,1fr)); }
}