:root {
  --ink: #f7f3ea; --muted: #aaa39a; --cream: #050505; --paper: #121212;
  --lime: #d5b36a; --coral: #d5b36a; --line: #2b2b2b; --tag-bg: #1b2a25; --tag-text: #9fd4b7; --hero-bg: #141414; --order-bg: #0b0b0b; --button-text: #16120c; --shadow: 0 18px 45px rgba(0, 0, 0, .22);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--menu-bg, var(--cream)); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background-color: var(--menu-bg, var(--cream)); background-size: cover; background-attachment: fixed; overflow-x: clip; }
body.has-menu-background:before { content: ""; position: fixed; inset: -24px; z-index: -1; background: color-mix(in srgb, var(--menu-bg) 82%, transparent); backdrop-filter: blur(16px) saturate(.75); -webkit-backdrop-filter: blur(16px) saturate(.75); pointer-events: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shell { width: min(100%, 1240px); margin: 0 auto; padding: 0 16px 110px; }
.public-top { padding-top: 6px; }
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-logo { width: clamp(110px, 31vw, 190px); max-width: 100%; max-height: 72px; object-fit: contain; object-position: left center; }
.brandbar-compact { min-height: 54px; }
.brandbar-compact .brand-logo { width: min(210px, 62vw); max-height: 68px; }
.header-controls { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex: 0 0 auto; }
.header-open { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.header-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px 0 11px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 90%, #fff 10%), var(--lime)); color: var(--button-text); text-decoration: none; line-height: 1; white-space: nowrap; box-shadow: 0 8px 20px color-mix(in srgb, var(--lime) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .18s ease, filter .18s ease; }
.header-whatsapp svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
.header-whatsapp-label { font-size: 12.5px; font-weight: 850; letter-spacing: .01em; }
.header-whatsapp:hover { transform: translateY(-1px); filter: brightness(1.05); }
.header-whatsapp:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.header-whatsapp.is-compact { width: 38px; padding: 0; border-color: var(--line); border-radius: 50%; background: transparent; color: var(--ink); box-shadow: none; }
.header-whatsapp.is-compact .header-whatsapp-label { display: none; }
.brand-fallback { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-fallback-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lime); color: var(--button-text); font-size: 15px; font-weight: 900; }
.brand-fallback h1 { font-size: clamp(22px, 6vw, 32px); }
/* Keep the logo and guest actions together in the compact phone header. */
@media (max-width: 560px) {
  .brandbar { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-logo { width: min(132px, 37vw); max-height: 48px; object-position: left center; }
  .header-controls { flex: 0 0 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 5px; min-width: 0; }
  .header-open { min-height: 30px; padding: 5px 9px; font-size: 10.5px; }
  .header-whatsapp { width: 34px; min-height: 34px; padding: 0; border-color: var(--line); border-radius: 50%; background: transparent; color: var(--ink); box-shadow: none; }
  .header-whatsapp .header-whatsapp-label { display: none; }
}
.eyebrow { margin: 0 0 4px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(26px, 7vw, 42px); line-height: 1; letter-spacing: -.06em; }
h2 { margin-bottom: 14px; font-size: 24px; letter-spacing: -.04em; }
h3 { margin-bottom: 5px; font-size: 17px; letter-spacing: -.02em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.subtle-action { min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font-weight: 750; }
.hero { margin: 8px 0 10px; padding: 23px; border-radius: 26px; background: var(--hero-bg); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.hero p { max-width: 410px; margin: 12px 0 0; color: #d7e4dc; line-height: 1.5; }
.hero .eyebrow { position: relative; z-index: 1; }
.hero h2 { position: relative; z-index: 1; max-width: 340px; margin: 0; font-size: clamp(28px, 8vw, 46px); color: var(--ink); }
.hero.hero-image { padding: 0; aspect-ratio: 1120 / 420; background: var(--hero-bg); }
.hero.hero-image img { width: 100%; height: 100%; object-fit: contain; }
.hero.hero-image.hero-auto { background: transparent; }
/* Right-to-left guest menus (Arabic and Hebrew). The document direction
   mirrors the layout; these are the few sides named explicitly. */
html[dir="rtl"] .brand-logo { object-position: right center; }
html[dir="rtl"] .brand { text-align: right; }
.hero.hero-image.hero-auto img { object-fit: cover; }
.hero.hero-image picture { display: block; width: 100%; height: 100%; }
.hero.hero-image.hero-landscape { aspect-ratio: 1120 / 420; }
.hero.hero-image.hero-portrait { aspect-ratio: 4 / 5; }
.hero.hero-image.hero-full { aspect-ratio: auto; }
.hero.hero-image.hero-full picture, .hero.hero-image.hero-full img { height: auto; }
/* Google rating pill — real numbers the server fetched from the restaurant's
   own Google listing (12-hour sync), never owner-typed. The stars keep
   Google's own star gold; everything else comes from the theme variables, so
   the same pill sits comfortably on all eight presets and on the photo. */
/* The pill carries the symbol, the score and the stars — no words. The count
   and the words "Google reviews" still reach a screen reader through the
   link's label, so nothing is lost for someone who cannot see the stars. */
.google-rating-pill { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; max-width: calc(100% - 20px); padding: 0 9px 0 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.google-rating-pill:hover { border-color: var(--coral); }
.google-rating-pill:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.hero:not(.hero-image) .google-rating-pill { position: static; margin-top: 16px; max-width: 100%; }
.google-rating-pill .grp-g { width: 13px; height: 13px; flex: none; }
.google-rating-pill .grp-score { font-size: 13px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.google-rating-pill .grp-stars { position: relative; display: inline-block; font-size: 10.5px; line-height: 1; letter-spacing: .6px; white-space: nowrap; }
.google-rating-pill .grp-stars-bg { color: var(--ink); opacity: .3; }
.google-rating-pill .grp-stars-fill { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; color: #fbbc04; white-space: nowrap; }
@media (max-width: 639px) { .google-rating-pill { right: 8px; bottom: 8px; padding: 0 8px 0 6px; } }
/* Guest reviews — the newest Google reviews that score at least as well as the
   headline rating, in a compact strip between the menu and the footer. Same
   rule as the pill: real fetched numbers only, and nothing below the score the
   menu itself prints. A short clamp keeps five cards small enough to skim. */
.guest-reviews { position: relative; margin: 34px 0 0; padding: 24px 0 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.guest-reviews::before { content: ""; position: absolute; top: -1px; left: 0; width: 72px; height: 1px; background: var(--coral); }
.guest-reviews-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin: 0 0 12px; }
.guest-reviews-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.guest-reviews-head .grp-g { width: 14px; height: 14px; flex: none; }
.guest-reviews-score { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.guest-reviews-score b { color: #fbbc04; font-weight: 400; letter-spacing: .5px; }
.guest-reviews-link { margin-left: auto; font-size: 11px; font-weight: 750; color: var(--coral); text-decoration: none; white-space: nowrap; }
.guest-reviews-link:hover { text-decoration: underline; }
.guest-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.guest-review { padding: 10px 11px 11px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--paper) 45%, transparent); }
.guest-review-stars { margin: 0; color: #fbbc04; font-size: 10.5px; letter-spacing: 1px; line-height: 1; }
.guest-review-text { margin: 6px 0 7px; font-size: 12px; line-height: 1.42; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.guest-review-meta { margin: 0; font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 639px) { .guest-reviews { margin-top: 28px; padding-top: 20px; } .guest-reviews-head h2 { font-size: 16px; } .guest-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guest-review-text { -webkit-line-clamp: 3; } }
.welcome-card { display: grid; gap: 8px; margin: -5px 0 20px; padding: 12px 0 0; }
.welcome-info { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.quick-link { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 12px; font-weight: 750; text-decoration: none; }
.quick-link:hover { border-color: var(--lime); }
.quick-open.is-open { color: var(--tag-text); }
.quick-open.is-closed { color: var(--muted); }
.section-block { margin: 20px 0; }
.specials-section { margin-top: 4px; }
/* Zephyr chapter headings — clean, no rule, gold chapter index, quiet count */
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
/* Public menu headings (specials + categories) — no top line, airy spacing */
.section-block .section-heading { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: clamp(21px, 3.4vw, 26px); font-weight: 750; letter-spacing: -.02em; }
.section-index { flex: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--coral); font-variant-numeric: tabular-nums; }
.section-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
/* Sticky menu rail — categories + filters as one calm in-flow band that
   condenses to a slim frosted bar once you scroll past. Category chips wrap
   at every viewport width so the full menu map stays visible. */
.menu-rail { position: sticky; top: 0; z-index: 15; margin: 20px 0 10px; }
/* The rail is a frosted band, so its chips need their own margin: without it a
   chip sits flush against the band's edge and reads as a clipped card. */
.rail-inner { padding: 6px 14px 12px; background: var(--menu-bg, var(--cream)); }
.rail-inner.is-stuck-bg, .menu-rail.is-stuck .rail-inner { background: color-mix(in srgb, var(--menu-bg, var(--cream)) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 12px 28px rgba(0,0,0,.16); border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.category-nav { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0 12px; }
@media (max-width: 639px) {
  .category-nav { flex-wrap: wrap; overflow-x: visible; min-width: 0; padding-bottom: 10px; }
}
.rail-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 750; letter-spacing: .04em; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.rail-toggle:hover { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); }
.rail-toggle[aria-expanded="true"] { background: var(--lime); border-color: var(--lime); color: var(--button-text); }
.rail-toggle .rail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 25%, transparent); }
.rail-filters { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease, opacity .25s ease; }
.rail-filters.rail-open { grid-template-rows: 1fr; opacity: 1; }
.rail-filters-wrap { overflow: hidden; min-height: 0; }
.rail-filters .filter-group { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 14px; padding: 8px 0; }
.rail-filters .filter-group + .filter-group { border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.menu-rail.is-stuck .rail-filters .filter-label { padding-inline: 10px; }
.filter-label { padding-top: 10px; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--coral); white-space: nowrap; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 6px; }
.menu-rail.is-stuck .rail-filters.rail-open ~ * { }
.menu-rail.is-stuck .rail-filters.rail-open { max-height: none; }
.menu-rail.is-stuck:not(:has(.rail-filters.rail-open)) .rail-inner { padding-bottom: 8px; }
.menu-rail.is-stuck .category-nav { padding: 8px 0 6px; }
.menu-rail.is-stuck:not(:has(.rail-filters.rail-open)) .rail-toggle { min-height: 32px; padding: 4px 12px; font-size: 11.5px; }
.menu-rail.is-stuck:not(:has(.rail-filters.rail-open)) .category-nav .chip { min-height: 32px; padding: 4px 9px; font-size: 11.5px; }
.menu-rail.is-stuck .rail-filters.rail-open { padding-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .rail-filters { transition: none; } }
/* .tag-nav kept only for backward compatibility with older children */
.tag-nav { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.tag-nav::-webkit-scrollbar { display: none; }
.tag-pill { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.pill { flex: 0 0 auto; min-height: 43px; padding: 10px 15px; border-radius: 999px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); font-weight: 750; }
.pill.active, .primary { background: var(--lime); color: var(--button-text); border-color: var(--lime); }
.specials { overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
/* Never `touch-action: pan-x` here. It hands this element every touch gesture
   and traps vertical page scrolling whenever a guest starts a swipe on the
   carousel — the page then refuses to move until the finger leaves the strip.
   `auto` lets the browser scroll the page vertically and the strip horizontally. */
.specials.moving { touch-action: auto; }
.specials::-webkit-scrollbar { display: none; }
.specials-track { display: flex; gap: 10px; width: max-content; }
/* The specials strip: the photograph IS the card. Before this the strip was a
   96px photo beside a narrow column that printed the dish name in three cramped
   lines at 14px. The name and price now sit on a wash that fades into the
   picture along the bottom edge, the Add button is small beside them, and the
   diet marks are icons only — their words live on the dish page, so nothing
   repeats "Seafood" under a SeaFood icon. */
.specials .meal-card { position: relative; display: block; width: min(76vw, 330px); flex-basis: min(76vw, 330px); aspect-ratio: 4 / 3; border-radius: 16px; }
.specials .meal-card.no-photo { background: var(--paper); }
.specials .meal-photo { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.specials .meal-content { position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 10px; padding: 42px 12px 11px; background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 94%, transparent) 42%, color-mix(in srgb, var(--paper) 55%, transparent) 74%, color-mix(in srgb, var(--paper) 0%, transparent) 100%); }
.specials .meal-top { display: grid; gap: 1px; align-items: start; }
.specials .meal-top h3 { font-size: 15px; line-height: 1.16; letter-spacing: -.01em; }
.specials .price { font-size: 12.5px; }
.specials .meal-description, .specials .tags { display: none; }
.specials .add-button { width: auto; min-height: 32px; margin: 0; padding: 0 14px; font-size: 11.5px; border-radius: 9px; }
.specials .diet-badges { top: 8px; right: auto; bottom: auto; left: 8px; }
.specials-hint { margin: 7px 0 0; }
/* auto-fill, not auto-fit: a section holding one dish must keep a dish card's size
   instead of stretching that one card — and its photo — across a 1240px laptop. */
.meal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
/* Premium dish cards — same card language as the modals: hairline border,
   soft double shadow, quiet lift on hover, gold-ringed add button. */
/* Photo left, words right: the same dish card used everywhere, sized so several
   dishes fit above the fold on a phone. */
.meal-card { --meal-photo-w: 136px; position: relative; min-width: 0; overflow: hidden; display: grid; grid-template-columns: var(--meal-photo-w) minmax(0, 1fr); grid-template-rows: 1fr; border-radius: 16px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.meal-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lime) 40%, var(--line)); box-shadow: 0 22px 48px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.1); }
.meal-photo { width: 100%; height: 100%; min-height: 124px; object-fit: cover; background: color-mix(in srgb, var(--paper) 60%, transparent); transition: filter .3s ease; }
.meal-card:hover .meal-photo { filter: brightness(1.05) saturate(1.04); }
/* A dish with no photograph gets the whole card for its text. There is no empty
   photo box and no "no image" label: the card is the words, the price and the
   button, so a menu of text-only dishes reads as deliberate rather than broken. */
.meal-card.no-photo { grid-template-rows: 1fr; }
.meal-card.no-photo .meal-content { padding-top: 18px; }
.meal-card.no-photo .meal-top h3 { font-size: 17px; }
/* The photograph dissolves into the card instead of stopping on a hard vertical
   edge. It is an overlay rather than a mask so one rule serves every theme, and
   it is eased with several stops: a straight two-stop ramp reads as a visible
   band, while this one leaves the picture solid for its first half and only then
   fades, finishing exactly at the text column. 56px over a 136px picture is a
   long enough dissolve that the eye reads "the photo becomes the card". */
/* Diet and taste marks are emoji on every guest surface — the rail chip, the
   badge over the picture and the dish page — so one dish never shows two
   different symbols for the same thing. */
.diet-emoji { display: inline-block; font-size: 15px; line-height: 1; }
.diet-badge .diet-emoji { font-size: 15px; }
.diet-label .diet-emoji, .dish-label .diet-emoji { font-size: 14px; }

/* The dissolve is deliberately short: it only has to hide the photograph's
   hard edge, and every pixel it takes is a pixel of food the guest cannot see. */
.meal-card:not(.no-photo)::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--meal-photo-w) - 40px); width: 40px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--paper) 6%, transparent) 10%, color-mix(in srgb, var(--paper) 26%, transparent) 30%, color-mix(in srgb, var(--paper) 62%, transparent) 56%, color-mix(in srgb, var(--paper) 90%, transparent) 82%, var(--paper) 100%); }
/* The specials strip is a full-bleed photograph with its own bottom wash. */
.specials .meal-card::after { content: none; }
.meal-content { padding: 11px 13px 12px; display: flex; flex-direction: column; min-height: 0; }
.meal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.meal-top h3 { margin: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -.015em; }
.price { color: var(--coral); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.meal-description { display: -webkit-box; min-height: 0; margin: 3px 0 8px; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.diet-badges { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; gap: 5px; }
.diet-badge { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--tag-text); box-shadow: 0 5px 14px rgba(0,0,0,.22); font-size: 16px; line-height: 1; backdrop-filter: blur(4px); }
.diet-badge[aria-label] { cursor: help; }
/* The overflow chip for a dish with more than four labels. */
.diet-more { font-size: 10px; font-weight: 800; letter-spacing: -.02em; }
.tags { min-height: 20px; display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 13px; }
.tag { padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tag-text) 30%, transparent); background: color-mix(in srgb, var(--tag-bg) 55%, transparent); color: var(--tag-text); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.filter-tag { padding: 3px 7px; font-size: 10px; white-space: nowrap; }
.add-button { width: 100%; min-height: 37px; margin-top: auto; border-radius: 10px; font-size: 12.5px; background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 90%, #fff 10%), var(--lime)); color: var(--button-text); font-weight: 850; letter-spacing: .01em; box-shadow: 0 8px 20px color-mix(in srgb, var(--lime) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.add-button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px color-mix(in srgb, var(--lime) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.28); }
.add-button:active { transform: translateY(0); }
.add-button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .meal-card, .meal-photo, .add-button { transition: none; } .meal-card:hover { transform: none; } .add-button:hover { transform: none; } }
/* Every theme preset uses a dark order bar, so its ink cannot follow --ink:
   on a cream theme that painted near-black text on a near-black bar and the
   order total disappeared. */
.order-bar { position: fixed; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 480px); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px 10px 17px; border-radius: 17px; background: var(--order-bg); color: #f7f3ea; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.order-bar strong { display: block; font-size: 15px; }
.order-bar span { color: rgba(247, 243, 234, .74); font-size: 12px; }
.order-bar button { min-height: 44px; padding: 10px 15px; border-radius: 11px; background: var(--lime); color: var(--button-text); font-weight: 850; }
a.splash-open[data-action="order"] { min-height: 44px; padding: 10px 15px; border-radius: 11px; background: var(--lime); color: var(--button-text); font-weight: 850; }
.order-bar-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.order-bar-text { min-width: 0; }
.order-thumbs { display: flex; align-items: center; flex: 0 0 auto; padding-left: 2px; }
.order-thumb { position: relative; width: 38px; height: 38px; margin-left: -9px; border-radius: 50%; border: 2px solid var(--order-bg, #0b0b0b); overflow: hidden; background: color-mix(in srgb, var(--paper) 70%, var(--line)); box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.order-thumb:first-child { margin-left: 0; }
.order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-thumb-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: color-mix(in srgb, var(--lime) 24%, var(--paper)); color: var(--ink); font-size: 14px; font-weight: 900; }
.order-thumb b { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--lime); color: var(--button-text); font-size: 10px; font-weight: 900; }
@keyframes order-bar-pop { 0% { transform: translateX(-50%) scale(1); } 35% { transform: translateX(-50%) scale(1.035); } 100% { transform: translateX(-50%) scale(1); } }
.order-bar-pulse { animation: order-bar-pop .5s ease; }
.order-bar-pulse .order-thumbs { animation: thumbs-in .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes thumbs-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.order-fly { position: fixed; z-index: 90; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--lime); box-shadow: 0 10px 26px rgba(0,0,0,.35); pointer-events: none; animation: order-fly .68s cubic-bezier(.3, .05, .35, 1) forwards; }
.order-fly img { width: 100%; height: 100%; object-fit: cover; }
.order-fly span { display: grid; place-items: center; width: 100%; height: 100%; background: var(--lime); color: var(--button-text); font-size: 22px; font-weight: 900; }
@keyframes order-fly { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1); } 70% { transform: translate(var(--fly-dx), var(--fly-dy)) scale(.72); opacity: 1; } 100% { transform: translate(var(--fly-dx), var(--fly-dy)) scale(.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .order-fly { animation: none; opacity: 0; } .order-bar-pulse { animation: none; } .order-bar-pulse .order-thumbs { animation: none; } }
.admin-shell { width: min(100%, 960px); margin: 0 auto; padding: 18px 16px 50px; }
/* On a wide screen the 960px cap was the reason the top bar felt cramped: the eight
   tabs plus the three action buttons need around 800px, so they were sharing a
   960px column and touching each other. Widening the shell gives the bar room to
   breathe and lets the denser admin content use the screen it is paid for, rather
   than stacking five tall cards down a narrow strip. The tab bar itself is
   unchanged, so it stays a single line and never becomes two rows. */
@media (min-width: 1280px) { .admin-shell { width: min(100%, 1240px); } }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.admin-nav-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ============================================================
   MENU TAB — 2026 look. Mobile-first: most owners manage the menu
   from a phone. Overview card (count + photo status + section jump
   chips + quick actions) → per-section cards with dish rows.
   ============================================================ */
.menu-overview { margin-top: 14px; }
.menu-search { display: grid; gap: 6px; max-width: 560px; margin-top: 15px; color: var(--muted); font-size: 12px; font-weight: 750; }
.menu-search input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--ad-surface, var(--paper)); color: var(--ink); font: inherit; font-size: 15px; }
.menu-overview [data-menu-search-status] { min-height: 1em; margin: 6px 0 0; }
.menu-search-empty { margin: 14px 0; }
body.admin-mode .admin-category[hidden], body.admin-mode .admin-meal[hidden] { display: none !important; }
.menu-overview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.menu-overview-head h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.menu-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.menu-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.menu-pill-ok { background: color-mix(in srgb, var(--lime) 14%, var(--paper)); color: color-mix(in srgb, var(--ink) 78%, var(--lime)); border: 1px solid color-mix(in srgb, var(--lime) 38%, var(--line)); }
.menu-pill-warn { background: color-mix(in srgb, #d9822b 14%, var(--paper)); color: color-mix(in srgb, #ffb668 82%, var(--ink)); border: 1px solid color-mix(in srgb, #d9822b 45%, var(--line)); }
.menu-jumps { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 2px; }
.menu-jump { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border-radius: 999px; background: var(--ad-surface, var(--paper)); border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 18%); color: var(--ink); font-size: 12.5px; font-weight: 800; transition: transform .15s ease, border-color .15s ease, background-color .15s ease; }
.menu-jump:hover { border-color: var(--lime); transform: translateY(-1px); }
.menu-jump:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.menu-jump-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--lime) 20%, var(--paper)); color: var(--ink); font-size: 10.5px; font-weight: 900; }
.menu-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 13px; }
.menu-quick { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 9px 11px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, var(--ink) 11%); border: 1px solid color-mix(in srgb, var(--line) 40%, var(--ink) 26%); box-shadow: 0 2px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06); color: var(--ink); text-align: left; transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.menu-quick:hover { transform: translateY(-1px); border-color: var(--lime); background: var(--ad-surface-hover, var(--paper)); }
.menu-quick:active { transform: translateY(0); }
.menu-quick:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.menu-quick-ico { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--lime) 18%, var(--paper)); font-size: 15px; }
.menu-quick-body { display: grid; gap: 1px; min-width: 0; }
.menu-quick-body strong { font-size: 13px; font-weight: 850; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-quick-body small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-quick-primary { background: linear-gradient(180deg, var(--ad-gold-hi, var(--lime)), var(--ad-gold, var(--lime)) 58%, var(--ad-gold-lo, var(--lime))); color: var(--button-text); border-color: transparent; box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.menu-quick-primary .menu-quick-ico { background: rgba(255,255,255,.26); }
.menu-quick-primary .menu-quick-body small { color: inherit; opacity: .78; }
.menu-quick-primary:hover { filter: brightness(1.05); }
.menu-hint { margin: 14px 2px 0; }
/* ============================================================
   WEBSITE SETUP CHECKLIST — the admin home for a new restaurant.
   One card, eleven steps, each deep-linking to where the work
   lives; ticks itself off as the owner finishes each part. It
   must read as a friendly to-do list, not a settings page: emoji
   tile, one-line title, quiet sub copy, actions on the right.
   ============================================================ */
.setup-checklist { position: relative; }
.setup-hide { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--line) 60%, var(--ink) 20%); background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.setup-hide:hover { color: var(--ink); border-color: var(--coral); }
.setup-hide:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.setup-details summary { display: flex; align-items: center; gap: 12px; padding: 4px 40px 4px 2px; cursor: pointer; list-style: none; }
.setup-details summary::-webkit-details-marker { display: none; }
.setup-details summary::marker { content: ''; }
.setup-details[open] summary { padding-bottom: 10px; }
.setup-details summary .menu-pill { flex: 0 0 auto; white-space: nowrap; }
.setup-steps { display: grid; gap: 7px; }
.setup-step { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, var(--ink) 9%); border: 1px solid color-mix(in srgb, var(--line) 55%, var(--ink) 20%); }
.setup-step.is-done { border-style: dashed; opacity: .78; }
.setup-step.is-done:hover { opacity: 1; }
.setup-ico { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--lime) 16%, var(--paper)); font-size: 17px; }
.setup-body { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.setup-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.setup-title strong { font-size: 13.5px; font-weight: 850; letter-spacing: -.01em; }
.setup-done { flex: 0 0 auto; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--button-text); font-size: 10.5px; font-weight: 900; }
.setup-body > small.muted { font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.setup-status { font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.setup-status-info { color: var(--muted); }
.setup-status-warn { color: #ffb668; }
.setup-status-ok { color: color-mix(in srgb, var(--ink) 72%, var(--lime)); }
.setup-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; max-width: 46%; }
.setup-actions .admin-appearance { flex: 0 0 auto; }
.setup-actions button, .setup-actions a { min-height: 36px; padding: 6px 12px; font-size: 12px; border-radius: 10px; text-decoration: none; }
.setup-hidden-row { margin: 0 0 10px; }
@media (max-width: 700px) {
  .setup-step { flex-wrap: wrap; }
  .setup-actions { max-width: 100%; width: 100%; justify-content: flex-start; padding-left: 45px; }
}
/* ============================================================
   AI TOOLS HUB — every AI feature as one emoji tile, the way
   Grab/Shopee/Lazada-trained thumbs expect: big icon, short
   label, tap and go. Tiles either scroll to a tool on this page
   or deep-link to the tab where the tool lives.
   ============================================================ */
.ai-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ai-tile { display: flex; align-items: flex-start; gap: 9px; min-height: 64px; padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, var(--ink) 11%); border: 1px solid color-mix(in srgb, var(--line) 40%, var(--ink) 26%); box-shadow: 0 2px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06); color: var(--ink); text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background-color .15s ease; }
.ai-tile:hover { transform: translateY(-1px); border-color: var(--lime); background: var(--ad-surface-hover, var(--paper)); }
.ai-tile:active { transform: translateY(0); }
.ai-tile:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.ai-tile-ico { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--lime) 16%, var(--paper)); font-size: 18px; }
.ai-tile-body { display: grid; gap: 1px; min-width: 0; }
.ai-tile-body strong { font-size: 12.5px; font-weight: 850; letter-spacing: -.01em; }
.ai-tile-body small { font-size: 10.5px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
/* Sidebar search: a real field in the menu, so finding a page never depends on
   remembering a shortcut. Typing swaps the section list for matches. */
.admin-nav-search { display: flex; align-items: center; gap: 7px; padding: 0 10px; margin-bottom: 10px; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--ink) 12%); border-radius: 12px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.admin-nav-search-ico { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.admin-nav-search-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.admin-nav-search input { flex: 1 1 auto; min-width: 0; padding: 9px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.admin-nav-search input:focus { outline: none; }
.admin-nav-results { display: grid; gap: 3px; margin-bottom: 10px; }
/* The layout rules further down set display:flex, so hiding needs to be more specific than they are. */
.admin-sidebar .admin-nav-results[hidden], .admin-sidebar .admin-nav-items[hidden], .admin-sidebar .admin-nav-label[hidden] { display: none; }
.admin-nav-result { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.admin-nav-result:hover { background: var(--ad-surface-hover, color-mix(in srgb, var(--paper) 66%, var(--ink) 12%)); border-color: color-mix(in srgb, var(--line) 70%, var(--ink) 10%); }
.admin-nav-result-text { display: grid; gap: 1px; min-width: 0; }
.admin-nav-result-text strong { font-size: 12.5px; font-weight: 800; }
.admin-nav-result-text small { font-size: 10.5px; color: var(--muted); }
.admin-nav-empty { padding: 6px 10px; }
/* The website page points at the logo page instead of carrying its controls. */
.brand-pointer { display: grid; gap: 6px; }
/* ============================================================
   GOOGLE MAPS PLACE CHECK — under the Maps URL field. Shows what
   the server extracted from the link and asks the owner to
   confirm it is the right listing before anyone relies on it.
   ============================================================ */
.maps-check { display: grid; gap: 4px; margin-top: 9px; padding: 10px 12px; border-left: 3px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--paper) 65%, var(--ink) 8%); }
.maps-check p { margin: 0; }
.maps-check-warn { border-left-color: #d9822b; }
.maps-check-ok { border-left-color: var(--lime); }
.maps-check-link { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; margin: 0 4px; font-size: 12px; border-radius: 9px; text-decoration: none; }
/* Quick-action notifications sit directly under the overview card so the actions stay clearly at the top */
.admin-notices { display: grid; gap: 5px; margin: 0 0 12px; }
.admin-notices:empty { display: none; }
.admin-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 15px; border-left: 3px solid var(--lime); }
.admin-alert h3 { margin: 2px 0 4px; font-size: 15px; }
.admin-alert .eyebrow { margin: 0; }
.admin-alert p { margin: 0; }
.admin-alert .form-actions { margin: 0; }
.admin-alert-langs { border-left-color: var(--coral); }
/* Minimal assist hints — one quiet row, tap to expand. Assistive, never a warning.
   Specificity note: these must beat `.card` (defined later) and `.admin-shell .card`,
   hence the `.card.admin-hint` / `.admin-shell .card.admin-hint` selectors. */
.card.admin-hint { margin: 0; padding: 0; overflow: hidden; border-left: 3px solid var(--lime); border-radius: 13px; box-shadow: none; }
.admin-hint details { margin: 0; padding: 0; }
.admin-hint summary { display: flex; align-items: center; gap: 9px; margin: 0; padding: 7px 12px; cursor: pointer; list-style: none; }
.admin-hint summary::-webkit-details-marker { display: none; }
.admin-hint summary::marker { content: ''; }
.assist-icon { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--lime) 20%, var(--paper)); font-size: 13px; }
.admin-hint-text { display: grid; gap: 0; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.admin-hint-text .eyebrow { margin: 0; font-size: 9.5px; }
.admin-hint-text strong { font-size: 13.5px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.admin-hint-text small { font-size: 11.5px; }
.hint-chevron { flex: 0 0 auto; font-size: 17px; line-height: 1; color: var(--muted); transition: transform .2s ease; }
.admin-hint details[open] .hint-chevron { transform: rotate(90deg); }
.admin-hint-body { display: grid; gap: 7px; padding: 0 12px 10px 47px; }
.admin-hint-body p { margin: 0; }
.admin-hint-body .form-actions { margin: 0; }
@keyframes hint-expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.admin-hint details[open] .admin-hint-body { animation: hint-expand .25s ease; }
.linklike { background: none; border: 0; padding: 0; color: var(--coral); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.job-banner { margin: 0 0 10px; }
.admin-category { margin: 14px 0; padding: 14px 13px 6px; border-radius: 18px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 80%, var(--ink) 10%); box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05); scroll-margin-top: 90px; }
.category-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 6px; }
.category-heading { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.category-title h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; text-transform: none; overflow-wrap: anywhere; }
.category-count { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.category-tools { display: flex; gap: 5px; }
.category-tools .icon-button { min-width: 34px; min-height: 34px; border-radius: 10px; }
.danger-icon { color: color-mix(in srgb, #b84938 82%, var(--ink)); }
.danger-icon:hover { border-color: color-mix(in srgb, #b84938 55%, var(--line)); }
.icon-button { min-width: 38px; min-height: 38px; padding: 6px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.admin-meal { display: grid; grid-template-columns: 76px minmax(0,1fr); grid-template-areas: "thumb body"; gap: 11px 12px; align-items: center; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 12px; transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.admin-meal:first-of-type { border-top: 0; }
.admin-meal:hover { background: color-mix(in srgb, var(--paper) 55%, var(--line) 12%); }
.admin-meal-thumb { grid-area: thumb; min-width: 0; }
.admin-meal-thumb img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 12%); box-shadow: 0 6px 16px rgba(0,0,0,.24); }
.admin-meal-image-empty { display: grid; place-items: center; width: 76px; height: 76px; padding: 5px; border: 1.5px dashed color-mix(in srgb, var(--line) 85%, var(--ink) 25%); border-radius: 14px; color: var(--muted); font-size: 10px; line-height: 1.15; text-align: center; }
.admin-meal.disabled { opacity: .5; }
.admin-meal.disabled .admin-meal-thumb { opacity: .7; }
.admin-meal-body { grid-area: body; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.admin-meal-info { min-width: 0; }
.admin-meal .meal-name { margin: 0; font-weight: 800; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.admin-meal .meal-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.admin-meal .meal-price { font-size: 13px; font-weight: 850; color: var(--ink); font-variant-numeric: tabular-nums; }
.meal-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.meal-badge-special { background: color-mix(in srgb, var(--lime) 18%, var(--paper)); color: color-mix(in srgb, var(--ink) 80%, var(--lime)); border: 1px solid color-mix(in srgb, var(--lime) 45%, var(--line)); }
.meal-badge-hidden { background: color-mix(in srgb, #d9822b 14%, var(--paper)); color: color-mix(in srgb, #ffb668 80%, var(--ink)); border: 1px solid color-mix(in srgb, #d9822b 45%, var(--line)); }
.admin-meal-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.admin-meal-actions button { flex: 0 0 auto; min-height: 34px; padding: 5px 12px; border-radius: 999px; background: var(--ad-surface, var(--paper)); border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 18%); color: var(--ink); font-size: 12px; font-weight: 800; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.admin-meal-actions button[data-edit] { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); }
.admin-meal-actions button[data-edit]:hover { background: color-mix(in srgb, var(--lime) 14%, var(--ad-surface, var(--paper))); }
@media (min-width: 700px) {
  .admin-meal { grid-template-columns: 84px minmax(0,1fr) auto; grid-template-areas: "thumb body actions"; align-items: center; gap: 10px 14px; }
  .admin-meal-body { gap: 4px; }
  .admin-meal-actions { justify-content: flex-end; max-width: 380px; }
  .menu-quick-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-quick { min-height: 62px; padding: 11px 13px; }
  .menu-quick-body strong { font-size: 13.5px; }
  .menu-quick-body small { font-size: 11px; }
  .admin-category { padding: 16px 17px 8px; }
  .menu-overview-head h2 { font-size: 22px; }
}
@media (min-width: 1024px) {
  .menu-quick-grid { grid-template-columns: repeat(6, 1fr); }
  .menu-quick { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 96px; padding: 13px; }
  .menu-quick-ico { width: 34px; height: 34px; }
  .menu-quick-body strong { white-space: normal; }
  .menu-quick-body small { white-space: normal; }
}
@media (max-width: 385px) {
  .menu-quick-grid { gap: 7px; }
  .menu-quick { min-height: 52px; padding: 8px 9px; gap: 8px; }
  .menu-quick-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
  .admin-meal { grid-template-columns: 64px minmax(0,1fr); grid-template-areas: "thumb body"; }
  .admin-meal-thumb img, .admin-meal-image-empty { width: 64px; height: 64px; }
  .admin-meal-actions button { min-height: 32px; padding: 4px 10px; font-size: 11.5px; }
}
/* Premium reorder / hide feedback — row stays in place, glows briefly so you see it happened */
@keyframes admin-nudge-up { 0% { transform: translateY(8px); } 35% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
@keyframes admin-nudge-down { 0% { transform: translateY(-8px); } 35% { transform: translateY(5px); } 100% { transform: translateY(0); } }
@keyframes admin-soft-pulse { 0% { opacity: .45; } 100% { opacity: 1; } }
.admin-meal.flash-up, .admin-category.flash-up { animation: admin-nudge-up .5s ease; box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 55%, transparent); background: color-mix(in srgb, var(--lime) 10%, transparent); }
.admin-meal.flash-down, .admin-category.flash-down { animation: admin-nudge-down .5s ease; box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 55%, transparent); background: color-mix(in srgb, var(--lime) 10%, transparent); }
.admin-meal.flash-toggle, .admin-category.flash-toggle, .admin-meal.flash-move, .admin-category.flash-move { animation: admin-soft-pulse .45s ease; box-shadow: 0 0 0 2px color-mix(in srgb, var(--lime) 45%, transparent); background: color-mix(in srgb, var(--lime) 8%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .admin-meal, .admin-category { transition: none; }
  .admin-meal.flash-up, .admin-meal.flash-down, .admin-meal.flash-toggle, .admin-meal.flash-move,
  .admin-category.flash-up, .admin-category.flash-down, .admin-category.flash-toggle, .admin-hint details[open] .admin-hint-body { animation: none; }
}
.card { margin: 18px 0; padding: 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.form-grid { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field label, .field legend { font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink); }
.field textarea { min-height: 94px; resize: vertical; }
.check-row { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 750; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.form-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.primary, .secondary, .danger { min-height: 46px; padding: 11px 16px; border-radius: 11px; font-weight: 850; }
.secondary { background: color-mix(in srgb, var(--paper) 82%, var(--line)); color: var(--ink); }
.danger { background: #fff0ed; color: #b84938; }
.photo-preview { width: 100%; max-width: 270px; aspect-ratio: 1.4; object-fit: cover; margin: 7px 0 10px; border-radius: 14px; background: #edf1e7; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-actions label, .photo-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 9px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 800; }
.photo-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* `display: inline-flex` above outranks the user-agent rule for [hidden], so a
   hidden Remove button would still be visible without this. */
.photo-actions [hidden], .photo-preview[hidden] { display: none; }
.photo-actions .danger { background: #fff0ed; border-color: color-mix(in srgb, #b84938 32%, var(--line)); color: #b84938; }
.photo-actions .danger:hover { background: color-mix(in srgb, #b84938 12%, var(--paper)); }
/* Welcome & logo: picture on the left, everything you can do to it on the right,
   so the preview and its controls read as one object instead of a loose stack. */
.brand-media { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 12px 0 4px; }
.brand-media > .photo-preview { flex: 0 0 auto; margin: 0; }
.brand-media-body { flex: 1 1 240px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.brand-media-body .field { margin: 0; }
.welcome-status { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 11px; font-size: 13px; font-weight: 750; line-height: 1.45; }
.welcome-status::before { content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: currentColor; }
.welcome-status-live { background: color-mix(in srgb, var(--lime) 12%, var(--paper)); color: color-mix(in srgb, var(--ink) 82%, var(--lime)); border: 1px solid color-mix(in srgb, var(--lime) 34%, var(--line)); }
.welcome-status-empty { background: var(--paper); color: var(--muted); border: 1px dashed var(--line); }
.welcome-layout-options { align-items: start; }
.welcome-layout-options .check { align-self: start; }
@media (max-width: 520px) { .brand-media { gap: 12px; } .brand-media > .photo-preview { max-width: 100%; } }
.welcome-shape-field { margin: 14px 0 6px; }
.welcome-shape-field select { min-height: 46px; }
.food-label-settings .check { min-height: 44px; }
.diet-peanuts { background: #5a3514; color: #fff2d8; }
.diet-badge.diet-peanuts { background: #5a3514; color: #fff2d8; }
.save-reminder { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--lime); border-radius: 8px; background: color-mix(in srgb, var(--lime) 12%, var(--paper)); color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.4; }
.ai-photo-options { display: grid; gap: 10px; margin: 8px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; }
.ai-photo-options legend { padding: 0 5px; }
.ai-photo-options .field { gap: 6px; }
.option-row { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 7px; align-items: start; margin-bottom: 12px; }
.option-main { display: grid; grid-template-columns: minmax(0,1fr) 105px; gap: 7px; }
.option-row input { min-height: 43px; padding: 8px; border: 1px solid #ccd5cc; border-radius: 9px; }
.option-remove { align-self: start; }
.option-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.option-tags .tag-choice span { padding: 5px 7px; font-size: 11px; }
.filter-fieldset { margin: 0; padding: 0; border: 0; }
.filter-fieldset legend { padding: 0; }
.tag-choice-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-choice { position: relative; display: inline-flex; min-height: 0; padding: 0; border: 0; }
.tag-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tag-choice span { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 750; }
.tag-choice input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--button-text); }
.tag-choice input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
.preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.preset-grid button { min-height: 48px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 750; }
/* Menu sections page: the sections the guest menu really has, one row each, so
   renaming and reordering is obvious instead of hidden on another page. */
.section-manage { display: grid; gap: 8px; margin: 4px 0 2px; }
.section-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.section-manage-name { display: grid; gap: 2px; min-width: 0; }
.section-manage-name strong { font-size: 13.5px; }
.preset-details { margin-top: 14px; }
.preset-details summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--muted); }
.preset-details .preset-grid { margin-top: 10px; }
.section-total { white-space: nowrap; flex: none; }
@media (max-width: 639px) { .section-side-note { display: none; } }
.theme-swatches { display: flex; gap: 8px; margin-top: 8px; }
.theme-swatches span { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; }
.qr-layout { display: grid; grid-template-columns: 155px minmax(0,1fr); gap: 16px; align-items: center; }
.qr-image { width: 155px; height: 155px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.generator-intro { background: color-mix(in srgb, var(--lime) 12%, var(--paper)); }
.generator-intro h2 { max-width: 560px; }
.generator-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0 20px; }
.generator-choice { display: flex; align-items: start; gap: 9px; min-height: 90px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); cursor: pointer; }
.generator-choice:has(input:checked) { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.generator-choice input { margin-top: 3px; accent-color: var(--lime); }
.generator-choice span { display: grid; gap: 5px; }
.generator-choice small { color: var(--muted); line-height: 1.35; }
/* The menu style picker: a small printed-page swatch beside each choice, so a
   low-tech owner can choose by look rather than by design vocabulary. */
.generator-styles { margin-top: 4px; }
/* The style picker shows a finished PORTRAIT menu page, four cards per row on a
   desktop and one per row on a phone. The page image is the whole explanation,
   so it must stay large enough to read the structure: a landscape crop of a
   portrait page showed the same middle band for every style, which is why the
   eight cards looked like one design in eight colours. */
.menu-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 14px 0 0; }
.menu-style-card-image { position: relative; display: grid; gap: 9px; padding: 9px; align-items: start; min-height: 0; }
/* The radio covers the whole card: the picture itself is the target, which is
   how a non-technical owner expects a gallery to behave. It stays a real radio,
   so keyboard and screen readers keep working. */
.menu-style-card-image > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.menu-style-card-image .menu-style-copy { padding: 0 3px 3px; }
.menu-style-card-image .menu-style-copy strong { font-size: 13.5px; }
.menu-style-card-image .menu-style-copy small { font-size: 11.5px; }
.menu-style-card-image:has(input:checked) { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime), 0 10px 26px rgba(0, 0, 0, .22); }
.menu-style-card-image:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.menu-style-example { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); background: #111; }
.menu-style-badge { position: absolute; top: 19px; left: 19px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: var(--button-text); font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.lang-included { display: inline-flex; align-items: center; align-self: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--lime); color: var(--button-text); font-size: 12px; font-weight: 700; }
.ai-usage-table td:last-child { white-space: nowrap; }
@media (max-width: 700px) { .menu-style-grid { grid-template-columns: 1fr; } }
.menu-style-card { min-height: 0; align-items: center; padding: 10px; gap: 10px; }
.generator-choice .menu-style-swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; flex: none; width: 46px; height: 60px; padding: 7px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09); }
.generator-choice .menu-style-swatch i { display: block; height: 4px; border-radius: 2px; background: currentColor; opacity: .72; }
.generator-choice .menu-style-swatch i:first-child { height: 11px; width: 74%; opacity: 1; }
.generator-choice .menu-style-swatch i:last-child { width: 58%; }
.menu-style-copy { display: grid; gap: 3px; min-width: 0; }
.menu-style-copy strong { font-size: 12px; line-height: 1.25; }
.menu-style-copy small { font-size: 11px; }
.menu-style-match { background: linear-gradient(150deg, #f8f4ec, #e4dacb); color: #4c4234; }
.menu-style-heritage-italian { background: linear-gradient(150deg, #f1e3c4, #dcc69b); color: #7a1f2b; }
.menu-style-steakhouse-noir { background: linear-gradient(150deg, #1b1813, #0a0908); color: #d8b56a; }
.menu-style-modern-minimal { background: linear-gradient(150deg, #ffffff, #eceff1); color: #30343a; }
.menu-style-coastal-fresh { background: linear-gradient(150deg, #e9f5f1, #cfe7e2); color: #146b63; }
.generator-category-list { display: flex; flex-wrap: wrap; gap: 7px; }
.generator-guidance { min-height: 44px; margin: 14px 0 4px; padding: 11px 12px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 76%, var(--line)); color: var(--muted); font-size: 12px; line-height: 1.45; }
.generator-guidance.notice { border-left: 3px solid var(--lime); color: var(--ink); }
.generator-guidance.warning { border-left: 3px solid var(--coral); color: var(--ink); }
.generator-history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.generator-history-row p { margin: 4px 0 0; }
/* AI assistant connections (MCP integration tokens) */
.integrations-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.integrations-row-main { display: flex; flex-direction: column; gap: 3px; }
.integrations-row-revoked { opacity: 0.62; }
.integrations-token { display: block; margin-top: 6px; padding: 9px 10px; border-radius: 8px; background: color-mix(in srgb, var(--paper) 76%, var(--line)); font-size: 12px; word-break: break-all; user-select: all; }
.generator-preview { overflow: hidden; }
.generator-cover-status { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--paper) 78%, var(--line)); }
.generator-cover-status img { width: 74px; height: 52px; object-fit: cover; border-radius: 8px; }
.generator-cover-status > div { flex: 1; }
.generator-cover-status p { margin: 4px 0 0; }
.generated-menu-wrap { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.generated-menu-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.generated-menu-toolbar > .muted { margin-right: auto; }
.generated-menu-actions { display: flex; gap: 7px; }
.generated-menu-page { max-width: 900px; margin: 0 auto; padding: 32px; background: var(--generated-page); color: var(--generated-ink); border: 1px solid var(--generated-line); border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.generated-menu-header { text-align: center; border-bottom: 1px solid var(--generated-line); padding-bottom: 22px; margin-bottom: 20px; }
.generated-menu-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; margin-bottom: 18px; }
.generated-menu-logo { width: 66px; height: 66px; margin: 0 auto 12px; object-fit: contain; border-radius: 14px; }
.generated-menu-page .eyebrow { color: var(--generated-accent); }
.generated-menu-page h2 { margin: 6px 0; color: var(--generated-ink); }
.generated-menu-title { margin: 0; color: var(--generated-muted); font-size: 13px; }
.generated-menu-item { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--generated-line); }
.generated-menu-item img, .generated-menu-item-photo { width: 94px; height: 76px; object-fit: cover; border-radius: 10px; background: var(--generated-card); display: grid; place-items: center; color: var(--generated-muted); font-size: 11px; }
.generated-menu-item-top { display: flex; justify-content: space-between; gap: 10px; }
.generated-menu-item h3 { margin: 0; color: var(--generated-ink); font-size: 16px; }
.generated-menu-item strong { color: var(--generated-accent); white-space: nowrap; }
.generated-menu-item p { margin: 5px 0 0; color: var(--generated-muted); font-size: 12px; line-height: 1.4; }
.generated-menu-page footer { margin-top: 22px; color: var(--generated-muted); text-align: center; font-size: 11px; }
.import-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.import-item:first-of-type { border-top: 0; }
.import-item button { flex: 0 0 auto; min-height: 39px; padding: 8px 11px; border-radius: 9px; background: var(--lime); color: var(--ink); font-weight: 850; font-size: 12px; }
/* Premium order & staff modals — one card language shared with the
   filter bar: hairline rules, letterspaced small-caps eyebrow, chip-style
   quantity steppers, tabular-numeral totals. */
.modal-wrap { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--cream) 58%, transparent); backdrop-filter: blur(9px) saturate(1.05); -webkit-backdrop-filter: blur(9px) saturate(1.05); }
.modal { width: min(100%, 590px); max-height: 92vh; overflow: auto; padding: 22px 18px max(24px, env(safe-area-inset-bottom)); border-radius: 24px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 10%); box-shadow: 0 32px 80px rgba(0, 0, 0, .4); }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.modal-head h2 { margin: 0; letter-spacing: -.03em; }
.close { flex: 0 0 auto; min-width: 42px; min-height: 42px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--ink); font-size: 19px; line-height: 1; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.close:hover { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); transform: translateY(-1px); }
.close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.order-line { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); align-items: center; transition: opacity .2s ease; }
.order-line:hover { opacity: .92; }
.order-line-thumb { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 12%); background: color-mix(in srgb, var(--paper) 70%, var(--line)); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.order-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-line-thumb .order-thumb-fallback { border-radius: 0; }
.order-line-title { font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.order-line-meta { margin-top: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.quantity { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.quantity button { display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; padding: 0; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 900; font-size: 14px; line-height: 1; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.quantity button:hover { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); transform: translateY(-1px); }
.quantity button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.quantity span { min-width: 20px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.order-line .danger { flex: 0 0 auto; min-height: 34px; margin-left: 5px; padding: 6px 11px; border-radius: 999px; background: transparent; border: 1px solid color-mix(in srgb, #b84938 45%, var(--line)); color: color-mix(in srgb, #b84938 82%, var(--ink)); font-size: 12px; font-weight: 800; transition: border-color .18s ease, background-color .18s ease; }
.order-line .danger:hover { background: color-mix(in srgb, #b84938 14%, transparent); border-color: #b84938; }
.order-line .danger:focus-visible { outline: 2px solid #b84938; outline-offset: 2px; }
.order-line > strong { font-variant-numeric: tabular-nums; }
.option-filter-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-right: auto; }
.order-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 19px 0; padding-top: 15px; border-top: 1px solid var(--ink); font-size: 19px; font-weight: 900; }
.order-total span:first-child { font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--coral); }
.order-total span:last-child { font-variant-numeric: tabular-nums; }
#order-modal .field:has(#delivery-choice) { padding: 13px 14px 15px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
#order-modal .check { border: 0; background: none; padding: 0; min-height: 0; }
#order-modal .field:has(#delivery-choice) .delivery-payment { margin-top: 12px; padding-top: 13px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
#order-modal .delivery-payment h3 { font-size: 15px; }
#order-modal .form-actions button { border-radius: 14px; }
.staff-modal .modal { border-left: 3px solid var(--coral); }
.staff-modal .modal-head .eyebrow { font-size: 10px; letter-spacing: .22em; }
.staff-modal .modal-head h2 { margin-bottom: 2px; }
.staff-scroll-hint { margin: -4px 0 8px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-align: center; }
.staff-context, .staff-language-details { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.staff-context strong, .staff-language-details strong { color: var(--ink); }
.empty { padding: 27px 10px; text-align: center; color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .order-line, .close, .quantity button, .order-line .danger { transition: none; } .close:hover, .quantity button:hover, .order-line .danger:hover { transform: none; } }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 90px; transform: translateX(-50%); max-width: calc(100% - 30px); padding: 11px 15px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 750; box-shadow: var(--shadow); }
/* Business footer — three-column premium contact block: brand + hours,
   contact rows with icons, social buttons, and a Google Maps frame. */
.business-footer { position: relative; margin: 46px 0 30px; padding: 30px 0 100px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); color: var(--ink); }
.business-footer::before { content: ""; position: absolute; top: -1px; left: 0; width: 72px; height: 1px; background: var(--coral); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 34px; align-items: start; }
.footer-brand h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.footer-tagline { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.footer-brand .eyebrow, .footer-contact h3, .footer-map-col h3 { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--coral); }
.footer-contact h3, .footer-map-col h3 { margin: 0 0 12px; }
.hours-table { width: 100%; max-width: 320px; border-collapse: collapse; font-size: 13px; }
.hours-table th { font-weight: 600; color: var(--muted); text-align: left; padding: 4px 14px 4px 0; white-space: nowrap; }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; padding: 4px 0; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--coral); font-weight: 800; }
.hours-table tr.hours-closed th, .hours-table tr.hours-closed td { color: var(--muted); opacity: .75; }
.contact-list { display: grid; gap: 4px; }
.contact-row { display: flex; align-items: start; gap: 11px; padding: 9px 11px; margin: 0; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .18s ease; }
a.contact-row:hover { background: color-mix(in srgb, var(--lime) 9%, transparent); }
a.contact-row:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.contact-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--paper) 60%, transparent); font-size: 15px; }
.contact-text { display: grid; gap: 1px; min-width: 0; }
.contact-text strong { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.contact-text span { color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.social-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; margin-left: 11px; }
.social-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 65%, transparent); color: var(--ink); font-weight: 800; font-size: 15px; text-decoration: none; transition: border-color .18s ease, transform .18s ease, color .18s ease, background-color .18s ease; }
.social-btn[aria-label="Facebook"] { display: inline-flex; align-items: center; gap: 8px; width: auto; min-width: 42px; padding: 0 12px; }
.social-btn[aria-label="Facebook"] .social-label { font-size: 12px; white-space: nowrap; }
.social-btn:hover { border-color: var(--lime); color: var(--coral); transform: translateY(-2px); }
.social-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.footer-map { border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.footer-map iframe { display: block; width: 100%; height: 210px; border: 0; filter: saturate(.92); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-map-col { grid-column: 1 / -1; } }
@media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.hero-preview { aspect-ratio: 1120 / 460; }
#hero-preview { width: min(100%, 270px); height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--paper); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 18px; background: var(--menu-bg, var(--cream)); }
.login-card { width: min(100%, 430px); padding: 28px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card.setup-card { width: min(100%, 520px); }
.login-card h1 { margin-bottom: 10px; }
.login-card > .muted { line-height: 1.5; }
.setup-note { display: grid; gap: 5px; margin: 18px 0; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--lime) 45%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--lime) 9%, var(--paper)); font-size: 13px; line-height: 1.45; }
.setup-note span { color: var(--muted); }
.login-back { width: 100%; margin-top: 10px; }
.error-message { padding: 10px 12px; border-radius: 9px; background: #fff0ed; color: #b84938; font-size: 13px; }
.upload-label { position: relative; }
.upload-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.logo-preview { width: 140px; aspect-ratio: 1; }
#restaurant-logo-preview { width: 160px; height: auto; aspect-ratio: 1; object-fit: contain; background: transparent; }
@media (min-width: 640px) {
  .shell, .admin-shell { padding-left: 25px; padding-right: 25px; }
  .form-grid.two { grid-template-columns: 1fr 1fr; }
  .hero.hero-image { aspect-ratio: 1024 / 430; }
  .specials .meal-card { width: min(22vw, 250px); flex-basis: min(22vw, 250px); }
}
@media (min-width: 1024px) {
  .hero.hero-image { aspect-ratio: 1120 / 460; }
  .specials { overflow-x: auto; }
  .specials .meal-card { width: min(20vw, 250px); flex-basis: min(20vw, 250px); }
}
@media (max-width: 385px) {
  .qr-layout { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .hero.hero-image { aspect-ratio: 720 / 640; }
  .business-footer { display: block; }
  .generator-choice-grid { grid-template-columns: 1fr; }
  .generator-history-row { align-items: start; flex-direction: column; }
  .generated-menu-page { padding: 22px 16px; }
  .generated-menu-item { grid-template-columns: 72px minmax(0,1fr); gap: 10px; }
  .generated-menu-item img, .generated-menu-item-photo { width: 72px; height: 64px; }
  .generated-menu-item-top { display: block; }
  .generated-menu-item strong { display: block; margin-top: 4px; }
  .generated-menu-actions { width: 100%; }
  .generated-menu-actions button { flex: 1; }
}
/* Admin command bar — one line on desktop/tablet: brand · tabs · actions.
   Below 900px the actions fold into a burger menu; tabs stay one row. */
.admin-topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--menu-bg, var(--cream)) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 18px; padding: 9px 12px; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: admin-topbar-in .45s cubic-bezier(.2,.8,.2,1) both; }
.admin-topbar-row { display: flex; align-items: center; gap: 14px; }
.admin-brand { display: grid; gap: 1px; min-width: 0; flex: 0 1 auto; margin-right: auto; }
.admin-brand-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--coral); white-space: nowrap; }
.admin-brand h1 { margin: 0; font-size: 17px; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.admin-topbar .admin-nav-items { display: flex; flex: 0 1 auto; min-width: 0; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.admin-topbar .admin-nav-items .admin-tab { flex: 0 0 auto; min-height: 38px; padding: 7px 13px; font-size: 13px; }
.admin-topbar .admin-nav-actions { display: flex; flex: 0 0 auto; }
.admin-topbar .admin-nav-actions .subtle-action { min-height: 38px; padding: 7px 12px; font-size: 12.5px; }
.admin-burger { display: none; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 70%, transparent); cursor: pointer; position: relative; z-index: 32; }
.burger-lines { display: grid; gap: 4px; place-items: center; width: 18px; margin: 0 auto; }
.burger-lines i { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.admin-burger.open .burger-lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.admin-burger.open .burger-lines i:nth-child(2) { opacity: 0; }
.admin-burger.open .burger-lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.admin-burger:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* Mobile menu — an overlay card anchored below the bar. It never pushes
   the page down: it floats above the content and closes on pick/outside tap. */
.admin-mobile-menu { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 40; display: grid; gap: 4px; padding: 10px; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--ink) 12%); border-radius: 16px; background: color-mix(in srgb, var(--paper) 92%, var(--ink) 8%); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.admin-mobile-menu[hidden] { display: none; }
.admin-mobile-menu:not([hidden]) { animation: admin-menu-in .22s cubic-bezier(.2,.8,.2,1) both; }
.admin-mobile-tabs { display: grid; gap: 4px; }
.admin-mobile-menu .admin-tab { width: 100%; justify-content: flex-start; min-height: 46px; }
.admin-mobile-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); margin-top: 4px; }
.admin-mobile-actions .subtle-action { flex: 1 1 auto; justify-content: center; }
/* Phones only: tabs fold into the burger menu; tablet keeps the one-line tabs. */
@media (max-width: 619px) {
  .admin-topbar { position: sticky; }
  .admin-topbar .admin-nav-actions { display: none; }
  .admin-topbar .admin-nav-items { display: none; }
  .admin-burger { display: block; }
  .admin-brand { margin-right: auto; }
  .admin-topbar-row { justify-content: space-between; }
}
@media (min-width: 620px) {
  .admin-mobile-menu { display: none; }
}
/* Tablet: tighten tab padding so the one line fits between 620–899px. */
@media (max-width: 899px) and (min-width: 620px) {
  .admin-topbar { padding: 7px 8px; }
  .admin-topbar-row { gap: 7px; }
  .admin-brand { flex: 0 1 74px; margin-right: 0; }
  .admin-brand h1 { max-width: 74px; font-size: 14px; }
  .admin-topbar .admin-nav-items { flex: 1 1 auto; flex-wrap: nowrap; gap: 1px; padding: 0; }
  .admin-topbar .admin-nav-items .admin-tab { min-width: 0; padding: 6px 2px; font-size: clamp(9px, 1.45vw, 11px); letter-spacing: -.04em; }
  .admin-topbar .admin-nav-actions { gap: 4px; }
  .admin-topbar .admin-nav-actions .subtle-action { padding: 6px 5px; font-size: 10px; }
}
/* Medium desktop/tablet landscape: keep the complete command bar inside the
   960px admin shell before the wide desktop spacing becomes available. */
@media (max-width: 1199px) and (min-width: 900px) {
  .admin-topbar { padding: 8px 9px; }
  .admin-topbar-row { gap: 8px; }
  .admin-brand { flex: 0 1 132px; margin-right: 0; }
  .admin-brand h1 { max-width: 132px; font-size: 16px; }
  .admin-topbar .admin-nav-items { flex: 1 1 auto; flex-wrap: nowrap; gap: 2px; padding: 0; }
  .admin-topbar .admin-nav-items .admin-tab { min-width: 0; padding: 6px 7px; font-size: 11.5px; }
  .admin-topbar .admin-nav-actions { gap: 4px; }
  .admin-topbar .admin-nav-actions .subtle-action { padding: 6px 8px; font-size: 11px; }
}
/* Wide desktop: the bar is a SINGLE-LINE command bar, and it is now carrying
   eight sections. The base .admin-nav-items wraps, so an explicit nowrap plus a
   slightly tighter scale is what stops the last tab from stacking onto a second
   row at 1200–1440px — which is exactly the regression the eighth tab caused.
   Labels shrink with the bar rather than the bar growing to fit them. */
@media (min-width: 1200px) {
  .admin-topbar .admin-nav-items { flex-wrap: nowrap; gap: 2px; padding: 0; }
  .admin-topbar .admin-nav-items .admin-tab { min-width: 0; padding: 7px 9px; font-size: 12.5px; }
}
@media (min-width: 1500px) {
  .admin-topbar .admin-nav-items { gap: 4px; }
  .admin-topbar .admin-nav-items .admin-tab { padding: 7px 12px; font-size: 13px; }
}
@keyframes admin-topbar-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes admin-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .admin-topbar, .admin-mobile-menu:not([hidden]) { animation: none; }
  .admin-tab, .admin-nav-actions .subtle-action { transition: none; }
  .admin-tab:hover, .admin-nav-actions .subtle-action:hover { transform: none; }
}
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.admin-nav h1 { font-size: clamp(22px, 5.5vw, 32px); }
.admin-nav-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-nav-actions .subtle-action { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; background: color-mix(in srgb, var(--paper) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; transition: transform .12s, box-shadow .12s; }
.admin-nav-actions .subtle-action:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--lime), 0 6px 18px rgba(0,0,0,.2); }
.admin-nav-actions .qr-action { background: var(--lime); border-color: var(--lime); color: var(--button-text); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.qr-icon { flex: 0 0 auto; }
/* Command-bar tabs: scrollable on tiny phones via page scroll, never a nested
   X scrollbar. Segmented container, sliding feel via the active gradient. */
.admin-tabs { margin: 2px 0 0; }
.admin-nav-items { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--ink) 12%); border-radius: 14px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.admin-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; min-height: 42px; padding: 8px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .2s ease; }
.admin-tab:hover { transform: translateY(-1px); }
.admin-tab:hover { background: var(--ad-surface-hover, color-mix(in srgb, var(--paper) 66%, var(--ink) 12%)); }
.admin-tab.active { background: var(--paper); border-color: color-mix(in srgb, var(--line) 80%, var(--ink) 14%); box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 0 1px 0 var(--ad-card-hi, rgba(255, 255, 255, .07)); }
.admin-tab.active:hover { background: var(--paper); }
.admin-tab:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.admin-subbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.admin-back { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.admin-back:hover { color: var(--ink); background: var(--ad-surface-hover, color-mix(in srgb, var(--paper) 66%, var(--ink) 12%)); }
.admin-back:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.settings-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0 12px; }
.settings-tabs .pill { min-height: 44px; flex: 0 0 auto; }
.qr-modal { text-align: center; }
.qr-image-large { width: min(100%, 320px); aspect-ratio: 1; margin: 6px auto 10px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.qr-url { font-size: 12px; color: var(--muted); word-break: break-all; }
.custom-qr-builder { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--paper) 72%, transparent); text-align: left; }
.custom-qr-builder h3 { margin-bottom: 5px; }
.custom-qr-builder .form-actions { align-items: end; }
.custom-qr-note-field { flex: 1 1 180px; min-width: 0; }
.custom-qr-note-field span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }
.custom-qr-preview { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.custom-qr-preview .qr-image-large { width: min(100%, 240px); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border-radius: 11px; background: color-mix(in srgb, var(--paper) 82%, var(--line)); color: var(--ink); font-weight: 800; font-size: 13px; text-decoration: none; border: 1px solid var(--line); }
.cat-toggle { min-height: 36px; padding: 6px 10px; font-size: 11px; }
.preset-visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 2px; }
.preset-visual { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-align: left; display: grid; gap: 6px; }
.preset-visual.active { outline: 2px solid var(--lime); }
.preset-mock { display: grid; gap: 4px; padding: 10px; border: 1px solid; border-radius: 10px; }
.preset-mock-hero { height: 22px; border-radius: 6px; opacity: .9; }
.preset-mock-title { font-weight: 900; }
.preset-mock-btn { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; width: max-content; }
.preset-mock-accent { height: 6px; border-radius: 999px; width: 60%; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0; }
.color-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.color-cell input { width: 44px; height: 32px; border: 0; background: none; padding: 0; }
/* Premium filter bar — Zephyr-inspired: hairline rules, letterspaced
   small-caps labels, quiet chips that fill with the theme accent. */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; }
.chip:hover { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
.chip .chip-emoji { font-size: 13px; }
.chip .chip-index { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.active { background: var(--lime); border-color: var(--lime); color: var(--button-text); box-shadow: 0 6px 18px color-mix(in srgb, var(--lime) 30%, transparent); }
.chip.active .chip-index { color: color-mix(in srgb, var(--button-text) 70%, transparent); }
.chip:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* Guest language switcher — one quiet current flag with an accessible menu */
.lang-switch { position: relative; flex: 0 0 auto; }
.lang-trigger { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink); font-size: 20px; line-height: 1; box-shadow: 0 8px 18px rgba(0, 0, 0, .12); transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.lang-trigger:hover, .lang-trigger[aria-expanded="true"] { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 18%, var(--paper)); transform: translateY(-1px); }
.lang-trigger:focus-visible, .lang-option:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.lang-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; display: grid; width: min(244px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--paper) 96%, var(--menu-bg, var(--cream))); box-shadow: 0 18px 42px rgba(0, 0, 0, .24); }
.lang-menu[hidden] { display: none; }
.lang-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 7px 9px; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
.lang-option:hover, .lang-option.active { background: color-mix(in srgb, var(--lime) 15%, transparent); }
.lang-option-flag { font-size: 19px; line-height: 1; text-align: center; }
.lang-option-names { display: grid; gap: 1px; min-width: 0; }
.lang-option-names strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.lang-option-names span { color: var(--muted); font-size: 11px; }
.lang-option-check { color: var(--lime); font-size: 15px; font-weight: 900; text-align: center; }
.generator-languages { margin-top: 4px; }
.generator-lang-check.lang-unavailable { opacity: .55; }
.generated-menu-lang { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--generated-line); color: var(--generated-accent); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.brandbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.brandbar .brand { min-width: 0; }
/* Admin — Languages: one compact list with a hairline between rows.
   A bordered check row inside a bordered language card inside the page card made
   six languages taller than the phone screen, with the status lost in small text. */
.languages-card { border-left: 3px solid var(--coral); }
.languages-card .section-heading { flex-wrap: wrap; row-gap: 2px; }
.languages-card .section-heading > div { flex: 1 1 180px; min-width: 0; }
.languages-card [data-langs-status] { flex: 0 0 auto; }
.lang-list { display: grid; margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.lang-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.lang-toggle { grid-column: 1; display: flex; align-items: center; gap: 9px; margin: 0; min-height: 32px; cursor: pointer; }
.lang-toggle input { width: 18px; height: 18px; accent-color: var(--lime); }
.lang-names { display: inline-flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-weight: 750; }
.lang-native { color: var(--muted); font-size: 12px; font-weight: 600; }
.lang-row-status { grid-column: 1; color: var(--muted); font-size: 12px; line-height: 1.35; }
.lang-row-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 34px; padding: 6px 14px; font-size: 12px; white-space: nowrap; }
.lang-note { margin: 12px 0 0; }
.lang-last { grid-column: 1 / -1; margin: 2px 0 0; color: var(--coral); font-weight: 600; line-height: 1.35; }
.lang-flag { font-size: 16px; }
.meal-languages .meal-lang-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; background: color-mix(in srgb, var(--paper) 60%, transparent); }
.meal-lang-row.untranslated { border-style: dashed; }
.meal-lang-row.stale { border-color: color-mix(in srgb, var(--coral) 65%, var(--line)); }
.meal-lang-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lang-stale-note { font-size: 11px; font-weight: 700; color: var(--coral); }
.meal-lang-inputs { display: grid; gap: 8px; }
.meal-lang-inputs input, .meal-lang-inputs textarea { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--menu-bg); color: var(--ink); font: inherit; }
.meal-lang-inputs textarea { min-height: 64px; resize: vertical; }
.meal-lang-row .meal-lang-actions { display: flex; justify-content: flex-end; }
.menu-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.menu-image-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.menu-image-card img { width: 100%; height: auto; object-fit: contain; display: block; background: #eee; }
.menu-image-card > div { padding: 10px; display: grid; gap: 6px; }
.print-card { background: color-mix(in srgb, var(--lime) 10%, var(--paper)); }
.powered-by { text-align: center; font-size: 11px; color: var(--muted); margin: 0 0 90px; opacity: .75; }
.powered-by a { color: inherit; text-decoration: none; }
.bulk-photos { border-left: 3px solid var(--lime); }
.progress { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 60%, var(--line)); overflow: hidden; margin-top: 10px; }
.progress-bar { height: 100%; width: 0%; background: var(--lime); transition: width .3s; }
/* House Style is a food-photo picker: square photographs, not printed menu
   pages. The reference panel and the try-it photo sit in the same column so
   the owner reads it as one decision: choose a look, see it, approve it. */
.photo-style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.photo-style-card { position: relative; display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; }
.photo-style-card > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.photo-style-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: #dedbd4; }
.photo-style-card:has(input:checked) { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.photo-style-card:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.photo-style-card-copy { display: grid; gap: 3px; padding: 0 4px 4px; }
.photo-style-card-copy strong { font-size: 13px; }
.photo-style-card-copy small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.photo-style-current { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 11px; background: color-mix(in srgb, var(--lime) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--lime) 22%, var(--line)); font-size: 13px; }
.photo-style-current-check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--lime); color: var(--button-text); font-size: 11px; font-weight: 900; }
.photo-style-current-thumb { width: 44px; height: 44px; margin-left: auto; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.photo-style-unsaved { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--coral); }
.photo-style-reference { margin-top: 18px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper) 70%, var(--menu-bg)); }
.photo-style-reference h3 { margin: 0 0 4px; font-size: 15px; }
.photo-style-reference p { margin: 0 0 10px; }
.photo-style-ref-preview { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; padding: 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.photo-style-ref-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex: none; }
.photo-style-ref-preview > div { display: grid; gap: 4px; }
.photo-style-ref-preview p { margin: 0; }
.photo-style-ref-preview .photo-actions { margin: 4px 0 0; }
.photo-style-permission { margin: 6px 0 4px; }
.photo-style-reference .upload-label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.photo-style-result { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.photo-style-result-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.photo-style-result-body { display: grid; gap: 8px; }
.photo-style-result-body .field { margin: 0; }
.photo-style-result-body textarea { min-height: 74px; }
.photo-style-result-body .form-actions { margin-top: 2px; }
.photo-style-result-meal { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.photo-style-empty { margin-top: 10px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--paper) 60%, var(--menu-bg)); }
.photo-style-empty p { margin: 0 0 10px; }
.photo-style-empty .form-actions { margin: 0; }
.photo-style-website summary { font-size: 13px; }
.photo-style-step .section-heading { margin-bottom: 2px; }
.photo-style-step h2, .photo-style-hero h2 { margin-bottom: 6px; }
.photo-style-test .section-heading > span { white-space: nowrap; }
@media (max-width: 960px) { .photo-style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .photo-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .photo-style-card { padding: 6px; gap: 6px; border-radius: 12px; }
  .photo-style-card-copy strong { font-size: 12px; }
  .photo-style-card-copy small { font-size: 10.5px; }
  .photo-style-result { grid-template-columns: 1fr; gap: 12px; }
  .photo-style-result-img { max-height: 320px; }
  .photo-style-current-thumb { margin-left: 0; }
  .photo-style-reference { padding: 12px; }
  .photo-style-ref-preview { gap: 10px; }
  .photo-style-ref-preview img { width: 76px; height: 76px; }
}
.hours-grid { display: grid; gap: 8px; }
.hours-row { display: grid; grid-template-columns: 90px 1fr 12px 1fr auto; gap: 8px; align-items: center; }
.hours-day { font-size: 12px; font-weight: 800; }
.hours-closed { min-height: 40px; font-size: 12px; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.seo-table td { border-top: 1px solid var(--line); padding: 6px 4px; }
.seo-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; }
.photo-log-table td:last-child, .photo-log-table th:last-child { text-align: right; white-space: nowrap; }
.seo-status { margin-top: 8px; }
@media (max-width: 560px) { .hours-row { grid-template-columns: 70px 1fr 1fr; } .hours-row > span:nth-child(3) { display: none; } .hours-closed { grid-column: 1 / -1; } }

/* The owner UI has its own palette. Guest theme presets and restaurant branding
   are applied only on the public menu and cannot recolor admin controls. */
:root[data-admin-theme="light"] {
  --menu-bg: #edeae2; --cream: #edeae2; --paper: #f7f5ef; --ink: #141414;
  --muted: #4f5a55; --line: #d6dcd8; --lime: #0e5f55; --coral: #8a6a1f;
  --button-text: #ffffff; --tag-bg: #e8e7e0; --tag-text: #0d2b2b;
  --hero-bg: #e7ebe7; --order-bg: #ffffff; --shadow: 0 16px 38px rgba(23, 35, 27, .10);
  --menu-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-admin-theme="dark"] {
  /* Near-black, not the old grey-green. The admin panels sit a few steps above
     the page so cards still separate from the background without turning the
     whole screen a colour the owner never chose. */
  --menu-bg: #050505; --cream: #050505; --paper: #0e0e0e; --ink: #f4f4f2;
  --muted: #a6a6a2; --line: #242424; --lime: #2f9e8f; --coral: #d9b45f;
  --button-text: #17130c; --tag-bg: #171717; --tag-text: #a9d5bc;
  --hero-bg: #0e0e0e; --order-bg: #090909; --shadow: 0 18px 45px rgba(0, 0, 0, .48);
  --menu-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
body.admin-mode { --ad-surface: color-mix(in srgb, var(--paper) 91%, var(--ink) 3%); --ad-surface-hover: color-mix(in srgb, var(--paper) 78%, var(--ink) 11%); min-height: 100vh; background: var(--menu-bg); color: var(--ink); font-family: var(--menu-font); }
body.admin-mode.has-menu-background::before { display: none; }
body.admin-mode .admin-shell { --ad-gold-hi: color-mix(in srgb, var(--lime) 62%, #fff); --ad-gold: var(--lime); --ad-gold-lo: color-mix(in srgb, var(--lime) 74%, #000); --ad-surface: color-mix(in srgb, var(--paper) 91%, var(--ink) 3%); --ad-surface-hover: color-mix(in srgb, var(--paper) 78%, var(--ink) 11%); --ad-ring: 0 0 0 3px color-mix(in srgb, var(--lime) 48%, transparent); --ad-card-hi: rgba(255,255,255,.06); --ad-shadow: var(--shadow); }
body.admin-mode .login-shell { position: relative; background: var(--menu-bg); color: var(--ink); font-family: var(--menu-font); }
body.admin-mode .login-card { background: var(--paper); border-color: var(--line); color: var(--ink); }
body.admin-mode .login-shell .eyebrow, body.admin-mode .admin-shell .eyebrow { color: var(--coral); }
body.admin-mode .login-shell .muted, body.admin-mode .admin-shell .muted { color: var(--muted); }
body.admin-mode .login-shell .field input, body.admin-mode .login-shell .field select, body.admin-mode .login-shell .field textarea { background: var(--paper); border-color: var(--line); color: var(--ink); }
body.admin-mode .login-shell .primary, body.admin-mode .admin-shell .primary { background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 86%, white), var(--lime) 58%, color-mix(in srgb, var(--lime) 80%, black)); color: var(--button-text); border: 1px solid var(--lime); }
body.admin-mode .login-shell .secondary, body.admin-mode .login-shell .linklike { background: var(--ad-surface, var(--paper)); color: var(--ink); border: 1px solid var(--line); }
body.admin-mode .login-shell .secondary:hover, body.admin-mode .login-shell .linklike:hover { background: var(--ad-surface-hover); color: var(--ink); border-color: var(--lime); }
body.admin-mode .login-shell .primary:hover, body.admin-mode .admin-shell .primary:hover { filter: brightness(1.06); }
body.admin-mode .login-shell button:focus-visible, body.admin-mode .login-shell input:focus-visible, body.admin-mode .login-shell select:focus-visible, body.admin-mode .admin-shell button:focus-visible, body.admin-mode .admin-shell input:focus-visible, body.admin-mode .admin-shell select:focus-visible, body.admin-mode .admin-shell textarea:focus-visible, body.admin-mode .admin-shell a:focus-visible, body.admin-mode .modal-wrap button:focus-visible, body.admin-mode .modal-wrap input:focus-visible, body.admin-mode .modal-wrap select:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; box-shadow: none; }
body.admin-mode button:disabled, body.admin-mode [aria-disabled="true"] { opacity: .62; cursor: not-allowed; filter: grayscale(.2); }
body.admin-mode .error-message { background: color-mix(in srgb, #a63126 14%, var(--paper)); color: #a52d24; border: 1px solid color-mix(in srgb, #a63126 30%, var(--line)); }
:root[data-admin-theme="dark"] body.admin-mode .error-message { background: #351d1a; color: #ffb5a8; border-color: #764037; }
body.admin-mode .setup-note { background: color-mix(in srgb, var(--lime) 10%, var(--paper)); border-color: color-mix(in srgb, var(--lime) 45%, var(--line)); }
.admin-appearance { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-appearance select { min-height: 38px; padding: 6px 30px 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.admin-appearance select:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.admin-appearance-card { display: grid; gap: 8px; }
.admin-appearance-card h2, .admin-appearance-card p { margin-bottom: 0; }
body.admin-mode .admin-shell .admin-tab:hover, body.admin-mode .admin-shell .menu-quick:hover, body.admin-mode .admin-shell .admin-back:hover { color: var(--ink); }
body.admin-mode .admin-shell .admin-tab.active { color: var(--ink); }
body.admin-mode .admin-shell .menu-quick-primary:hover { color: var(--button-text); }
:root[data-admin-theme="light"] body.admin-mode .admin-shell .admin-meal-actions button.danger { color: #922b23; background: #fbefed; border-color: #d6aaa5; }
:root[data-admin-theme="light"] body.admin-mode .admin-shell .admin-meal-actions button.danger:hover { color: #7c201a; background: #f4ddda; border-color: #b84938; }
body.admin-mode .modal-wrap { color: var(--ink); }
/* ============================================================
   ADMIN DESIGN KIT — Super 8 "billion dollar" admin look
   Change the look of the whole owner area by editing ONLY the
   --ad-* tokens below. Everything admin-scoped lives under
   .admin-shell so the customer storefront themes are untouched.
   Font: system stack (the app works offline + CSP blocks remote
   fonts). Swap --ad-font if a bundled webfont is added later.
   ============================================================ */
.admin-shell {
  --ad-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ad-radius: 18px;
  --ad-radius-sm: 12px;
  --ad-gold-hi: color-mix(in srgb, var(--lime) 62%, #ffffff);
  --ad-gold: var(--lime);
  --ad-gold-lo: color-mix(in srgb, var(--lime) 72%, #000000);
  --ad-card-hi: rgba(255, 255, 255, .07);
  --ad-shadow: 0 18px 45px rgba(0, 0, 0, .28);
  --ad-shadow-btn: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
  --ad-ring: 0 0 0 3px color-mix(in srgb, var(--lime) 38%, transparent);
  --ad-surface: color-mix(in srgb, var(--paper) 78%, var(--ink) 7%);
  --ad-surface-hover: color-mix(in srgb, var(--paper) 66%, var(--ink) 12%);
  font-family: var(--ad-font);
  letter-spacing: -.01em;
}
/* Admin chrome is intentionally theme-independent: control surfaces lift off the
   page colour by mixing a little page text into the card colour, so they stay
   readable on the darkest prestige theme and on light themes alike. */
.admin-shell .admin-meal-actions button,
.admin-shell .icon-button,
.admin-shell .subtle-action,
.admin-shell .close,
.admin-shell .share-btn,
.admin-shell .quantity button {
  background: var(--ad-surface);
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 18%);
  color: var(--ink);
}
.admin-shell .admin-meal-actions button:hover,
.admin-shell .icon-button:hover {
  background: var(--ad-surface-hover);
  border-color: var(--lime);
}
.admin-shell .admin-meal-actions button { background: var(--ad-surface); }
.admin-shell .admin-meal-actions button:hover { background: var(--ad-surface-hover); }
.admin-shell .admin-meal-actions button.danger {
  background: color-mix(in srgb, #b84938 16%, var(--ad-surface));
  border-color: color-mix(in srgb, #b84938 55%, var(--line));
  color: #ff9d8d;
}
.admin-shell .admin-meal-actions button.danger:hover { background: color-mix(in srgb, #b84938 30%, var(--ad-surface)); }
.admin-shell .subtle-action:hover { background: var(--ad-surface-hover); }
.admin-shell .secondary {
  background: var(--ad-surface);
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 18%);
  color: var(--ink);
}
.admin-shell .secondary:hover { background: var(--ad-surface-hover); border-color: var(--lime); }
.admin-shell .pill { background: var(--ad-surface); border-color: color-mix(in srgb, var(--line) 70%, var(--ink) 18%); color: var(--ink); }
.admin-shell .pill:hover { background: var(--ad-surface-hover); }
.admin-shell .field input, .admin-shell .field textarea, .admin-shell .field select {
  background: var(--ad-surface);
  border: 1px solid color-mix(in srgb, var(--line) 65%, var(--ink) 24%);
  color: var(--ink);
}
.admin-shell .field input::placeholder, .admin-shell .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.admin-shell .check, .admin-shell .tag-choice span, .admin-shell .photo-actions label, .admin-shell .photo-actions button, .admin-shell .preset-grid button, .admin-shell .generator-choice {
  background: var(--ad-surface);
  border-color: color-mix(in srgb, var(--line) 70%, var(--ink) 18%);
  color: var(--ink);
}
.admin-shell .check input { accent-color: var(--lime); }
.admin-shell h1, .admin-shell h2, .admin-shell h3 { text-wrap: balance; }
/* The one-line command bar brand must never wrap: text-wrap: balance above
   shares text-wrap-mode with white-space, so re-pin the mode here or the
   squeezed brand h1 breaks mid-word ("Languag es"). */
.admin-brand h1, .admin-brand-eyebrow { text-wrap-mode: nowrap; }
.admin-shell .card { border: 1px solid color-mix(in srgb, var(--line) 80%, var(--ink) 10%); }
.admin-shell .card h2 { font-size: 20px; letter-spacing: -.03em; }
.admin-shell .eyebrow { font-weight: 800; }
.admin-shell .muted.small { color: color-mix(in srgb, var(--muted) 86%, var(--ink)); }
.admin-shell select option { color: #16181b; background: #ffffff; }
.admin-shell h1 { letter-spacing: -.05em; font-weight: 850; }
.admin-shell .eyebrow {
  background: linear-gradient(92deg, var(--ad-gold-hi), var(--ad-gold) 55%, var(--ad-gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .16em;
}
.admin-shell .card {
  border-radius: var(--ad-radius);
  box-shadow: var(--ad-shadow), inset 0 1px 0 var(--ad-card-hi);
}
/* Assist hints stay slim strips in the dark theme too — flat, gold-edged, no card shadow. */
.admin-shell .card.admin-hint {
  border-radius: 13px;
  box-shadow: none;
  border-left-color: var(--ad-gold);
  background: color-mix(in srgb, var(--ad-surface, var(--paper)) 55%, var(--paper));
}
.admin-shell .assist-icon { background: color-mix(in srgb, var(--ad-gold) 24%, var(--ad-surface, var(--paper))); }
.admin-shell .primary {
  background: linear-gradient(180deg, var(--ad-gold-hi), var(--ad-gold) 58%, var(--ad-gold-lo));
  color: var(--button-text);
  box-shadow: var(--ad-shadow-btn);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.admin-shell .primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.admin-shell .primary:active { transform: translateY(0); }
.admin-shell .secondary, .admin-shell .pill, .admin-shell .subtle-action {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.admin-shell .secondary:hover { transform: translateY(-1px); border-color: var(--ad-gold); }
.admin-shell .pill.active {
  background: linear-gradient(180deg, var(--ad-gold-hi), var(--ad-gold) 60%, var(--ad-gold-lo));
  color: var(--button-text);
  box-shadow: var(--ad-shadow-btn);
}
.admin-shell button:focus-visible, .admin-shell input:focus-visible, .admin-shell select:focus-visible, .admin-shell textarea:focus-visible, .admin-shell a:focus-visible {
  outline: none; box-shadow: var(--ad-ring);
}
.admin-shell .field input, .admin-shell .field textarea, .admin-shell .field select { border-radius: var(--ad-radius-sm); }
.admin-shell .photo-preview { border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--ad-card-hi); }
.admin-shell .generator-intro {
  background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 22%, var(--paper)), var(--paper) 70%);
  box-shadow: var(--ad-shadow), inset 0 1px 0 var(--ad-card-hi);
}
.admin-shell .bulk-photos { border-left: 3px solid var(--ad-gold); }
.admin-shell .progress-bar { background: linear-gradient(90deg, var(--ad-gold-lo), var(--ad-gold-hi)); }
.admin-shell .job-banner { border-left: 3px solid var(--ad-gold); }
.admin-shell .job-banner.job-failed { border-left-color: #b84938; }
.admin-shell .job-details { margin-top: 10px; font-size: 12px; color: var(--muted); }
.admin-shell .job-details ul { margin: 6px 0 0; padding-left: 18px; }
.import-intro { background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 18%, var(--paper)), var(--paper) 72%); }
.import-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.import-steps span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 12px; font-weight: 750; }
.import-steps strong { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--button-text); font-size: 11px; }
.import-table td { vertical-align: top; }
.import-tick { width: 34px; }
.import-tick input { width: 18px; height: 18px; accent-color: var(--lime); }
.import-price { width: 90px; min-height: 40px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--line) 65%, var(--ink) 24%); border-radius: 9px; background: var(--ad-surface, var(--paper)); color: var(--ink); }
.import-table select { min-height: 40px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--line) 65%, var(--ink) 24%); border-radius: 9px; background: var(--ad-surface, var(--paper)); color: var(--ink); }
.import-badge { display: inline-block; margin: 6px 6px 0 0; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 11px; font-weight: 800; }
.import-badge-new { background: color-mix(in srgb, var(--lime) 22%, var(--paper)); border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); color: var(--ink); }
.import-badge-existing { background: color-mix(in srgb, #7a9c8d 20%, var(--paper)); border-color: color-mix(in srgb, #7a9c8d 50%, var(--line)); color: var(--ink); }
.import-badge-price { background: color-mix(in srgb, #d9822b 18%, var(--paper)); border-color: color-mix(in srgb, #d9822b 55%, var(--line)); color: var(--ink); }
.import-badge-close { background: color-mix(in srgb, #b08d57 18%, var(--paper)); border-color: color-mix(in srgb, #b08d57 55%, var(--line)); color: var(--ink); }
.import-options { margin-top: 14px; }
.import-options .check { width: 100%; }
.import-as-new { margin-top: 6px; font-size: 12px; min-height: 0; padding: 4px 8px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: 12px; }
/* Admin tables own their width: let them size to content and scroll inside the
   rounded clip, so a wide table can never push the page sideways. */
.admin-shell .table-wrap { max-width: 100%; }
.admin-shell .table-wrap table { min-width: 640px; margin: 0; }
.admin-shell table { max-width: 100%; }
/* Nothing in the admin may create a horizontal page scrollbar: long words wrap,
   wide blocks are clipped to the card, and page-level overflow is impossible. */
.admin-shell { max-width: 100%; overflow-x: clip; }
.admin-shell .card { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.admin-shell .card > * { min-width: 0; }
.admin-shell h1, .admin-shell h2, .admin-shell h3, .admin-shell p, .admin-shell span, .admin-shell strong, .admin-shell small { overflow-wrap: anywhere; }
.admin-shell .meal-name, .admin-shell .admin-meal .meal-meta { overflow-wrap: anywhere; }
.admin-shell img { max-width: 100%; }
.admin-shell pre, .admin-shell code { overflow-x: auto; scrollbar-width: thin; max-width: 100%; }
.ai-descriptions { border-left: 3px solid color-mix(in srgb, var(--lime) 55%, var(--line)); }
/* Google review poster. The poster is the one admin image that must never be
   stretched by CSS into something unscannable, so it is shown at its natural
   aspect with an explicit width cap rather than filled to the column. */
.review-poster-card { border-left: 3px solid var(--ad-gold); }
.review-poster-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.review-poster-result { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-poster-image { width: 100%; max-width: 220px; height: auto; display: block; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.review-poster-meta { display: grid; gap: 8px; justify-items: start; }
.review-poster-ok { margin: 0; font-weight: 600; color: var(--lime); }
@media (max-width: 640px) {
  .review-poster-result { grid-template-columns: minmax(0, 1fr); }
  .review-poster-image { max-width: 260px; }
}
/* Typography choices (system stacks only — no external fonts, CSP-safe) */
.font-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 2px; }
.font-card { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-align: left; display: grid; gap: 4px; }
.font-card.active { outline: 2px solid var(--lime); }
.font-card .font-preview { font-size: 22px; line-height: 1.2; }
/* Staff handoff: show customer + staff dish names together */
.order-line-title .staff-dish { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.whatsapp-bilingual { white-space: pre-line; }

/* ---------------- Automatic social posting ----------------
   The tab is deliberately plain. It reuses .card, .field, .pill, .form-actions
   and .subtle-action so it reads as the same product as everything else, and
   adds only the two things it needs: a large tappable choice (so an owner is
   never hunting for a small radio input) and a post row (thumbnail beside the
   words, because a post is judged on both together). */
.social-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 4px 0 2px; }
.social-choice { display: grid; gap: 5px; align-content: start; padding: 14px; min-height: 92px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); }
.social-choice strong { font-size: 15px; font-weight: 850; }
.social-choice small { color: var(--muted); font-size: 12px; line-height: 1.4; }
/* The chosen option is shown by fill as well as by an outline, because a colour
   alone is not a reliable signal and this is the control the feature turns on. */
.social-choice.is-active { background: var(--lime); color: var(--button-text); border-color: var(--lime); }
.social-choice.is-active small { color: inherit; opacity: .82; }
.social-choice:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.social-post { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.social-post:first-child { border-top: 0; padding-top: 4px; }
.social-post-image { flex: 0 0 96px; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; background: color-mix(in srgb, var(--paper) 70%, var(--line)); /* A photo that fails to load would otherwise paint its whole alt text into a 96px box. font-size:0 hides the painted fallback while leaving the alt attribute intact for screen readers. */ font-size: 0; }
.social-post-body { display: grid; gap: 7px; min-width: 0; }
.social-post-meta { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.social-post-caption { margin: 0; font-size: 14px; line-height: 1.5; }
.social-post-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.social-post-actions .primary, .social-post-actions .subtle-action { min-height: 40px; padding: 8px 12px; font-size: 13px; }
.social-post-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; background: color-mix(in srgb, var(--paper) 72%, var(--line)); color: var(--ink); }
.social-post-status--approved, .social-post-status--published { background: color-mix(in srgb, var(--lime) 22%, var(--paper)); }
.social-post-status--failed { background: #fff0ed; color: #b84938; }
.social-recent { margin: 18px 0 0; font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* Comments on our published posts. The card sits under the post queue and
   reads like the rest of the Social tab: one row per guest, the restaurant's
   answer underneath it, actions where a decision is still open. */
.social-comments-card .social-comments-auto { margin-left: auto; align-self: center; }
.social-comment { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.social-comment:first-child { border-top: 0; padding-top: 6px; }
.social-comment.is-sent, .social-comment.is-skipped { opacity: .82; }
.social-comment.is-drafted { border-left: 3px solid var(--lime); padding-left: 11px; }
.social-comment.is-sent { border-left: 3px solid color-mix(in srgb, var(--lime) 55%, transparent); padding-left: 11px; }
.social-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.social-comment-head strong { font-size: 13.5px; }
.social-comment-badge { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 900; letter-spacing: .04em; background: color-mix(in srgb, var(--paper) 72%, var(--line)); color: var(--ink); }
.social-comment-text { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.social-comment-post { margin: 0; }
.social-comment-input { width: 100%; min-height: 64px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.45; resize: vertical; }
.social-comment-input:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.social-comment-replied { margin: 0; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--lime) 12%, var(--paper)); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.social-comment-draft-note { margin: 0; }
.social-comment .social-post-actions { margin-top: 2px; }
@media (max-width: 620px) { .social-comments-card .social-comments-auto { margin-left: 0; align-self: start; } }

/* Welcome media sizing: intrinsic Automatic, transparent clipped frame for fit modes. */
.hero.hero-image.hero-auto { background:transparent; overflow:hidden; }
.hero.hero-image.hero-auto picture { position:absolute; inset:0; display:block; width:100%; height:100%; }
.hero.hero-image.hero-auto picture img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero.hero-image.hero-auto video { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero.hero-image.hero-fit-width { height:var(--welcome-frame-height,280px); aspect-ratio:auto; overflow:hidden; background:transparent; }
.hero.hero-image.hero-fit-width picture,.hero.hero-image.hero-fit-width img,.hero.hero-image.hero-fit-width video { width:100%; height:100%; max-width:none; display:block; object-fit:cover; }
.hero.hero-image.hero-fit-height { width:min(100%,var(--welcome-frame-width,720px)); height:var(--welcome-frame-height,280px); aspect-ratio:auto; overflow:hidden; margin-inline:auto; background:transparent; }
.hero.hero-image.hero-fit-height picture,.hero.hero-image.hero-fit-height img,.hero.hero-image.hero-fit-height video { width:100%; height:100%; max-width:none; display:block; object-fit:contain; margin-inline:auto; }
.hero.hero-image video { max-width:none; }
/* A welcome video is the same banner as a welcome photo: it takes the same
   frame at every breakpoint (720/640 phone, 1024/430 tablet, 1120/460
   desktop) instead of its own short 18:7 strip, which rendered 139px tall
   on a phone while the photo beside it got 318px. */
.hero.hero-image.hero-video { width:100%; height:auto; overflow:hidden; background:transparent; }
.hero.hero-image.hero-video video { width:100%; height:100%; max-width:none; display:block; object-fit:cover; object-position:center; }
@media (max-width:600px) { .hero.hero-image.hero-fit-height { width:min(100%,var(--welcome-frame-width,720px)); } }
/* A welcome photo fills the banner frame at every width; the frame is the
   shape, so the picture never shrinks back into a strip on a laptop. */
.frame-size-controls { display:grid; grid-template-columns:1fr; gap:12px; }
.frame-size-controls input[type=number] { min-height:44px; width:100%; }
.frame-size-controls input[type=range] { width:100%; min-height:32px; accent-color:var(--coral); }
.frame-size-controls input:disabled { opacity:.55; }

.welcome-media-preview { width:100%; max-width:760px; overflow:hidden; border-radius:14px; background:transparent; }
.welcome-media-preview[data-video="true"] { aspect-ratio:var(--welcome-frame-aspect,1120 / 460); }
.welcome-media-preview[data-mode="fit-width"] { height:var(--welcome-frame-height,280px); }
.welcome-media-preview[data-mode="fit-height"] { width:min(100%,var(--welcome-frame-width,720px)); height:var(--welcome-frame-height,280px); }
.welcome-media-preview img,.welcome-media-preview video { display:block; width:100%; max-width:none; height:auto; object-fit:contain; border-radius:inherit; }
.welcome-media-preview[data-video="true"] video { height:100%; object-fit:cover; object-position:center; }
.welcome-media-preview #hero-preview[hidden] { display:none !important; }
.welcome-media-preview[data-mode="fit-width"] img,.welcome-media-preview[data-mode="fit-width"] video,.welcome-media-preview[data-mode="fit-height"] img,.welcome-media-preview[data-mode="fit-height"] video { width:100%; height:100%; }

/* Owner admin refresh: app-like navigation, scannable actions and a compact dish editor. */
body.admin-mode .admin-bottom-nav { display: none; }
/* ---- Admin round 2: quick editing, bottom sheets, safe fixed navigation ----
   A price is what an owner changes most, so it is a button that opens one
   focused task in a bottom sheet instead of the whole dish editor. The five
   per-dish buttons became two: the availability pill, which is itself the
   toggle, plus one accessible overflow menu. */
.meal-price-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 18%); background: color-mix(in srgb, var(--paper) 88%, var(--ink) 4%); color: var(--ink); font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.meal-price-btn::after { content: '✎'; font-size: 10px; opacity: .6; }
.meal-price-btn:hover { border-color: var(--lime); transform: translateY(-1px); }
.meal-price-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.meal-avail { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 800; }
.meal-avail::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.meal-avail.is-on { background: color-mix(in srgb, var(--lime) 16%, var(--paper)); border-color: color-mix(in srgb, var(--lime) 52%, var(--line)); color: var(--ink); }
.meal-avail.is-off { background: color-mix(in srgb, var(--paper) 72%, var(--line)); border-color: var(--line); color: var(--muted); }
.meal-avail:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary { border-color: var(--lime); }
.row-menu-trigger { flex: 0 0 auto; font-size: 17px; line-height: 1; }
.admin-shell .row-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 176px; padding: 6px; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--ink) 12%); border-radius: 14px; background: color-mix(in srgb, var(--paper) 97%, var(--menu-bg, var(--cream))); box-shadow: 0 20px 48px rgba(0,0,0,.28); }
.admin-shell .row-menu-panel button { min-height: 44px; padding: 9px 12px; border-radius: 10px; border-color: transparent; background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 750; text-align: left; }
.admin-shell .row-menu-panel button:hover { background: var(--ad-surface-hover, color-mix(in srgb, var(--paper) 66%, var(--ink) 12%)); }
.admin-shell .row-menu-panel button.danger { color: #b84938; }
/* Bottom sheet: the mobile-native pattern for one quick task. It layers above
   the fixed bottom navigation (z-index 60), never under it. */
.sheet-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, #000 46%, transparent); }
.bottom-sheet { position: relative; width: min(100%, 520px); max-height: 88vh; overflow: auto; padding: 14px 16px max(18px, env(safe-area-inset-bottom)); border: 1px solid color-mix(in srgb, var(--line) 75%, var(--ink) 12%); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--paper); box-shadow: 0 -20px 60px rgba(0,0,0,.34); animation: sheet-up .24s cubic-bezier(.2,.8,.2,1) both; }
.sheet-grip { display: block; width: 42px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 26%, transparent); }
.sheet-actions { display: flex; gap: 10px; margin-top: 14px; }
.sheet-actions .secondary { flex: 0 0 auto; min-height: 48px; }
.sheet-actions .primary { flex: 1 1 auto; min-height: 48px; }
.sheet-error { margin: 8px 0 0; color: #b84938; font-size: 12.5px; font-weight: 750; }
@keyframes sheet-up { from { transform: translateY(14px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 640px) { .sheet-wrap { align-items: center; padding: 16px; } .bottom-sheet { border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, var(--ink) 12%); border-radius: 22px; animation: none; } }
@media (prefers-reduced-motion: reduce) { .bottom-sheet { animation: none; } }
/* Fixed-navigation safety. The navigation reserves its own height plus the home
   indicator as scrollable padding, hides while the software keyboard is open,
   and a focused field is scrolled clear of it. */
body.admin-mode.kb-open .admin-bottom-nav { display: none; }
html { scroll-padding-top: 86px; scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
body.admin-mode .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
body.admin-mode .admin-tab:active { transform: translateY(0) scale(.97); }
/* Boot skeleton — the admin's own shape while the session and state load. */
.admin-skeleton { display: grid; gap: 12px; width: min(100%, 1100px); margin: 0 auto; padding: 14px 14px calc(104px + env(safe-area-inset-bottom, 0px)); }
.skeleton-block { border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--paper) 84%, transparent); animation: skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton-line { height: 16px; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 14%, transparent); animation: skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .skeleton-block, .skeleton-line { animation: none; } }
/* Below the three-column row layout the action cell sits on the left of the
   card, so a right-anchored menu would hang off the screen edge. Anchoring it
   to the trigger's left edge and clamping the width keeps it fully visible on
   the narrowest phone (measured at 390px: left edge was -20px before this). */
@media (max-width: 699px) { body.admin-mode .row-menu-panel { left: 0; right: auto; min-width: 0; width: min(214px, calc(100vw - 40px)); } }
/* The actions cell lives inside the body column, so on a wide row the body
   becomes one line: dish info on the left, the single ⋯ menu pushed to the
   row's right edge. Without this the small button floats in the middle. */
@media (min-width: 700px) { .admin-meal-body { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; } .admin-meal-info { flex: 1 1 auto; } .admin-meal-actions { flex: 0 0 auto; } }
body.admin-mode .admin-nav-items { align-items: center; flex-wrap: nowrap; }
body.admin-mode .admin-tab { flex: 0 0 auto; min-width: 72px; }
body.admin-mode .admin-tab-icon { display: inline-grid; min-width: 18px; place-items: center; font-size: 16px; }
body.admin-mode .admin-tab-add { background: var(--lime); color: var(--button-text); font-weight: 900; }
/* Every state of the accent-filled Add tab keeps --button-text. The generic
   .admin-tab:hover / .active ink rules above out-specify the base fill rule, so
   the label went near-black on the teal fill (light theme: ~1.4:1 — the black
   "Add" text on the Add screen). The doubled .admin-tab class keeps this rule
   the winner in every state, both themes, topbar and bottom nav alike. */
body.admin-mode .admin-shell .admin-tab.admin-tab-add,
body.admin-mode .admin-shell .admin-tab.admin-tab-add:hover,
body.admin-mode .admin-shell .admin-tab.admin-tab-add.active,
body.admin-mode .admin-shell .admin-tab.admin-tab-add.active:hover { color: var(--button-text); }
body.admin-mode .admin-tab.active { border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); box-shadow: inset 0 -2px 0 var(--coral); }
body.admin-mode .admin-home-welcome { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-color: color-mix(in srgb, var(--lime) 36%, var(--line)); }
body.admin-mode .home-welcome-copy { min-width: 0; }
body.admin-mode .admin-home-welcome h2, body.admin-mode .admin-home-actions h2, body.admin-mode .admin-attention h2 { margin: 4px 0 8px; }
body.admin-mode .admin-home-welcome p { margin-bottom: 0; }
body.admin-mode .admin-home-welcome > button { min-height: 46px; flex: 0 0 auto; }
body.admin-mode .admin-home-actions { margin: 16px 0; }
body.admin-mode .admin-home-actions .section-heading { margin-bottom: 12px; }
body.admin-mode .home-setup-prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; border: 2px solid color-mix(in srgb, var(--coral) 62%, var(--line)); background: color-mix(in srgb, var(--coral) 8%, var(--paper)); }
body.admin-mode .home-setup-prompt h2 { margin: 2px 0 4px; font-size: clamp(18px, 4vw, 23px); }
body.admin-mode .home-setup-prompt p { margin: 0; }
body.admin-mode .home-setup-prompt .menu-pill { justify-self: end; }
body.admin-mode .home-setup-prompt > button { grid-column: 1 / -1; min-height: 48px; font-weight: 800; }
body.admin-mode .home-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.admin-mode .home-action-grid button { display: grid; align-content: start; justify-items: start; gap: 10px; min-height: 218px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
body.admin-mode .home-action-grid button strong { font-size: clamp(17px, 2vw, 20px); line-height: 1.25; }
body.admin-mode .home-action-grid button > span:not(.home-action-icon):not(.home-action-link) { color: var(--muted); font-size: 14px; line-height: 1.5; }
body.admin-mode .home-action-grid button.home-action-primary { border-color: color-mix(in srgb, var(--lime) 70%, var(--line)); background: color-mix(in srgb, var(--lime) 16%, var(--paper)); }
body.admin-mode .home-action-grid button.home-action-social { border-color: color-mix(in srgb, var(--coral) 58%, var(--line)); background: color-mix(in srgb, var(--coral) 9%, var(--paper)); }
body.admin-mode .home-action-grid button:hover { border-color: var(--coral); transform: translateY(-1px); }
body.admin-mode .home-action-grid button:focus-visible, body.admin-mode .home-shortcut-grid button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
body.admin-mode .home-action-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--lime) 23%, var(--paper)); color: var(--ink); }
body.admin-mode .home-action-social .home-action-icon { background: color-mix(in srgb, var(--coral) 22%, var(--paper)); }
body.admin-mode .home-action-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.admin-mode .home-action-grid button .home-action-link { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--ink); font-size: 13px; font-weight: 800; }
body.admin-mode .admin-home-shortcuts { padding-block: 14px; }
body.admin-mode .admin-home-shortcuts > .eyebrow { margin: 0 0 6px; }
body.admin-mode .home-shortcut-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.admin-mode .home-shortcut-grid button { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
body.admin-mode .home-shortcut-grid button > span:first-child { color: var(--muted); font-size: 18px; }
body.admin-mode .home-shortcut-grid button:hover { background: color-mix(in srgb, var(--line) 38%, transparent); }
body.admin-mode .home-shortcut-icon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--muted); }
body.admin-mode .home-shortcut-grid button:hover .home-shortcut-icon { color: var(--lime); }
body.admin-mode .home-shortcut-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.admin-mode .attention-icon, body.admin-mode .setup-icon { display: inline-grid; place-items: center; vertical-align: -4px; margin-right: 7px; color: var(--coral); }
body.admin-mode .admin-attention-clear .attention-icon { color: var(--lime); }
body.admin-mode .attention-icon svg, body.admin-mode .setup-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.admin-mode .more-tool small { color: var(--muted); font-size: 12px; line-height: 1.45; }
body.admin-mode .admin-attention ul { margin: 8px 0; padding-left: 22px; }
body.admin-mode .admin-attention li { padding: 3px 0; }
body.admin-mode .admin-attention-clear { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); }
/* A section that failed to render must look deliberately broken rather than
   half-painted, so the owner knows the page did not load instead of wondering
   whether a button is dead. */
body.admin-mode .admin-render-error { border-color: color-mix(in srgb, var(--coral) 55%, var(--line)); }
body.admin-mode .admin-render-error .eyebrow { color: var(--coral); }
body.admin-mode .admin-render-error .small { margin-top: 6px; word-break: break-word; }
body.admin-mode .more-tool-list { display: grid; }
body.admin-mode .more-tool { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 15px 4px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
body.admin-mode .more-tool > span:first-child { display: grid; gap: 4px; min-width: 0; }
body.admin-mode .more-tool > span:last-child { flex: 0 0 auto; font-size: 22px; }
body.admin-mode .meal-editor { gap: 14px; }
body.admin-mode .meal-photo-field { display: grid; gap: 10px; }
body.admin-mode .meal-editor .photo-preview { width: 100%; max-height: 280px; object-fit: contain; }
body.admin-mode .meal-extra { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--paper) 72%, transparent); }
body.admin-mode .meal-extra > summary { min-height: 28px; color: var(--ink); font-weight: 800; cursor: pointer; }
body.admin-mode .meal-extra[open] > summary { margin-bottom: 12px; }
body.admin-mode .meal-save-bar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 22; margin: 0 -4px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 8px 28px rgba(0,0,0,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.admin-mode .meal-save-bar .primary { min-width: 140px; }
body.admin-mode .food-label-settings > summary { cursor: pointer; font-weight: 800; }
@media (max-width: 619px) {
  body.admin-mode .admin-shell { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  body.admin-mode .admin-bottom-nav .admin-tab:focus-visible { outline: 2px solid var(--coral); outline-offset: -3px; }
  body.admin-mode .row-menu-panel { z-index: 62; }
  body.admin-mode .admin-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); box-shadow: 0 -8px 24px rgba(0,0,0,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  body.admin-mode .admin-bottom-nav .admin-tab { display: grid; min-width: 0; min-height: 54px; gap: 2px; padding: 5px 1px; border-radius: 10px; font-size: 10.5px; letter-spacing: -.02em; }
  body.admin-mode .admin-bottom-nav .admin-tab-icon { font-size: 17px; line-height: 1; }
  body.admin-mode .admin-bottom-nav .admin-tab-add { transform: translateY(-8px); min-height: 60px; border: 2px solid var(--menu-bg); border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
  body.admin-mode .admin-topbar { margin-bottom: 12px; }
  body.admin-mode .admin-home-welcome { align-items: flex-start; flex-direction: column; gap: 12px; }
  body.admin-mode .home-action-grid { grid-template-columns: 1fr; gap: 10px; }
  body.admin-mode .home-action-grid button { min-height: 0; padding: 16px; }
  body.admin-mode .home-shortcut-grid { grid-template-columns: 1fr; }
  body.admin-mode .home-shortcut-grid button { min-height: 48px; }
  body.admin-mode .meal-save-bar { bottom: calc(72px + env(safe-area-inset-bottom)); margin-inline: -2px; }
  body.admin-mode .meal-save-bar .primary { flex: 1; }
}
@media (min-width: 620px) and (max-width: 899px) {
  body.admin-mode .admin-topbar .admin-nav-items .admin-tab { min-width: 55px; gap: 3px; padding-inline: 5px; }
}
@media (max-width: 360px) {
  body.admin-mode .admin-bottom-nav .admin-tab { font-size: 10px; }
  body.admin-mode .meal-core-pair { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body.admin-mode .home-setup-prompt { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
  body.admin-mode .home-setup-prompt > div { grid-column: 1 / -1; }
  body.admin-mode .home-setup-prompt .menu-pill { grid-column: 1; justify-self: start; }
  body.admin-mode .home-setup-prompt > button { grid-column: 2; }
}

/* ============================================================
   ADMIN SIGN-IN — the front door
   ------------------------------------------------------------
   This screen belongs to the product, not to a restaurant, so it
   has ONE fixed identity: the Super 8 mark, the gold accent and a
   deep teal field. It deliberately does not follow the guest
   theme, the restaurant palette, or the admin light/dark
   preference — there is no appearance switch here, and the owner
   changes appearance in Business → Admin appearance once signed
   in. Every value is a local token so the auth screens can be
   restyled without touching the guest site or the admin shell.
   ============================================================ */
.login-shell {
  --login-field-bg: rgba(255, 255, 255, .04);
  --login-text: #f8fafb;
  --login-muted: #a4b0b5;
  --login-border: rgba(184, 204, 207, .2);
  --login-gold: #e5bc70;
  --login-gold-hi: #ffe09a;
  --login-ring: rgba(219, 163, 85, .3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  /* Vertical padding follows the viewport HEIGHT, so the card still fits a
     1280x800 laptop; width-based padding made it scroll on short screens. */
  padding: clamp(18px, 4.5vh, 56px) 20px;
  overflow: hidden;
  isolation: isolate;
  color-scheme: dark;
  color: var(--login-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* A lit teal field behind the card, darkening to the corners so the glass
     card reads by contrast and by the gold hairline, not by a heavy border. */
  background:
    radial-gradient(ellipse 1020px 640px at 50% 30%, rgba(20, 124, 136, .3), transparent 72%),
    radial-gradient(ellipse 900px 520px at 50% 112%, rgba(6, 66, 74, .32), transparent 70%),
    linear-gradient(158deg, #082028 0%, #04121a 56%, #020a10 100%);
}
body.admin-mode .login-shell {
  background:
    radial-gradient(ellipse 1020px 640px at 50% 30%, rgba(20, 124, 136, .3), transparent 72%),
    radial-gradient(ellipse 900px 520px at 50% 112%, rgba(6, 66, 74, .32), transparent 70%),
    linear-gradient(158deg, #082028 0%, #04121a 56%, #020a10 100%);
  color: var(--login-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* Two concentric hairlines, drawn rather than shipped as an image. */
.login-shell::before,
.login-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(86vw, 650px);
  aspect-ratio: 1;
  border: 1px solid var(--login-ring);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 0 29px transparent, inset 0 0 0 30px rgba(219, 163, 85, .1);
}
.login-shell::before { top: min(-44vh, -300px); left: min(-16vw, -120px); }
.login-shell::after { bottom: min(-44vh, -300px); right: min(-16vw, -120px); }

.login-shell .login-card,
body.admin-mode .login-shell .login-card {
  width: min(100%, 520px);
  /* Auto margins centre the card without the top being clipped when the
     viewport is shorter than the card. */
  margin: auto;
  padding: 36px 46px 20px;
  border: 1px solid var(--login-border);
  border-top-color: var(--login-gold);
  border-radius: 24px;
  /* Glass sits a touch LIGHTER than its backdrop, with a faint gold wash under
     the top hairline and an inner highlight, so the panel reads as lit. */
  background:
    linear-gradient(180deg, rgba(229, 188, 112, .05), transparent 120px),
    linear-gradient(180deg, rgba(13, 38, 46, .95), rgba(6, 22, 28, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 80px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--login-text);
}
.login-shell .login-card.setup-card { width: min(100%, 560px); }

/* ---- brand block -------------------------------------------------- */
.login-brand { margin-bottom: 24px; text-align: center; }
.login-brand-owner { margin: 0 0 6px; color: var(--login-gold); font-size: 13px; font-weight: 700; letter-spacing: .3px; line-height: 1.3; overflow-wrap: anywhere; }
.login-brand-name { margin: 0; color: var(--login-text); font-size: 31px; font-weight: 750; letter-spacing: -1px; line-height: 1.08; }
.login-brand-name span { color: var(--login-gold); }
.login-brand-sub { margin: 8px 0 0; color: var(--login-muted); font-size: 11.5px; font-weight: 600; letter-spacing: 6px; text-indent: 6px; text-transform: uppercase; }
/* ---- headings and copy -------------------------------------------- */
.login-shell .eyebrow,
body.admin-mode .login-shell .eyebrow { margin: 0 0 10px; color: var(--login-gold); font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.login-shell .login-card h1 { margin: 0 0 8px; color: var(--login-text); font-size: 25px; font-weight: 750; letter-spacing: -.6px; line-height: 1.22; }
.login-shell .login-card .muted,
body.admin-mode .login-shell .muted { color: var(--login-muted); font-size: 14px; line-height: 1.55; }
.login-shell .field small.muted { font-size: 12.5px; }

/* ---- fields ------------------------------------------------------- */
.login-shell .field label,
body.admin-mode .login-shell .field label { display: block; margin-bottom: 9px; color: var(--login-text); font-size: 12.5px; font-weight: 650; letter-spacing: .1px; }
.login-shell .field input,
.login-shell .field select,
.login-shell .field textarea,
body.admin-mode .login-shell .field input,
body.admin-mode .login-shell .field select,
body.admin-mode .login-shell .field textarea {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--login-border);
  border-radius: 12px;
  background: var(--login-field-bg);
  color: var(--login-text);
  font-family: inherit;
  font-size: 15px;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-shell .field input::placeholder { color: var(--login-muted); opacity: .8; }
.login-shell .field input:hover,
.login-shell .field select:hover { border-color: rgba(184, 204, 207, .34); }
.login-shell .field input:focus,
.login-shell .field input:focus-visible,
.login-shell .field select:focus,
.login-shell .field select:focus-visible,
.login-shell .field textarea:focus,
.login-shell .field textarea:focus-visible {
  outline: none;
  border-color: var(--login-gold);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 0 0 3px rgba(229, 188, 112, .14);
}

/* Password reveal: sits inside the field, never next to it. */
.login-pw { position: relative; }
.login-shell .login-pw input { padding-right: 76px; }
.login-pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 58px;
  height: 38px;
  padding: 0 8px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--login-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.login-pw-toggle:hover { color: var(--login-gold-hi); background: rgba(255, 255, 255, .05); }
.login-pw-toggle:focus-visible { outline: 2px solid var(--login-gold); outline-offset: 1px; }
/* ---- actions ------------------------------------------------------ */
.login-shell .primary,
body.admin-mode .login-shell .primary {
  width: 100%;
  min-height: 55px;
  margin-top: 6px;
  border: 1px solid #f3d48b;
  border-radius: 11px;
  background: linear-gradient(120deg, #f6d486, #e7bb6b 55%, #cba05b);
  color: #15120d;
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .1px;
  box-shadow: 0 10px 30px rgba(229, 188, 112, .16);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.login-shell .primary:hover,
body.admin-mode .login-shell .primary:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(229, 188, 112, .22);
}
.login-shell .primary:active { transform: translateY(0); box-shadow: 0 8px 22px rgba(229, 188, 112, .16); }
.login-shell .primary:disabled { filter: grayscale(.25); box-shadow: none; }

.login-forgot {
  display: block;
  width: fit-content;
  margin: 16px auto 2px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--login-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.login-forgot:hover { color: var(--login-gold-hi); }
.login-forgot:focus-visible { outline: 2px solid var(--login-gold); outline-offset: 2px; border-radius: 6px; }

.login-or { display: flex; align-items: center; gap: 16px; margin: 14px 0; color: var(--login-muted); font-size: 12px; letter-spacing: .6px; text-transform: lowercase; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--login-border); }

.login-shell .login-back,
.login-shell .linklike.login-back,
body.admin-mode .login-shell .secondary,
body.admin-mode .login-shell .linklike {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  margin-top: 0;
  padding: 0 16px;
  border: 1px solid var(--login-border);
  border-radius: 11px;
  background: var(--login-field-bg);
  color: var(--login-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.login-shell .login-back:hover,
body.admin-mode .login-shell .secondary:hover,
body.admin-mode .login-shell .linklike:hover {
  border-color: var(--login-gold);
  background: rgba(229, 188, 112, .07);
  color: var(--login-text);
}

/* ---- footer credit and notices ------------------------------------ */
.login-powered { margin: 18px 0 0; color: var(--login-muted); font-size: 10.5px; letter-spacing: 1.4px; text-align: center; text-transform: uppercase; }
.login-powered-logo { display: inline-block; width: auto; height: 17px; margin-left: 6px; vertical-align: -3px; object-fit: contain; }

.login-shell .setup-note,
body.admin-mode .login-shell .setup-note {
  margin: 18px 0;
  padding: 13px 14px;
  border: 1px solid rgba(229, 188, 112, .28);
  border-radius: 13px;
  background: rgba(229, 188, 112, .06);
  color: var(--login-text);
  font-size: 13px;
  line-height: 1.45;
}
.login-shell .setup-note span { color: var(--login-muted); }
.login-shell .error-message,
body.admin-mode .login-shell .error-message {
  padding: 11px 13px;
  border: 1px solid rgba(255, 140, 120, .32);
  border-radius: 10px;
  background: rgba(166, 49, 38, .18);
  color: #ffc4b8;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .login-shell { padding: 60px 16px 36px; }
  .login-shell::before { top: -290px; left: -250px; }
  .login-shell::after { bottom: -290px; right: -250px; }
  .login-shell .login-card,
  body.admin-mode .login-shell .login-card { padding: 30px 22px 22px; border-radius: 20px; }
  .login-brand { margin-bottom: 26px; }
  .login-brand-owner { font-size: 12.5px; }
  .login-powered-logo { height: 15px; }
  .login-brand-name { font-size: 28px; }
  .login-brand-sub { letter-spacing: 5px; text-indent: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-shell *, .login-shell *::before, .login-shell *::after { animation: none !important; transition: none !important; }
}
/* ============================================================
   ADMIN SHELL 3 — one layout at every size.
   Full-bleed app bar + search + overflow; five bottom tabs on
   phones; a persistent grouped sidebar from 900px. Everything is
   scoped to .admin-shell / body.admin-mode so the guest menu is
   untouched.
   ============================================================ */
body.admin-mode .admin-shell { width: min(100%, 1180px); padding: 10px 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
.admin-appbar { position: sticky; top: 8px; z-index: 30; margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--line) 82%, var(--ink) 10%); border-radius: 18px; background: color-mix(in srgb, var(--paper) 93%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.admin-appbar-row { display: flex; align-items: center; gap: 10px; }
.admin-appbar .admin-brand { flex: 1 1 auto; min-width: 0; margin: 0; display: grid; gap: 1px; }
.admin-appbar .admin-brand h1 { max-width: none; font-size: clamp(19px, 4.4vw, 22px); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-appbar .admin-brand-eyebrow { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--coral); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-appbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* View customer menu and Show menu QR live in the header on every page, so the two
   things an owner does most after opening the admin are one tap away instead of
   behind the overflow menu. On a phone the labels drop and the glyphs stay, which
   keeps the page title readable at 320px. */
.admin-appbar-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 13px; border-radius: 12px; text-decoration: none; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 18%); background: var(--ad-surface, color-mix(in srgb, var(--paper) 80%, var(--ink) 6%)); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; }
.admin-appbar-action:hover { border-color: var(--lime); }
.admin-appbar-action:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.admin-appbar-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.admin-appbar-action-icon { display: grid; place-items: center; }
.admin-qr-action { border-color: var(--lime); background: var(--lime); color: var(--button-text); }
.admin-qr-action:hover { border-color: var(--lime); filter: brightness(1.05); }
@media (max-width: 899px) {
  .admin-appbar-action { width: 42px; padding: 0; }
  .admin-appbar-action-label { display: none; }
  .admin-customer-view { display: none; }
}
/* At 320-420px the title has to share the bar with three buttons. Slightly smaller
   controls give it the room to stay readable instead of truncating at "Menu & di…". */
@media (max-width: 420px) {
  .admin-appbar { padding: 9px 10px; }
  .admin-appbar-row { gap: 8px; }
  .admin-appbar-actions { gap: 6px; }
  .admin-appbar .admin-iconbtn, .admin-appbar .admin-appbar-action { width: 38px; min-width: 38px; height: 38px; min-height: 38px; }
  .admin-appbar .admin-iconbtn svg { width: 17px; height: 17px; }
  .admin-appbar .admin-brand h1 { font-size: 18px; }
}
/* Account settings: the sign-out card is one sentence and one button. */
.admin-signout-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.admin-signout-card h2 { margin: 0 0 4px; font-size: 18px; }
.admin-signout-card p { margin: 0; }
.admin-signout-card .secondary { flex: 0 0 auto; }
/* Help & guides: one card per task, each opening the page that holds the control. */
.admin-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 14px 0; }
.admin-help-card { display: grid; gap: 4px; align-content: start; padding: 15px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--ink) 12%); background: var(--ad-surface, color-mix(in srgb, var(--paper) 80%, var(--ink) 4%)); color: var(--ink); font-family: inherit; text-align: left; }
.admin-help-card:hover { border-color: var(--lime); }
.admin-help-card:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.admin-help-card strong { font-size: 14px; font-weight: 800; }
.admin-help-card small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.admin-help-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 11px; background: color-mix(in srgb, var(--lime) 16%, var(--paper)); color: var(--ink); font-size: 17px; }
.admin-help-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.admin-iconbtn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink) 18%); background: var(--ad-surface, color-mix(in srgb, var(--paper) 80%, var(--ink) 6%)); color: var(--ink); font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; list-style: none; }
.admin-iconbtn::-webkit-details-marker { display: none; }
.admin-iconbtn::marker { content: ''; }
.admin-iconbtn:hover { border-color: var(--lime); }
.admin-iconbtn:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.admin-iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.admin-overflow { position: relative; }
.admin-overflow[open] > .admin-iconbtn { border-color: var(--lime); }
.admin-overflow-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; display: grid; gap: 2px; min-width: 236px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 74%, var(--ink) 14%); border-radius: 16px; background: var(--paper); box-shadow: 0 24px 60px rgba(0,0,0,.32); animation: admin-menu-in .18s cubic-bezier(.2,.8,.2,1) both; }
.admin-overflow-item { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.admin-overflow-item:hover { background: var(--ad-surface-hover, color-mix(in srgb, var(--paper) 66%, var(--ink) 12%)); }
.admin-overflow-item:focus-visible { outline: 3px solid var(--coral); outline-offset: -2px; }
.admin-overflow-danger { color: #b84938; }
.admin-overflow-field { display: grid; gap: 6px; margin-top: 4px; padding: 9px 12px 2px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.admin-overflow-field select { min-height: 44px; width: 100%; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.admin-layout { display: block; }
.admin-main { min-width: 0; }
.admin-sidebar { display: none; }
.admin-nav-label { margin: 10px 6px 4px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.admin-tab-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .admin-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }
  .admin-sidebar { display: block; position: sticky; top: 88px; }
  .admin-sidebar .admin-nav-items { display: grid; gap: 3px; padding: 10px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--ink) 12%); background: color-mix(in srgb, var(--paper) 55%, transparent); }
  .admin-sidebar .admin-tab { justify-content: flex-start; width: 100%; min-width: 0; gap: 10px; padding: 10px 11px; font-size: 14px; }
  .admin-sidebar .admin-tab-full { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .admin-sidebar .admin-tab.active { border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--coral); }
  .admin-nav-tool { padding-left: 18px; font-weight: 650; font-size: 13.5px; }
  .admin-bottom-nav { display: none; }
  body.admin-mode .admin-shell { padding-bottom: 48px; }
  .admin-appbar { top: 10px; }
}
@media (max-width: 899px) {
  body.admin-mode .admin-shell { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  body.admin-mode .admin-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); box-shadow: 0 -8px 24px rgba(0,0,0,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  body.admin-mode .admin-bottom-nav .admin-tab { display: grid; min-width: 0; min-height: 54px; gap: 2px; padding: 5px 1px; border-radius: 10px; font-size: 10.5px; letter-spacing: -.02em; }
  body.admin-mode .admin-bottom-nav .admin-tab-icon { font-size: 17px; line-height: 1; }
  body.admin-mode .admin-bottom-nav .admin-tab-add { min-height: 60px; }
}
/* Home */
body.admin-mode .admin-home-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border-color: color-mix(in srgb, var(--lime) 36%, var(--line)); }
.home-status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.home-actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
.home-actions-row .primary, .home-actions-row .secondary { flex: 1 1 160px; min-height: 48px; }
.home-progress { height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.home-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), color-mix(in srgb, var(--lime) 55%, var(--coral))); }
/* Setup checklist — a scannable list, expanded in place */
.setup-checklist { padding: 16px; }
.setup-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.setup-head h2 { margin: 2px 0 4px; font-size: clamp(19px, 4vw, 22px); }
.setup-head p { margin: 0; }
.setup-head .setup-hide { position: static; flex: 0 0 auto; }
.setup-meter { height: 8px; margin: 14px 0 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.setup-meter-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), color-mix(in srgb, var(--lime) 55%, var(--coral))); }
.setup-meter-label { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.setup-step { display: block; padding: 0; overflow: hidden; }
.setup-step.is-done { opacity: 1; border-style: solid; }
.setup-step-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px; cursor: pointer; list-style: none; }
.setup-step-summary::-webkit-details-marker { display: none; }
.setup-step-summary::marker { content: ''; }
.setup-step-summary:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; border-radius: 14px; }
.setup-step-title { display: grid; gap: 2px; min-width: 0; }
.setup-step-title strong { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.setup-step-title small { font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.setup-caret { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .18s ease, color .18s ease; }
.setup-step[open] .setup-caret { transform: rotate(90deg); color: var(--ink); }
.setup-step-body { display: grid; gap: 8px; padding: 0 12px 14px 57px; }
.setup-step-body .setup-actions { max-width: none; width: auto; padding-left: 0; justify-content: flex-start; }
.setup-step-body .setup-actions button, .setup-step-body .setup-actions a { min-height: 42px; }
/* More */
.more-search-card { border-color: color-mix(in srgb, var(--lime) 38%, var(--line)); }
.more-account-card .form-actions { margin-bottom: 12px; }
.more-account-card .form-actions button { flex: 1 1 140px; }
.more-account-card .admin-overflow-field { margin-top: 0; padding: 0; border-top: 0; }
/* Admin search sheet */
.admin-search-sheet { width: min(100%, 640px); }
.admin-search-field { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; border-bottom: 1px solid var(--line); }
.admin-search-ico { display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); }
.admin-search-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.admin-search-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 16px; }
.admin-search-input:focus { outline: none; box-shadow: none; }
.admin-search-cancel { flex: 0 0 auto; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--coral); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-search-results { display: grid; gap: 2px; max-height: min(52vh, 420px); overflow: auto; padding: 8px 0; }
.admin-search-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; font-family: inherit; cursor: pointer; }
.admin-search-row:hover, .admin-search-row.is-cursor { background: var(--ad-surface-hover, color-mix(in srgb, var(--paper) 66%, var(--ink) 12%)); }
.admin-search-row:focus-visible { outline: 3px solid var(--coral); outline-offset: -2px; }
.admin-search-row-text { display: grid; gap: 1px; min-width: 0; }
.admin-search-row-text strong { font-size: 14.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-search-row-text small { font-size: 11.5px; color: var(--muted); }
.admin-search-row-go { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.admin-search-empty { margin: 0; padding: 18px 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.admin-search-hint { margin: 0; padding: 10px 0 max(14px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); text-align: center; }
/* Settings sub-tabs: one swipeable row instead of three wrapped rows, and it
   stays under the app bar so switching a setting never means scrolling back. */
.settings-tabs { position: sticky; top: 84px; z-index: 12; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 0 12px; background: var(--menu-bg); scroll-snap-type: x proximity; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs .pill { scroll-snap-align: start; }
@media (min-width: 900px) { .settings-tabs { top: 92px; } }
@media (prefers-reduced-motion: reduce) {
  .admin-overflow-panel, .setup-caret { animation: none; transition: none; }
}
/* ================= Make a menu: Create + My menus ================= */
/* Two sub-screens under one sidebar entry. The tabs are the only navigation
   inside the menu maker, so Create and the saved library never share a scroll. */
.maker-tabs { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 82%, var(--line)); }
.maker-tab { min-height: 36px; padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.maker-tab:hover { color: var(--ink); }
.maker-tab.is-active { background: var(--lime); color: var(--button-text); }
.maker-steps { display: flex; gap: 18px; margin: 0 0 14px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.maker-steps::-webkit-scrollbar { display: none; }
.maker-steps li { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--muted); font-size: 12.5px; font-weight: 750; }
.maker-step-number { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.maker-steps li.active { color: var(--ink); }
.maker-steps li.active .maker-step-number { border-color: var(--lime); background: var(--lime); color: var(--button-text); }
.maker-steps li.done .maker-step-number { border-color: var(--lime); color: var(--lime); }
.maker-body { display: grid; gap: 14px; }
.maker-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.maker-card-head h2 { margin: 4px 0 6px; }
.maker-card-head p:last-child { margin-bottom: 0; }
.maker-card-head > .primary { margin-left: auto; }
.maker-match { margin: 12px 0 0; }
.maker-design-fields { margin-top: 16px; }
.maker-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.maker-segmented label { position: relative; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }
.maker-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.maker-segmented span { display: grid; gap: 2px; }
.maker-segmented small { color: var(--muted); font-size: 11px; }
.maker-segmented label:has(input:checked) { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.maker-segmented label:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Two short fields that must read as one row: the labels sit on one line and the
   input and the shape buttons start at the same height. Without this the tall
   segmented boxes dragged the Shape column down beside the title input. */
.form-grid.two.maker-design-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.maker-design-fields > .field { align-content: start; }
.maker-design-fields .maker-segmented { align-self: start; }
@media (max-width: 700px) { .form-grid.two.maker-design-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* The zoom link must sit above the radio that covers the card. */
.menu-style-card-image > input { z-index: 1; }
.menu-style-zoom { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink); font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.menu-style-zoom:hover { background: var(--lime); color: var(--button-text); }
.maker-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.maker-actions .primary { min-height: 46px; padding: 11px 20px; }
.maker-actions-sticky { position: sticky; bottom: 10px; z-index: 8; margin: 18px -10px -10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.maker-pick-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.maker-pick-toolbar .form-actions { margin: 0; }
.maker-groups { display: grid; gap: 9px; margin-top: 10px; }
.maker-group { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); overflow: clip; }
.maker-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; cursor: pointer; font-size: 14px; font-weight: 800; list-style: none; }
.maker-group > summary::-webkit-details-marker { display: none; }
.maker-group[open] > summary { border-bottom: 1px solid var(--line); }
.maker-group-caret { color: var(--muted); font-size: 16px; line-height: 1; transition: transform .18s ease; }
.maker-group[open] .maker-group-caret { transform: rotate(180deg); }
.maker-group-body { padding: 2px 14px 10px; }
.maker-group-tools { display: flex; gap: 16px; padding: 6px 0 8px; }
.maker-dish { display: flex; align-items: center; gap: 11px; min-height: 45px; padding: 8px 2px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); cursor: pointer; }
.maker-dish input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--lime); }
.maker-dish-name { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.maker-dish-meta { flex: 0 0 auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.maker-dish[hidden] { display: none; }
.maker-search { max-width: none; margin: 4px 0 0; }
.maker-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 11.5px; font-weight: 800; }
.maker-pill-ok { border-color: var(--lime); color: var(--lime); }
.maker-review-dishes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.maker-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--paper) 80%, var(--line)); color: var(--ink); font-size: 11.5px; }
.maker-review { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: start; margin: 18px 0 14px; }
.maker-review-art { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; background: #111; }
.maker-review-copy h3 { margin: 4px 0 4px; font-size: 22px; }
.maker-review-facts { display: flex; flex-wrap: wrap; gap: 20px; margin: 14px 0; padding: 0; }
.maker-review-facts div { display: grid; gap: 2px; }
.maker-review-facts dt { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.maker-review-facts dd { margin: 0; font-size: 15px; font-weight: 800; }
.maker-result .menu-image-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: start; margin-top: 16px; }
.maker-result-card img { aspect-ratio: 3 / 4; object-fit: contain; background: #111; }
.maker-result-notes { margin: 16px 0 0; padding: 12px 14px 12px 30px; border-left: 3px solid var(--lime); border-radius: 8px; background: color-mix(in srgb, var(--paper) 82%, var(--line)); color: var(--muted); font-size: 12px; line-height: 1.5; }
.maker-no-results { margin: 18px 0 0; }
.maker-library-head .maker-card-head { align-items: center; }
.maker-library-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.maker-library-tools .menu-search { flex: 1 1 280px; margin: 0; }
.library-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.library-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.library-thumb { display: block; align-self: start; }
.library-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #111; }
.library-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.library-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.library-title-row h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.library-more { position: relative; flex: 0 0 auto; }
.library-more > summary { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 18px; font-weight: 800; line-height: 1; list-style: none; cursor: pointer; }
.library-more > summary::-webkit-details-marker { display: none; }
.library-more[open] > summary { color: var(--ink); border-color: var(--lime); }
.library-more-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 12; display: grid; min-width: 150px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
.library-more-title { margin: 0; padding: 7px 10px 4px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.library-more-panel button { min-height: 38px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.library-more-panel button:hover { background: color-mix(in srgb, var(--lime) 16%, transparent); }
.library-more-panel .danger { color: var(--coral); }
.library-langs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.library-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.library-actions a, .library-actions button { min-height: 38px; padding: 8px 13px; font-size: 12.5px; text-decoration: none; }
.library-pages { margin-top: 2px; color: var(--muted); font-size: 12px; }
.library-pages > summary { cursor: pointer; }
.library-pages ul { display: grid; gap: 4px; margin: 7px 0 0; padding: 0; list-style: none; }
.library-pages li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.library-pages li span { flex: 1 1 120px; color: var(--ink); font-size: 12px; }
.library-pages a { color: var(--muted); font-weight: 750; }
.library-more-button { display: block; margin: 14px auto 0; }
.maker-library-empty, .maker-library-loading { text-align: center; }
.maker-library-empty h3, .maker-library-loading h3 { margin-top: 0; }
@media (max-width: 899px) {
  /* On a phone the Continue/Generate bar must always be reachable, not only
     after scrolling past every dish. It floats above the bottom nav, and the
     card keeps a matching gap so the last dish is never hidden behind it. */
  .maker-actions-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); margin: 0; }
  .maker-actions-sticky .muted { display: none; }
  .maker-card[data-maker-step="1"], .maker-card[data-maker-step="2"], .maker-card[data-maker-step="3"] { padding-bottom: 108px; }
}
@media (max-width: 700px) {
  .menu-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .menu-style-card-image { padding: 7px; gap: 6px; }
  .menu-style-card-image .menu-style-copy strong { font-size: 12px; }
  .menu-style-card-image .menu-style-copy small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10.5px; }
  .menu-style-zoom { top: 8px; right: 8px; width: 26px; height: 26px; font-size: 13px; }
  .menu-style-badge { top: 13px; left: 13px; padding: 3px 8px; font-size: 9px; }
  .maker-steps { gap: 10px; }
  .maker-steps li { font-size: 11px; }
  .maker-step-number { width: 18px; height: 18px; font-size: 9.5px; }
  .maker-review { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .maker-review-copy h3 { font-size: 18px; }
  .maker-review-facts { gap: 12px; }
  .maker-review-facts dd { font-size: 13px; }
  .maker-actions .primary { flex: 1 1 auto; }
  .library-card { grid-template-columns: 96px minmax(0, 1fr); gap: 11px; padding: 11px; }
  .library-title-row h3 { font-size: 15px; }
  .library-actions a, .library-actions button { flex: 1 1 auto; text-align: center; justify-content: center; }
  /* The overflow is a floating sheet, not a dropdown that runs behind the
     bottom nav. A card near the fold used to open its last action off-screen. */
  .library-more-panel { position: fixed; top: auto; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); left: 12px; z-index: 70; min-width: 0; padding: 8px; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); }
  .library-more-panel button { min-height: 46px; font-size: 14px; }
}

/* Website settings — Colours, Welcome & logo, Ordering.
   One card per topic and flat, hairline-separated groups inside. The old markup
   put a bordered panel inside a bordered card (and a bordered box around every
   checkbox), so the tab read as a pile of boxes and the order of the form was
   lost. A heading names the topic; the groups only separate. */
.settings-card { display: grid; gap: 12px; }
.settings-card .section-heading { margin: 0; }
.settings-card > .muted.small { margin: 0; }
.settings-card .photo-preview { max-width: 200px; aspect-ratio: 16 / 9; margin: 0; }
.settings-card .brand-media { margin: 2px 0 0; }
.settings-card .brand-media > .photo-preview { width: 120px; max-width: 120px; aspect-ratio: 1; object-fit: contain; padding: 8px; background: color-mix(in srgb, var(--paper) 82%, var(--line)); }
.settings-card .preset-visual-grid, .settings-card .font-grid { gap: 8px; padding: 0; }
.settings-card .preset-visual, .settings-card .font-card { padding: 9px; border-radius: 12px; gap: 4px; }
.settings-group { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.settings-group > h3 { margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.settings-group .field { margin: 0; }
.settings-group > p, .settings-card .form-actions { margin: 0; }
.settings-toggle { display: flex; align-items: flex-start; gap: 9px; min-height: 34px; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 13px; font-weight: 750; cursor: pointer; }
.settings-toggle input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; padding: 0; border: 0; border-radius: 0; background: none; accent-color: var(--lime); }
.settings-card .check-row { gap: 4px 20px; align-items: center; }
.settings-card .color-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); column-gap: 20px; margin: 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.settings-card .color-cell { justify-content: flex-start; gap: 10px; min-height: 42px; padding: 6px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 0; background: none; font-size: 12.5px; font-weight: 750; cursor: pointer; }
.settings-card .color-cell > span { flex: 1 1 auto; }
.settings-card .color-cell input { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.settings-card .welcome-status { margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; }
.settings-card .welcome-status::before { width: 8px; height: 8px; margin-top: 5px; }
.settings-card .welcome-status-live { color: color-mix(in srgb, var(--lime) 78%, var(--ink)); }
.settings-card .welcome-status-pending { color: var(--coral); }
.settings-card.welcome-more-options > summary { cursor: pointer; font-weight: 800; }
.settings-card.welcome-more-options[open] > summary { margin-bottom: 4px; }
.settings-card .frame-size-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.settings-card .frame-size-controls label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.qr-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qr-row > div { flex: 1 1 220px; min-width: 0; }
.qr-row .qr-image { width: 118px; height: 118px; flex: 0 0 auto; }
.qr-inline { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qr-inline .qr-image { width: 96px; height: 96px; flex: 0 0 auto; }
@media (max-width: 420px) { .settings-card .frame-size-controls { grid-template-columns: 1fr; } }
.settings-card .frame-size-controls label[for$="-range"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Home setup list — hairline rows, not a second card inside the checklist.
   Seven remaining steps used to add a boxed tile each, which pushed the useful
   actions below two phone screens. */
.setup-steps { gap: 0; margin-top: 4px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.setup-step { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 0; background: none; }
.setup-step.is-done { opacity: .72; }
.setup-step-summary { gap: 9px; padding: 9px 2px; }
.setup-step-summary:focus-visible { border-radius: 8px; outline-offset: -2px; }
.setup-step-summary .setup-ico { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
.setup-step-title strong { font-size: 13.5px; }
.setup-step-title small { font-size: 11px; }
.setup-step-body { padding: 0 2px 12px 39px; }
.setup-step-body .setup-actions button, .setup-step-body .setup-actions a { min-height: 38px; }
.setup-caret { width: 24px; height: 24px; }
.settings-card .photo-preview.logo-preview { width: 120px; max-width: 120px; aspect-ratio: 1; }
@media (max-width: 699px) { .category-tools { gap: 4px; } }
/* Category actions collapse into the same accessible row menu as a dish.
   The panel is right-anchored on phones because the trigger sits at the card's
   right edge; the dish menu's left-anchored panel would run off-screen here. */
.category-tools .row-menu { display: block; }
.category-menu > summary { display: grid; place-items: center; }
@media (max-width: 699px) { .category-menu .row-menu-panel { left: auto; right: 0; } }
@media (max-width: 699px) { body.admin-mode .category-menu .row-menu-panel { left: auto; right: 0; } }

/* ---------------- Social posts: the picture studio ---------------- */
/* Three numbered steps, one button. Everything here is sized for a thumb: the
   dish cards are the primary control, so they are big enough to tap without
   aiming, and the tick is a separate element rather than a border swap so the
   chosen dish is obvious at a glance on a bright screen in daylight. */
.studio-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.studio-step-head h3 { margin: 0 0 4px; font-size: 17px; }
.studio-step-head p { margin: 0; }
.studio-step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--lime); color: var(--button-text); font-weight: 900; font-size: 15px; }
.studio-count { padding-top: 7px; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.studio-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.studio-dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.studio-dish { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.studio-dish:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.studio-dish:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.studio-dish.is-picked { border-color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
.studio-dish-photo { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--paper) 70%, var(--line)); }
.studio-dish-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio-dish-initial { display: grid; place-items: center; width: 100%; height: 100%; font-size: 26px; font-weight: 900; color: var(--muted); }
.studio-dish-name { font-size: 13px; font-weight: 800; line-height: 1.3; }
.studio-dish-meta { font-size: 12px; color: var(--muted); }
.studio-dish-tick { position: absolute; top: 8px; right: 8px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--lime); color: var(--button-text); font-size: 13px; font-weight: 900; }
.studio-dish.is-picked .studio-dish-tick { display: grid; }
.studio-format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.studio-format { display: grid; gap: 5px; justify-items: center; padding: 16px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); cursor: pointer; text-align: center; }
.studio-format:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.studio-format.is-picked { border-color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
.studio-format-shape { display: block; margin-bottom: 4px; border: 2px solid color-mix(in srgb, var(--ink) 45%, var(--paper)); border-radius: 6px; background: color-mix(in srgb, var(--ink) 14%, var(--paper)); }
.studio-format-shape.square { width: 52px; height: 52px; }
.studio-format-shape.portrait { width: 33px; height: 58px; }
.studio-format strong { font-size: 14.5px; }
.studio-format small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.studio-format.is-picked small { color: inherit; opacity: .78; }
.studio-format-size { font-variant-numeric: tabular-nums; }
.studio-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.studio-idea { padding: 8px 13px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.studio-idea:hover { border-color: var(--coral); }
.studio-make { display: grid; gap: 10px; margin: 14px 0 6px; }
.studio-make .primary { min-height: 54px; font-size: 16.5px; font-weight: 850; }
.studio-progress { display: grid; gap: 7px; }
.studio-progress-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 70%, var(--line)); overflow: hidden; }
.studio-progress-bar { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--lime); transition: width .35s ease; }
.studio-ready { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); background: color-mix(in srgb, var(--lime) 6%, var(--paper)); }
.studio-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 12px; }
.studio-shot { display: grid; gap: 8px; margin: 0; }
.studio-shot img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; border-radius: 12px; background: color-mix(in srgb, var(--paper) 60%, var(--line)); }
.studio-shot figcaption { display: block; }
.studio-download { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--lime) 70%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--lime) 16%, var(--paper)); color: var(--ink); font-size: 13.5px; font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none; }
.studio-download:hover { border-color: var(--lime); }
.studio-download small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.studio-download--small { display: inline-flex; min-height: 40px; padding: 8px 12px; font-size: 12.5px; }
.studio-caption-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.studio-caption { margin: 0 0 8px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.studio-row { display: grid; gap: 7px; padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.studio-row:first-child { border-top: 0; padding-top: 4px; }
.studio-row-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.studio-row-head strong { font-size: 14px; }
.studio-row-shots { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) {
  .studio-dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-step-head { grid-template-columns: auto minmax(0, 1fr); }
  .studio-count { grid-column: 2; padding-top: 0; }
  .studio-shot img { max-height: 300px; }
}

/* ---- Admin: neat language pills, the Match-my-website choice, label badges ----
   The language picker used to be a row of big bordered cards, which read as a
   separate settings panel and pushed the page out of alignment. These are plain
   pills on one line that wraps, so the choice stays obvious and compact. */
/* Language choices are a list of checkboxes, not a row of pills: thirteen
   outlined capsules made the step look like a wall of buttons. */
.maker-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.maker-lang { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.maker-lang:hover { color: var(--lime); }
.maker-lang input { margin: 0; accent-color: var(--lime); }
.maker-lang.is-locked { color: var(--muted); cursor: default; }
.maker-lang.is-off { opacity: .55; }
.maker-lang-note { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.maker-direction { margin-top: 14px; }

/* "Match my website" is a ninth card in the same grid, with the restaurant's own
   palette on it, so it is a choice you can see rather than a checkbox underneath. */
.menu-style-match-card { cursor: pointer; }
.menu-style-match-preview { display: grid; gap: 10px; place-items: center; min-height: 168px; padding: 22px 18px; border-radius: 12px; background: color-mix(in srgb, var(--paper) 90%, var(--ink) 5%); border: 1px dashed var(--line); }
.menu-style-match-swatch { display: flex; gap: 6px; }
.menu-style-match-swatch span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); }
.menu-style-match-word { font-size: 27px; font-weight: 300; letter-spacing: -.02em; }
.menu-style-match-rule { display: block; width: 62px; height: 1px; opacity: .45; }

/* Guest badges sit on the photograph as small icons; the words live on the dish
   page and in the screen-reader label, so a card stays quiet and several dishes
   fit on one screen. */
.diet-badges { top: auto; bottom: 6px; left: 6px; right: auto; flex-wrap: wrap; max-width: calc(100% - 12px); justify-content: flex-start; }
.diet-badge { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.qr-poster-builder { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.qr-poster-builder h3 { margin-bottom: 4px; }
/* Keep the specials strip from owning the first screen, so the menu itself is
   what a guest meets when the page opens. */
@media (max-width: 560px) {
  .hero.hero-image { max-height: none; }
  .hero.hero-image img { max-height: none; }
  .specials-section .section-heading { margin-bottom: 8px; }
}
.bulk-photos-card { display: grid; gap: 6px; }
.maker-lang-flag { font-size: 13px; line-height: 1; }

/* ================= Guest menu: category rail + dietary quick filters =================
   Two clearly separated rows, one shared state. The category pills (Section A) keep
   the restaurant's own sections; the dietary bar (Section B) always shows the
   guest's food options without opening a panel. Everything is built from the theme
   variables, so Pizza Cats keeps black + gold and Mozza keeps cream + red. */
.diet-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.diet-bar { display: grid; gap: 2px; margin-top: 2px; padding: 9px 0 2px; border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent); }
.diet-bar-head { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.diet-bar-head .diet-icon { width: 13px; height: 13px; color: var(--coral); }
.diet-bar-head i { flex: 1; height: 1px; background: color-mix(in srgb, var(--line) 55%, transparent); }
/* Horizontal, never wrapped into three rows. touch-action stays auto: a strip
   that claims the gesture traps vertical page scrolling on a phone. */
.diet-scroll { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 3px 0 4px; }
.diet-scroll::-webkit-scrollbar { display: none; }
/* Every diet chip and every taste chip is the same neutral pill. The diet chips
   used to carry a lime tint, which made Vege and Vegan look already chosen next
   to the taste chips — a highlighted filter that is not filtered is a lie. */
.diet-chip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 11.5px; font-weight: 750; letter-spacing: .01em; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.diet-chip .diet-icon { width: 13px; height: 13px; color: var(--coral); }
.diet-chip:hover { border-color: color-mix(in srgb, var(--lime) 55%, var(--line)); }
.diet-chip:active { transform: scale(.97); }
.diet-chip.active { background: var(--lime); border-color: var(--lime); color: var(--button-text); box-shadow: 0 6px 16px color-mix(in srgb, var(--lime) 26%, transparent); }
.diet-chip.active .diet-icon { color: var(--button-text); }
.diet-chip:focus-visible, .filter-clear:focus-visible, .filter-sheet-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* The advanced trigger is deliberately quieter than a dietary chip: it opens a
   layer, it does not filter anything by itself. */
.diet-chip-filters { background: transparent; border-color: var(--line); font-weight: 800; }
.diet-chip-filters .diet-icon { color: var(--ink); }
.diet-chip-filters .rail-dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
@media (max-width: 639px) {
  .menu-rail .chip { min-height: 32px; gap: 4px; padding: 5px 9px; font-size: 11.5px; letter-spacing: 0; }
  .menu-rail .category-nav { gap: 5px; padding: 6px 0 8px; }
  .menu-rail .chip .chip-index { font-size: 10px; }
  .menu-rail .rail-toggle { min-height: 32px; padding: 5px 11px; font-size: 11.5px; }
  .diet-bar { padding-top: 7px; }
}
.filter-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 12px 0 0; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--lime) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--lime) 8%, var(--paper)); font-size: 12px; }
.filter-summary-count { font-weight: 800; font-variant-numeric: tabular-nums; }
.filter-summary-list { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.filter-clear { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 11.5px; font-weight: 800; }
.filter-clear:hover { border-color: var(--coral); }
.menu-empty { display: grid; justify-items: start; gap: 10px; margin: 20px 0; padding: 18px; border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.menu-empty p { max-width: 42ch; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.menu-empty .primary { min-height: 40px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--lime); color: var(--button-text); font-weight: 800; }
/* Advanced filters live in a layered sheet. Expanding them inside the sticky
   rail is what used to paint filter rows over the dish cards. */
body.filter-sheet-open { overflow: hidden; }
.filter-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.filter-sheet-scrim { position: absolute; inset: 0; background: rgba(6, 8, 10, .58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.filter-sheet-panel { position: relative; display: flex; flex-direction: column; width: min(100%, 560px); max-height: min(82vh, 620px); margin: 0 auto; padding: 6px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); box-shadow: 0 -18px 50px rgba(0,0,0,.38); animation: filter-sheet-in .22s ease; }
.filter-sheet-panel:focus { outline: none; }
.filter-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.filter-sheet-head h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.filter-sheet-close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.filter-sheet-close .diet-icon { width: 17px; height: 17px; }
.filter-sheet-body { display: grid; gap: 16px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 0 6px; }
.filter-sheet-group { display: grid; gap: 0; }
.filter-sheet-label { margin: 0 0 8px; color: var(--coral); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.filter-sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-sheet-chips .diet-chip { min-height: 44px; }
.filter-sheet-chips .chip { min-height: 44px; }
.filter-sheet-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.filter-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.filter-sheet-foot .primary { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--lime); color: var(--button-text); font-weight: 850; }
@keyframes filter-sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 720px) {
  .filter-sheet { align-items: center; }
  .filter-sheet-panel { max-height: min(78vh, 560px); padding-inline: 22px; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.42); }
}
@media (prefers-reduced-motion: reduce) { .filter-sheet-panel { animation: none; } }
/* Compact sticky state: two slim rows, solid background, no overlap. On a phone
   the category row becomes one swipe line so the whole rail stays under ~96px. */
.menu-rail.is-stuck .rail-inner { background: var(--menu-bg, var(--cream)); }
.menu-rail.is-stuck .diet-bar { padding-top: 6px; }
.menu-rail.is-stuck .diet-bar-head { display: none; }
.menu-rail.is-stuck .diet-chip { min-height: 34px; font-size: calc(var(--rail-chip-size) - 2px); }
.menu-rail.is-stuck .diet-scroll { padding: 2px 0 3px; }
.menu-rail.is-stuck .category-nav { padding-bottom: 6px; }
@media (max-width: 639px) {
  .menu-rail.is-stuck .rail-inner { padding-top: 6px; padding-bottom: 6px; }
  .menu-rail.is-stuck .category-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: auto; padding-bottom: 8px; }
  .menu-rail.is-stuck .category-nav::-webkit-scrollbar { display: none; }
  .menu-rail.is-stuck .category-nav .chip { flex: 0 0 auto; min-height: 34px; padding: 5px 11px; font-size: 12px; }
}

/* SEO optimiser — the overview card */
.seo-overview { display: grid; gap: 14px; margin: 12px 0 4px; }
.seo-theme h3 { margin: 2px 0 4px; font-size: 18px; }
.seo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.seo-chip { min-height: 30px; font-size: 12px; padding: 4px 10px; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.seo-table th, .seo-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.seo-table td:nth-child(2) { opacity: 0.75; }
.seo-checks, .seo-list, .seo-history-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 13px; }
.seo-check.is-ok > span:first-child { color: var(--lime); }
.seo-check.is-bad > span:first-child { color: var(--coral); }
.seo-blocked { border: 1px solid var(--coral); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
@media (max-width: 620px) { .seo-table { font-size: 12px; } .seo-table th:nth-child(2), .seo-table td:nth-child(2) { display: none; } }
.seo-optimiser { scroll-margin-top: 90px; }
.seo-changes { margin: 4px 0 10px; }
.seo-advanced { margin-top: 10px; }
.seo-check.is-unknown > span:first-child { opacity: 0.5; }

/* Dish details — the guest card opens one dish
   The card is the tap target, but the dish name is a real button, so a keyboard
   and a screen reader reach the same place without nesting a button inside a
   button. Every string in the panel comes from UI_STRINGS. */
.meal-card[data-meal] { cursor: pointer; }
/* The dish name is the tap target for dish details. all:unset strips the
   button chrome, which used to collapse its box to the text line (~17px) —
   too small for a finger. min-height restores a 32px target and the negative
   margins keep the card row at its compact height. */
.meal-open { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; margin: -8px 0; }
.meal-open:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.dish-modal .modal { padding-top: 18px; }
.dish-modal-price { margin: 3px 0 0; font-weight: 700; color: var(--coral); }
.dish-modal-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; margin: 0 0 16px; background: var(--line); }
.dish-modal-description { margin: 0 0 14px; line-height: 1.6; }
.dish-modal-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.dish-label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: color-mix(in srgb, var(--coral) 12%, transparent); font-size: 12px; font-weight: 600; }
.dish-label svg { width: 16px; height: 16px; flex: 0 0 auto; }
.dish-modal-note { margin: 0 0 14px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--coral) 14%, transparent); font-size: 13px; font-weight: 600; }
.dish-modal-options { margin: 0 0 14px; }
.dish-modal-options h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.dish-modal-options ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dish-modal-options li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; border-radius: 10px; background: color-mix(in srgb, var(--line) 40%, transparent); font-size: 13px; }
.dish-modal-allergy { margin: 0 0 14px; }
.dish-modal-add { width: 100%; }
@media (min-width: 720px) { .dish-modal .modal { padding: 24px; } }

/* One size scale for the two guest chip rows.
   The filter strip sits under the category row and is deliberately 2px smaller
   than it, so diet and taste are all readable at the top without competing with
   the restaurant's own sections. One variable drives both, so the 2px gap stays
   true at every breakpoint instead of drifting when a size is tuned. */
:root { --rail-chip-size: 12.5px; }
.menu-rail .category-nav .chip { font-size: var(--rail-chip-size); }
.diet-scroll .diet-chip, .diet-scroll .filter-chip,
.filter-sheet-chips .diet-chip, .filter-sheet-chips .filter-chip { font-size: calc(var(--rail-chip-size) - 2px); }
/* A taste chip is a .chip, so it would otherwise be 38px tall beside a 32px
   dietary chip. In the strip they share one height. */
.diet-scroll .filter-chip { min-height: 32px; padding: 0 10px; }
.diet-chip .chip-emoji, .filter-chip .chip-emoji { font-size: 14px; line-height: 1; }
@media (max-width: 639px) {
  :root { --rail-chip-size: 11.5px; }
  .menu-rail.is-stuck { --rail-chip-size: 12px; }
  .menu-rail.is-stuck .category-nav .chip { font-size: var(--rail-chip-size); }
}

/* A phone gives the words a little less room, so the picture column steps down —
   and the fade follows it, because both are driven by --meal-photo-w. */
@media (max-width: 639px) { .meal-card { --meal-photo-w: 124px; } }