/* ==========================================================================
   QRcms.AI — design tokens
   ========================================================================== */
:root {
  --red-900: #6E0B14;
  --red-700: #9D0208;
  --red-600: #C1121F;
  --red-500: #D62828;
  --red-050: #FDF0F0;

  --amber-500: #FFB703;
  --amber-400: #FFC94A;
  --amber-050: #FFF8E6;

  --ink: #1A1214;
  --ink-soft: #4A3B3D;
  --muted: #7C6B6D;
  --line: #EADFDF;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #FBF7F6;

  --ok: #1B7F4B;
  --danger: var(--red-600);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(26, 18, 20, .06);
  --shadow-md: 0 4px 14px rgba(26, 18, 20, .07);
  --shadow-lg: 0 18px 50px rgba(110, 11, 20, .16), 0 2px 8px rgba(26, 18, 20, .06);

  --font: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--red-600); }

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; }

.wrap { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
.wrap--wide { max-width: 1040px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hidden { display: none !important; }

/* ==========================================================================
   Animated backdrop — drifting colour blobs + food that fades in and out.
   Everything here animates transform/opacity only, so it stays on the
   compositor and never blocks the form.
   ========================================================================== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  transition: opacity .4s ease, visibility .4s;
  /* A deep red that slides through crimson into amber, and back. This is the
     "changing" part — background-position animates across an oversized
     gradient, which is cheap and never janks. */
  background: linear-gradient(
    135deg,
    #4E0A0F 0%, #7A0C13 14%, #9D0208 30%,
    #C1121F 46%, #DC2F02 62%, #F48C06 80%, #FFB703 100%
  );
  background-size: 320% 320%;
  animation: hue-drift 28s ease-in-out infinite;
}

/* Fully out behind the editor — visibility also stops the compositor work. */
.backdrop.is-off { opacity: 0; visibility: hidden; }

@keyframes hue-drift {
  0%, 100% { background-position: 0% 40%; }
  50%      { background-position: 100% 60%; }
}

/* Vignette: deepens the middle so white type stays readable no matter where
   the gradient has drifted to, while the corners keep their colour. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(48, 4, 8, .52) 0%,
    rgba(48, 4, 8, .28) 42%,
    rgba(48, 4, 8, 0) 76%
  );
}

.blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: .55;
  will-change: transform;
}
.blob--red    { width: 44vmax; height: 44vmax; left: -12vmax; top: -14vmax;
                background: radial-gradient(circle, #FF4D3D 0%, rgba(255,77,61,0) 70%);
                animation: drift-a 26s ease-in-out infinite; }
.blob--deep   { width: 38vmax; height: 38vmax; right: -10vmax; top: 20vmax;
                background: radial-gradient(circle, #FF1E3C 0%, rgba(255,30,60,0) 70%);
                animation: drift-b 32s ease-in-out infinite; }
.blob--amber  { width: 40vmax; height: 40vmax; left: 24vmax; bottom: -18vmax;
                background: radial-gradient(circle, #FFD60A 0%, rgba(255,214,10,0) 70%);
                animation: drift-c 29s ease-in-out infinite; }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-8vmax, -7vmax, 0) scale(.92); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.95); }
  50%      { transform: translate3d(-10vmax, -5vmax, 0) scale(1.1); }
}

/* A single floating dish, above the vignette so it stays legible.
   JS sets --x/--y/--dx/--peak/--size and the timing. */
.food {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  font-size: var(--size, 3rem);
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: food-float;
  animation-timing-function: cubic-bezier(.4, 0, .3, 1);
  animation-iteration-count: infinite;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
}

@keyframes food-float {
  0%   { opacity: 0; transform: translate3d(0, 30px, 0) scale(.84) rotate(-9deg); }
  20%  { opacity: var(--peak, .5); }
  76%  { opacity: var(--peak, .5); }
  100% { opacity: 0; transform: translate3d(var(--dx, 30px), -110px, 0) scale(1.08) rotate(9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop, .blob { animation: none; }
  .food { animation: none; opacity: var(--peak, .5); }
}

/* ==========================================================================
   Controls
   ========================================================================== */
button, .btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: border-color .15s, background .15s, transform .06s, box-shadow .15s;
}
button:hover, .btn:hover { border-color: var(--muted); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--amber-400);
  outline-offset: 1px;
}

button.primary {
  background: linear-gradient(180deg, var(--red-500), var(--red-600));
  border-color: var(--red-700);
  color: #fff;
  box-shadow: 0 1px 2px rgba(110, 11, 20, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
button.primary:hover { filter: brightness(1.06); }
button.block { width: 100%; padding: .75rem 1rem; font-size: 1rem; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { background: var(--surface-alt); color: var(--ink); }
button.link {
  background: none; border: 0; padding: 0; color: var(--red-600);
  font-weight: 600; font-size: .87rem; text-decoration: underline; text-underline-offset: 2px;
}
button.danger { color: var(--danger); }
button.tiny { padding: .3rem .5rem; font-size: .8rem; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(214, 40, 40, .14);
}
input::placeholder { color: #B4A6A7; }

label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}
.field { margin-bottom: 1rem; text-align: left; }

/* Two fields sharing a row — collapses on narrow screens. Used by sign-up
   for "Your name / Restaurant name". */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 430px) { .field-row { grid-template-columns: 1fr; } }

/* The menu link forming under the restaurant-name field as they type. */
.slug-preview {
  margin: -.35rem 0 1rem;
  text-align: left;
  font-size: .8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.slug-preview b { color: var(--red-600); font-weight: 600; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 12rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow-md);
}

.notice {
  padding: .75rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  font-size: .89rem;
  margin-bottom: 1rem;
  text-align: left;
}
.notice.error { border-color: var(--red-500); background: var(--red-050); color: var(--red-700); }
.notice.ok    { border-color: #A9DCC0; background: #F0FAF4; color: var(--ok); }
.notice.warn  { border-color: var(--amber-500); background: var(--amber-050); color: #7A5500; }
.notice strong { display: block; margin-bottom: .15rem; }
.notice code {
  background: rgba(0,0,0,.06); padding: .05rem .3rem; border-radius: 4px;
  font-size: .92em; word-break: break-all;
}
.notice ol, .notice ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.notice li { margin-bottom: .25rem; }

.pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.pill.working { color: var(--red-600); border-color: var(--red-500); background: var(--red-050); }
.pill.bad     { color: #fff; border-color: var(--red-700); background: var(--red-600); }
.pill.good    { color: var(--ok); border-color: #A9DCC0; background: #F0FAF4; }

/* ==========================================================================
   Wordmark
   ========================================================================== */
.wordmark {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
}
/* The mark scales with whatever type it sits beside. */
.wordmark .mark {
  width: 1.12em;
  height: 1.12em;
  margin-right: .32em;
  vertical-align: -.16em;
  flex: none;
}
.wordmark .qr  { color: var(--red-600); }
.wordmark .cms { color: var(--ink); }
/* On the hero the field behind is deep red, so the mark flips to white. */
.hero .wordmark .qr,
.hero .wordmark .cms { color: #fff; }
.wordmark .ai  {
  background: linear-gradient(95deg, var(--amber-500), var(--red-500));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--amber-500);
}
.wordmark--hero {
  font-size: clamp(2.6rem, 7.5vw, 4rem);
  text-shadow: 0 2px 24px rgba(40, 2, 6, .5);
}
.hero .wordmark .ai {
  background: linear-gradient(95deg, #FFD60A, #FFB703);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark--bar  { font-size: 1.2rem; }

/* ==========================================================================
   Auth / onboarding hero
   ========================================================================== */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}
.hero-inner { width: 100%; max-width: 27rem; text-align: center; }

.hero-tagline {
  margin: 1rem auto 0;
  max-width: 25rem;
  color: rgba(255, 255, 255, .93);
  font-size: 1.05rem;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(40, 2, 6, .55);
}

.auth-card {
  margin-top: 1.75rem;
  padding: 1.6rem;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.auth-switch {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  margin-bottom: 1.25rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.auth-switch button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: .45rem .5rem;
  font-size: .89rem;
  color: var(--muted);
}
.auth-switch button[aria-selected="true"],
.auth-switch button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.auth-foot { margin-top: 1rem; text-align: center; }
.auth-foot button + button { margin-left: .9rem; }

/* ==========================================================================
   Auth split layout — login.html.
   A calm white form panel; the brand lives in a side pane on wide screens.
   ========================================================================== */
.auth-page { background: var(--surface-alt); }

.auth-split {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
}

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--surface);
}
.auth-main-inner { width: 100%; max-width: 25.5rem; }

.auth-brand { margin-bottom: 2.2rem; display: inline-flex; }

.auth-heading {
  margin: 0 0 .3rem;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.auth-sub { margin: 0 0 1.4rem; color: var(--muted); font-size: .95rem; }
.auth-sub b { color: var(--ink); }

.auth-page .auth-switch { margin-bottom: 1.4rem; }

.auth-legal {
  margin: 2.2rem 0 0;
  font-size: .78rem;
  color: var(--muted);
}

/* Confirm-your-email panel, shown in place of the form after sign-up. */
.confirm-view { text-align: left; }
.confirm-icon { margin-bottom: 1.1rem; }
#confirm-heading:focus { outline: none; }
.confirm-steps {
  margin: 0 0 1.4rem;
  padding: .9rem 1rem .9rem 2.2rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.confirm-steps li { margin: .25rem 0; }

/* Brand pane — deep red, one product vignette, no clutter. */
.auth-side {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background:
    radial-gradient(90% 90% at 80% 10%, rgba(255, 183, 3, .18) 0%, transparent 55%),
    radial-gradient(120% 100% at 15% 0%, var(--red-700) 0%, transparent 60%),
    linear-gradient(160deg, var(--red-900) 0%, #3D060C 100%);
}
.auth-side-inner { width: 100%; max-width: 21rem; text-align: center; }
.auth-side-art { width: 78%; height: auto; margin: 0 auto 1.6rem; display: block; }

.auth-quote {
  margin: 0 0 1.4rem;
  color: rgba(255, 255, 255, .92);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
}

.auth-side .trust { margin-top: 0; }

@media (max-width: 920px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-main { align-items: flex-start; padding-top: 3.5rem; }
}

.trust {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 8px rgba(40, 2, 6, .5);
}
.trust span { display: inline-flex; align-items: center; gap: .4rem; }
.trust b { color: var(--amber-400); font-size: 1.05rem; font-weight: 800; }

/* ==========================================================================
   Admin editor
   ========================================================================== */
.topbar {
  position: sticky;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--red-700), var(--red-500), var(--amber-500)) 1;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.topbar-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.menu-link-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .65rem .9rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: .88rem;
}
.menu-link-bar svg { color: var(--red-600); flex: none; }
.menu-link-bar code { color: var(--ink-soft); }
.menu-link-bar code {
  background: #fff; border: 1px solid var(--line); border-radius: 5px;
  padding: .15rem .4rem; word-break: break-all;
}

.editor-category { margin-bottom: 1.4rem; }
.editor-category > header {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding: .6rem .75rem;
  background: linear-gradient(180deg, #fff, var(--surface-alt));
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
}
.editor-category > header input {
  flex: 1 1 12rem;
  width: auto;
  font-weight: 700;
  border-color: transparent;
  background: transparent;
}
.editor-category > header input:hover { border-color: var(--line); background: #fff; }

.editor-items {
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.editor-item {
  display: grid;
  grid-template-columns: 1fr 7rem auto;
  gap: .6rem;
  align-items: start;
  padding: .75rem;
  border-bottom: 1px solid var(--line);
}
.editor-item:last-child { border-bottom: 0; }
.editor-item:hover { background: var(--surface-alt); }
.editor-item .es-preview {
  grid-column: 1 / -1;
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--red-050);
  border-left: 3px solid var(--red-500);
  border-radius: 0 6px 6px 0;
  padding: .35rem .6rem;
}
.editor-item .controls { display: flex; gap: .3rem; align-items: center; }

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.empty-state .emoji { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.empty-state h3 { margin: 0 0 .35rem; }

@media (max-width: 640px) {
  .editor-item { grid-template-columns: 1fr; }
  .topbar { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Row action menu
   ========================================================================== */
.row-menu { position: relative; display: inline-block; }
.row-menu > button { padding: .3rem .55rem; line-height: 1; font-size: 1rem; }
.row-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + .3rem);
  z-index: 20;
  min-width: 12rem;
  padding: .3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.row-menu-pop a,
.row-menu-pop button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: .45rem .6rem;
  border-radius: 6px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.row-menu-pop a:hover,
.row-menu-pop button:hover { background: var(--surface-alt); }
.row-menu-pop button.danger { color: var(--danger); }
.row-menu-pop button.danger:hover { background: var(--red-050); }
.row-menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: .3rem 0; }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(26, 18, 20, .45);
  backdrop-filter: blur(3px);
}
.modal {
  width: 100%;
  max-width: 30rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.35rem;
  max-height: 85vh;
  overflow-y: auto;
}
.modal--wide { max-width: 46rem; }
.modal h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.modal p { margin: 0 0 1rem; font-size: .92rem; color: var(--ink-soft); }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; }
.modal-actions .grow { margin-right: auto; }

/* ==========================================================================
   Editor: a menu, not a spreadsheet
   ========================================================================== */
.add-section-form {
  display: flex;
  gap: .6rem;
  margin-top: 1.25rem;
  padding: .8rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.add-section-form input { flex: 1 1 auto; }
.add-section-form button { flex: 0 0 auto; }

.editor-category > header .section-title {
  flex: 1 1 12rem;
  font-weight: 700;
  font-size: 1rem;
  border-color: transparent;
  background: transparent;
  padding-left: .4rem;
}
.editor-category > header .section-title:hover,
.editor-category > header .section-title:focus { border-color: var(--line); background: #fff; }
.section-count { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* Item rows: labelled fields with room to breathe. */
.editor-item {
  grid-template-columns: 1fr 8.5rem auto;
  padding: .85rem;
  gap: .75rem;
}
.editor-item .field-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .2rem;
}
.editor-item .item-name { font-weight: 600; }
.price-wrap { position: relative; }
.price-wrap .currency {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .9rem;
  pointer-events: none;
}
.price-wrap input { padding-left: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; }

/* First-run: two clear ways in, instead of a bare form. */
/* ==========================================================================
   First run — a guided welcome instead of a cockpit.
   body[data-firstrun] hides the working tools until the menu exists.
   ========================================================================== */
body[data-firstrun] .menu-link-bar,
body[data-firstrun] .add-section-form,
body[data-firstrun] #editor-retranslate,
body[data-firstrun] #open-import { display: none; }

.welcome {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.welcome-eyebrow {
  margin: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-600);
}
.welcome h2 {
  margin: 0 0 .4rem;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 800;
}
.welcome-copy { margin: 0 0 1.4rem; color: var(--ink-soft); max-width: 38rem; }

.welcome-steps {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
}
.welcome-steps li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .85rem .9rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.welcome-step-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--red-050);
  color: var(--red-700);
  font-size: .78rem;
  font-weight: 700;
}
.welcome-steps h4 { margin: .1rem 0 .15rem; font-size: .9rem; }
.welcome-steps p { margin: 0; font-size: .8rem; color: var(--muted); }

.start-choice.start-choice--primary {
  border-color: var(--red-600);
  box-shadow: 0 0 0 1px var(--red-600), var(--shadow-sm);
}

.start-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .85rem;
  margin-top: 1.25rem;
  text-align: left;
}
.start-choice {
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .06s;
}
.start-choice:hover { border-color: var(--red-500); box-shadow: var(--shadow-md); }
.start-choice:active { transform: translateY(1px); }
.start-choice .emoji { font-size: 1.6rem; display: block; margin-bottom: .4rem; }
.start-choice h4 { margin: 0 0 .25rem; font-size: 1rem; }
.start-choice p { margin: 0; font-size: .85rem; color: var(--muted); }
.start-choice .tag {
  display: inline-block; margin-top: .5rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--red-600);
}

/* Import review */
.drop-zone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1rem;
  text-align: center;
  background: var(--surface-alt);
  cursor: pointer;
}
.drop-zone.dragging { border-color: var(--red-500); background: var(--red-050); }
.drop-zone .emoji { font-size: 1.8rem; display: block; margin-bottom: .35rem; }

.review-section { margin-bottom: 1rem; }
.review-section > h4 {
  margin: 0 0 .35rem;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--red-600);
}
.review-row {
  display: grid;
  grid-template-columns: auto 1fr 5.5rem;
  gap: .6rem;
  align-items: start;
  padding: .5rem;
  border-bottom: 1px solid var(--line);
  font-size: .89rem;
}
.review-row:last-child { border-bottom: 0; }
.review-row input[type="checkbox"] { width: auto; margin-top: .5rem; }
.review-row .rname { font-weight: 600; }
.review-row .rdesc { color: var(--muted); font-size: .84rem; }
.review-row .rprice { text-align: right; font-variant-numeric: tabular-nums; }
.review-row.off { opacity: .4; }

/* ==========================================================================
   CUSTOMER MENU
   Every colour and face below comes from --menu-* variables that theme.js
   derives from the restaurant's own printed menu. The values here are the
   house defaults, used when a restaurant has no design of its own.
   ========================================================================== */
:root {
  --menu-bg: #FFFFFF;
  --menu-ink: #1A1214;
  --menu-accent: #C1121F;
  --menu-muted: #7C6B6D;
  --menu-line: #EADFDF;
  --menu-tint: #FDF3F3;
  --menu-tint-strong: #F8E6E6;
  --menu-heading-font: var(--font);
  --menu-body-font: var(--font);
}

body[data-menu-layout] {
  background: var(--menu-bg);
  color: var(--menu-ink);
  font-family: var(--menu-body-font);
}

.menu-shell { max-width: 62rem; margin: 0 auto; padding: 0 1.15rem 4rem; }

/* ---------- hero ---------- */
.menu-hero {
  text-align: center;
  padding: 2.75rem 0 1.5rem;
}
.menu-logo {
  display: block;
  margin: 0 auto 1.1rem;
  max-height: 5.5rem;
  max-width: min(16rem, 70%);
  object-fit: contain;
}
.menu-hero h1 {
  margin: 0;
  font-family: var(--menu-heading-font);
  font-size: clamp(2rem, 6.5vw, 3rem);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.menu-tagline {
  margin: .55rem auto 0;
  max-width: 32rem;
  color: var(--menu-muted);
  font-size: .97rem;
}
.menu-hero .lang-switch { margin-top: 1.25rem; }
.menu-hero .live-note { margin: .85rem 0 0; color: var(--menu-muted); }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--menu-line);
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}
.lang-switch button {
  border: 0; border-radius: 0; background: transparent;
  padding: .42rem 1.15rem; font-size: .88rem; font-weight: 600;
  color: var(--menu-muted); font-family: var(--menu-body-font);
}
.lang-switch button[aria-pressed="true"] { background: var(--menu-accent); color: var(--menu-bg); }

/* ---------- jump links ---------- */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .7rem 0;
  margin-bottom: .75rem;
  background: var(--menu-bg);
  border-bottom: 1px solid var(--menu-line);
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: 0 0 auto;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--menu-line);
  color: var(--menu-muted);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.section-nav a:hover { color: var(--menu-accent); border-color: var(--menu-accent); }
.section-nav a[aria-current="true"] {
  background: var(--menu-accent);
  border-color: var(--menu-accent);
  color: var(--menu-bg);
}

/* ---------- sections ---------- */
.category { margin-top: 2.5rem; scroll-margin-top: 4.5rem; }
.category-head { margin-bottom: 1rem; }
.category h2 {
  margin: 0;
  font-family: var(--menu-heading-font);
  font-size: 1.35rem;
  letter-spacing: .01em;
  color: var(--menu-accent);
}
.category-note {
  margin: .35rem 0 0;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--menu-muted);
}

/* ---------- items ---------- */
.item-grid { display: grid; gap: .1rem; }
body[data-menu-layout="columns"] .item-grid {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  column-gap: 2.5rem;
}
body[data-menu-layout="cards"] .item-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
}

.item {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: .8rem .6rem;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  transition: background .15s, transform .06s;
}
.item:hover { background: var(--menu-tint); }
.item:active { transform: scale(.995); }
.item:focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; }

body[data-menu-layout="cards"] .item {
  border: 1px solid var(--menu-line);
  background: var(--menu-tint);
  padding: 1rem;
}
body[data-menu-layout="cards"] .item:hover {
  background: var(--menu-tint-strong);
  border-color: var(--menu-accent);
}

.item-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--menu-heading-font);
  font-weight: 600;
  font-size: 1.02rem;
}
/* Leader dots — the detail that makes a list read as a menu. */
.item-lead {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--menu-line);
  transform: translateY(-.22em);
  min-width: 1rem;
}
.item-price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--menu-accent); }
.item-price:empty { display: none; }
.item-desc {
  margin-top: .22rem;
  color: var(--menu-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.item-tags { margin-top: .4rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.item-tag {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .42rem; border-radius: 999px;
  background: var(--menu-tint-strong); color: var(--menu-accent);
}

.empty-menu { text-align: center; padding: 3rem 1rem; color: var(--menu-muted); }

.menu-foot { text-align: center; margin-top: 3.5rem; opacity: .5; font-size: .8rem; }

/* ---------- style variants: rhythm and weight, not just colour ---------- */
body[data-menu-style="classic"] .category h2 {
  text-align: center;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 1rem;
}
/* Hairlines flanking the section name — the oldest trick in menu setting.
   Only when no blueprint header treatment is in charge: an imported menu's
   own header design always outranks the style variant's decoration. */
body[data-menu-style="classic"]:not([data-bp-header]) .category h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
body[data-menu-style="classic"]:not([data-bp-header]) .category h2::before,
body[data-menu-style="classic"]:not([data-bp-header]) .category h2::after {
  content: "";
  height: 1px;
  background: var(--menu-line);
  flex: 1 1 1.5rem;
  max-width: 5.5rem;
}
body[data-menu-style="classic"] .category-note { text-align: center; font-style: italic; }
body[data-menu-style="classic"] .menu-hero { border-bottom: 3px double var(--menu-accent); }

body[data-menu-style="modern"] .category h2 { font-weight: 700; letter-spacing: -.01em; }
body[data-menu-style="modern"] .category-head { border-bottom: 2px solid var(--menu-accent); padding-bottom: .5rem; }
body[data-menu-style="modern"] .item-lead { display: none; }
body[data-menu-style="modern"] .item-head { justify-content: space-between; }

body[data-menu-style="rustic"] .category h2 { text-transform: uppercase; letter-spacing: .18em; font-size: 1rem; font-weight: 800; }
body[data-menu-style="rustic"] .category-head { border-bottom: 2px dashed var(--menu-line); padding-bottom: .5rem; }

body[data-menu-style="elegant"] .category { margin-top: 3.5rem; }
body[data-menu-style="elegant"] .category h2 { text-align: center; letter-spacing: .3em; text-transform: uppercase; font-size: .85rem; font-weight: 400; }
/* A short accent rule under the section name, as on a patisserie card —
   unless the imported menu's own header treatment is in charge. */
body[data-menu-style="elegant"]:not([data-bp-header]) .category h2::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1px;
  background: var(--menu-accent);
  margin: .55rem auto 0;
}
body[data-menu-style="elegant"] .category-note { text-align: center; }
body[data-menu-style="elegant"] .item { text-align: center; }
body[data-menu-style="elegant"] .item-head { justify-content: center; }
body[data-menu-style="elegant"] .item-lead { display: none; }
body[data-menu-style="elegant"] .item-tags,
body[data-menu-style="classic"] .item-tags { justify-content: center; }
body[data-menu-style="elegant"] .menu-hero { border-bottom: 1px solid var(--menu-line); }

body[data-menu-style="bold"] .category h2 {
  display: inline-block;
  background: var(--menu-accent);
  color: var(--menu-bg);
  padding: .3rem .8rem;
  border-radius: 4px;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
body[data-menu-style="bold"] .item-head { font-size: 1.08rem; font-weight: 700; }
body[data-menu-style="bold"] .item-lead { display: none; }
body[data-menu-style="bold"] .item-head { justify-content: space-between; }

@media (max-width: 640px) {
  body[data-menu-layout="columns"] .item-grid { grid-template-columns: 1fr; }
  .menu-hero { padding-top: 1.75rem; }
}

/* Settings: logo picker */
.logo-field { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.logo-field input[type="file"] { flex: 1 1 14rem; width: auto; }
.logo-preview {
  height: 3rem; max-width: 9rem; object-fit: contain;
  border: 1px solid var(--line); border-radius: 8px; padding: .3rem; background: #fff;
}

/* Editor: how many taps a dish has had */
.click-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
.click-badge b { color: var(--red-600); font-size: .78rem; }

/* ==========================================================================
   Setup screen
   ========================================================================== */
.hero-inner--wide { max-width: 34rem; }

.setup-steps {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: .92rem;
  line-height: 1.75;
  text-align: left;
}
.setup-steps li { margin-bottom: .5rem; }
.setup-steps button { vertical-align: middle; }

.setup-detail {
  padding: .6rem .75rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
}
.setup-detail code { word-break: break-all; }

/* ==========================================================================
   Signed-in chrome shared by dashboard and editor
   ========================================================================== */
a.wordmark { text-decoration: none; display: inline-flex; align-items: center; }
a.wordmark:hover { opacity: .85; }

.role-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .45rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, var(--red-500), var(--red-700));
  border-radius: 999px;
  vertical-align: middle;
}

/* ==========================================================================
   Admin dashboard
   ========================================================================== */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.stat {
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat:nth-child(2) { border-top-color: var(--amber-500); }
.stat:nth-child(3) { border-top-color: var(--red-700); }
.stat:nth-child(4) { border-top-color: var(--amber-400); }
.stat .value {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.stat .label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .15rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.data-table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.data-table th {
  text-align: left;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .7rem .85rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table td {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--red-050); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .name { font-weight: 700; }
.data-table .sub { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }
.data-table .actions { text-align: right; white-space: nowrap; }
.data-table td.empty { text-align: center; padding: 2rem; color: var(--muted); }
.data-table .row-link { color: inherit; text-decoration: none; }
.data-table .row-link:hover { color: var(--red-600); text-decoration: underline; }

.admin-context {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  border: 1px solid var(--red-500);
  background: var(--red-050);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--red-700);
}

/* The "updates automatically" indicator on the customer menu. */
.live-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--ok);
  margin-right: .4rem;
  vertical-align: middle;
}

/* Editor: the section note sits between the heading and the items. */
.section-note-row {
  padding: .5rem .75rem .6rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
}
.section-note-row input { font-size: .87rem; font-style: italic; }

/* The menu's printed colour, used deliberately in one place instead of behind
   the whole screen. A vivid yellow menu gets a vivid yellow header; the body
   underneath stays readable paper. */
body[data-menu-band="on"] .menu-hero {
  background: var(--menu-band);
  color: var(--menu-band-ink);
  margin: 0 -1.15rem 0;
  padding: 2.75rem 1.15rem 2rem;
  border-radius: 0 0 20px 20px;
}
body[data-menu-band="on"] .menu-hero .menu-tagline,
body[data-menu-band="on"] .menu-hero .live-note { color: inherit; opacity: .75; }
body[data-menu-band="on"] .menu-hero .lang-switch { border-color: currentColor; }
body[data-menu-band="on"] .menu-hero .lang-switch button { color: inherit; opacity: .7; }
body[data-menu-band="on"] .menu-hero .lang-switch button[aria-pressed="true"] {
  background: var(--menu-band-ink);
  color: var(--menu-band);
  opacity: 1;
}
body[data-menu-band="on"] .menu-hero { border-bottom: 0 !important; }

/* Contact details under the menu. */
.menu-contact {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--menu-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  font-size: .88rem;
  color: var(--menu-muted);
  text-align: center;
}
.menu-contact a { color: var(--menu-accent); text-decoration: none; }
.menu-contact a:hover { text-decoration: underline; }
.menu-contact .contact-item { display: inline-flex; align-items: center; gap: .35rem; }
.menu-contact .contact-hours { flex-basis: 100%; text-align: center; }

/* ==========================================================================
   Analytics panel
   ========================================================================== */
.analytics {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem;
  margin-bottom: 1.25rem;
}
.analytics h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.analytics .sub { margin: 0 0 1rem; font-size: .85rem; color: var(--muted); }

.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.metric {
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.metric .value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.metric .label {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: .1rem;
}
.metric .delta { font-size: .75rem; font-weight: 700; margin-top: .25rem; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
.delta.flat { color: var(--muted); }

/* 30-day bars. Deliberately simple — no chart library for eight pixels. */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3.5rem;
  padding: .5rem .1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .35rem;
}
.spark-bar {
  flex: 1 1 0;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--red-500);
  opacity: .85;
}
.spark-bar.empty { background: var(--line); }
.spark-axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); }

.top-items { margin-top: 1.1rem; }
.top-items h4 {
  margin: 0 0 .5rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.top-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.top-item:last-child { border-bottom: 0; }
.top-item .rank {
  width: 1.4rem; height: 1.4rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--red-050); color: var(--red-600);
  font-size: .72rem; font-weight: 800;
}
.top-item .bar { flex: 1 1 auto; height: .4rem; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.top-item .bar span { display: block; height: 100%; background: var(--red-500); }
.top-item .count { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82rem; white-space: nowrap; }

/* ==========================================================================
   Scene — the moving atmosphere behind a themed menu.
   Reuses the .blob / .food machinery from the sign-in backdrop, so there is
   one set of keyframes doing this work rather than two.
   ========================================================================== */
.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--menu-bg);
}
/* On light paper the blobs have to DARKEN to be seen at all — screen-blending
   them just washes them out to nothing. On dark paper the opposite is true. */
.scene .blob { opacity: .30; filter: blur(85px); mix-blend-mode: multiply; }
.scene[data-mood="dark"] .blob { opacity: .55; mix-blend-mode: screen; }
.scene-blob-1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -16vmax;
                animation: drift-a 34s ease-in-out infinite; }
.scene-blob-2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 24vmax;
                animation: drift-b 41s ease-in-out infinite; }
.scene-blob-3 { width: 38vmax; height: 38vmax; left: 22vmax; bottom: -18vmax;
                animation: drift-c 37s ease-in-out infinite; }

/* With a scene running, every item becomes a solid card. Nothing readable is
   ever laid directly over moving artwork. */
body[data-scene] .item {
  background: var(--menu-card);
  border: 1px solid var(--menu-line);
  padding: .95rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
body[data-scene] .item:hover {
  background: var(--menu-tint);
  border-color: var(--menu-accent);
}
body[data-scene] .item-grid { gap: .7rem; }

/* A theme supplies colour and atmosphere. It must NOT decide the shape of the
   menu — that comes from the restaurant's own PDF. These fall back only when
   no blueprint was read. */
body[data-scene]:not([data-bp-leaders]) .item-lead { display: none; }
body[data-scene]:not([data-bp-price]) .item-head { justify-content: space-between; }

/* Section headings and the jump bar need their own ground too — unless the
   blueprint says the printed menu banners or boxes them, in which case that
   treatment is the thing worth preserving. */
body[data-scene]:not([data-bp-header]) .category-head,
body[data-scene][data-bp-header="plain"] .category-head {
  background: var(--menu-card);
  border: 1px solid var(--menu-line);
  border-radius: 10px;
  padding: .7rem .9rem;
}
body[data-scene] .section-nav {
  background: var(--menu-card);
  border: 1px solid var(--menu-line);
  border-radius: 999px;
  padding: .5rem .6rem;
  margin-bottom: 1rem;
  top: .5rem;
}
body[data-scene] .menu-contact {
  background: var(--menu-card);
  border: 1px solid var(--menu-line);
  border-radius: 12px;
  padding: 1.1rem;
  margin-top: 2.5rem;
}
body[data-scene] .menu-hero {
  background: transparent !important;
  border: 0 !important;
}

/* ---- scene picker, shown during import and in Settings ---- */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .6rem;
  margin: .5rem 0 0;
}
.scene-card {
  /* The global button rule sets inline-flex, which would lay the swatches,
     motifs and label out in a row. These stack. */
  display: block;
  text-align: left;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
}
.scene-card:hover { border-color: var(--muted); }
.scene-card[aria-pressed="true"] {
  border-color: var(--red-600);
  box-shadow: 0 0 0 2px rgba(193, 18, 31, .18);
}
/* A miniature of the design itself: its paper, its heading face, its accent. */
.scene-card .type-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .55rem .4rem;
  margin-bottom: .45rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 2.4rem;
}
.scene-card .type-tile span { font-size: 1.15rem; font-weight: 600; line-height: 1; }
.scene-card .type-tile i {
  width: 1.6rem;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.scene-card .swatches { display: flex; gap: .2rem; margin-bottom: .4rem; }
.scene-card .swatches i {
  width: 1.1rem; height: 1.1rem; border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .12);
}
.scene-card strong { display: block; font-size: .9rem; }
.scene-card span { display: block; font-size: .76rem; color: var(--muted); line-height: 1.4; }

/* Filter above the theme grid — 27 options is too many to scan. */
.scene-filter { margin-bottom: .7rem; }
.scene-grid { max-height: 26rem; overflow-y: auto; padding-right: .2rem; }

/* ==========================================================================
   BLUEPRINT — rebuilding the shape of a restaurant's printed menu.
   Applied only when they chose "Copy my menu"; a picked theme overrides it.
   ========================================================================== */

/* ---- columns ---- */
body[data-bp-columns="1"] .item-grid { grid-template-columns: 1fr; }
body[data-bp-columns="2"] .item-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); column-gap: 2.75rem; }
body[data-bp-columns="3"] .item-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: 2rem; }

/* ---- section headings ---- */
body[data-bp-header] .category h2 { display: block; background: none; color: var(--menu-accent); padding: 0; border: 0; border-radius: 0; }
body[data-bp-header] .category-head { background: none; border: 0; padding: 0; }

body[data-bp-header="banner"] .category h2 {
  display: block;
  background: var(--menu-accent);
  color: var(--menu-bg);
  padding: .4rem .85rem;
  border-radius: 3px;
}
body[data-bp-header="boxed"] .category h2 {
  display: inline-block;
  border: 2px solid var(--menu-accent);
  padding: .35rem .85rem;
  border-radius: 2px;
}
body[data-bp-header="underline"] .category h2 { border-bottom: 2px solid var(--menu-accent); padding-bottom: .3rem; }
body[data-bp-header="rule_above"] .category h2 { border-top: 2px solid var(--menu-accent); padding-top: .45rem; }
body[data-bp-header="plain"] .category h2 { border: 0; }

/* These have to name .category h2 explicitly: the style variants
   (classic, elegant) centre it, and matching their specificity is the only
   way a blueprint's alignment wins. */
body[data-bp-header-align="center"] .category-head,
body[data-bp-header-align="center"] .category h2,
body[data-bp-header-align="center"] .category-note { text-align: center; }
body[data-bp-header-align="left"] .category-head,
body[data-bp-header-align="left"] .category h2,
body[data-bp-header-align="left"] .category-note { text-align: left; }

/* Same reason: a blueprint decides whether items are centred, not the style. */
body[data-bp-columns] .item { text-align: left; }
body[data-bp-header-align="center"][data-bp-columns="1"] .item-desc { text-align: left; }

body[data-bp-header-case="upper"] .category h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; }
body[data-bp-header-case="title"] .category h2 { text-transform: capitalize; }
body[data-bp-header-case="as_printed"] .category h2 { text-transform: none; }

/* ---- prices ---- */
body[data-bp-price="inline_right"] .item-head { display: flex; justify-content: space-between; align-items: baseline; }
body[data-bp-price="after_name"] .item-head { display: flex; justify-content: flex-start; gap: .6rem; }
body[data-bp-price="after_name"] .item-lead { display: none; }
body[data-bp-price="below"] .item-head { display: block; }
body[data-bp-price="below"] .item-lead { display: none; }
body[data-bp-price="below"] .item-price { display: block; margin-top: .2rem; }

/* A true right-hand price column: names and prices line up down the page. */
body[data-bp-price="right_column"] .item-head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.25rem;
  align-items: baseline;
}
body[data-bp-price="right_column"] .item-lead { display: none; }
body[data-bp-price="right_column"] .item-price { min-width: 4.5rem; text-align: right; }

/* ---- leaders ---- */
body[data-bp-leaders="none"] .item-lead { display: none; }
body[data-bp-leaders="dotted"] .item-lead { display: block; border-bottom: 1px dotted var(--menu-line); }
body[data-bp-leaders="solid"] .item-lead { display: block; border-bottom: 1px solid var(--menu-line); }

/* ---- dividers ---- */
body[data-bp-divider="line"] .item-grid > .item + .item,
body[data-bp-divider="line"] .item-grid > .item:not(:last-child) { border-bottom: 1px solid var(--menu-line); border-radius: 0; }
body[data-bp-divider="none"] .item { border: 0; }
body[data-bp-divider="space"] .item { border: 0; }

/* ---- density ---- */
body[data-bp-density="tight"] .item { padding: .45rem .5rem; }
body[data-bp-density="tight"] .category { margin-top: 1.5rem; }
body[data-bp-density="tight"] .item-desc { margin-top: .1rem; font-size: .86rem; }
body[data-bp-density="airy"] .item { padding: 1.15rem .6rem; }
body[data-bp-density="airy"] .category { margin-top: 3.5rem; }

/* ---- page frame ---- */
body[data-bp-frame="border"] .menu-shell,
body[data-bp-frame="double"] .menu-shell,
body[data-bp-frame="ornament"] .menu-shell {
  border: 1px solid var(--menu-accent);
  padding: 1.5rem 1.5rem 3rem;
  margin-top: 1.25rem;
  margin-bottom: 2rem;
}
body[data-bp-frame="double"] .menu-shell { border-width: 4px; border-style: double; }
body[data-bp-frame="ornament"] .menu-shell { border-width: 2px; border-radius: 14px; box-shadow: inset 0 0 0 4px var(--menu-bg), inset 0 0 0 5px var(--menu-line); }

/* ---- dish names and descriptions ---- */
body[data-bp-name-case="upper"] .item-name { text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }
body[data-bp-name-case="title"] .item-name { text-transform: capitalize; }
body[data-bp-desc="italic"] .item-desc { font-style: italic; }
body[data-bp-desc="small"] .item-desc { font-size: .82rem; }

/* The logo we cut out of their uploaded menu, shown before anything is saved. */
.logo-found { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.logo-found .logo-preview { height: 3.2rem; max-width: 11rem; }
.logo-found > div { flex: 1 1 12rem; }

/* ==========================================================================
   BLUEPRINT — colour roles and type scale taken off the printed menu.
   These sit after the structural rules above so they win, and each falls back
   to the theme's own value when the menu didn't give us one.
   ========================================================================== */
body[data-bp-columns] .category h2 {
  color: var(--bp-heading, var(--menu-accent));
  font-size: var(--bp-heading-size, 1.05rem);
  font-weight: var(--bp-heading-weight, 700);
  letter-spacing: var(--bp-heading-tracking, .1em);
}

/* A section heading only gets a filled bar if the printed menu has one. */
body[data-bp-heading-bg="on"][data-bp-header="banner"] .category h2 {
  background: var(--bp-heading-bg);
  color: var(--menu-bg);
  border-radius: var(--bp-radius, 3px);
}
body[data-bp-heading-bg="on"][data-bp-header="boxed"] .category h2 {
  border-color: var(--bp-heading-bg);
  border-radius: var(--bp-radius, 2px);
}
body[data-bp-heading-bg="off"][data-bp-header="banner"] .category h2 {
  background: var(--menu-accent);
  color: var(--menu-bg);
}

body[data-bp-columns] .item-name {
  font-size: var(--bp-name-size, 1.02rem);
  font-weight: var(--bp-name-weight, 600);
}
body[data-bp-columns] .item-price {
  color: var(--bp-price, var(--menu-accent));
  font-weight: var(--bp-price-weight, 600);
}
body[data-bp-columns] .item-desc { font-size: var(--bp-desc-size, .9rem); }

/* Corner treatment carries across every boxed thing on the page. */
body[data-bp-corner="square"] .item,
body[data-bp-corner="square"] .category-head,
body[data-bp-corner="square"] .menu-contact { border-radius: 0; }
body[data-bp-corner="rounded"] .item,
body[data-bp-corner="rounded"] .category-head { border-radius: var(--bp-radius, 8px); }

/* A rule between sections, if the printed menu separates them that way. */
body[data-bp-section-divider="rule"] .category + .category {
  border-top: 1px solid var(--menu-line);
  padding-top: 1.75rem;
}

/* ==========================================================================
   Masthead — the restaurant's own header artwork, lifted off their PDF.
   Full-bleed so it reads as the page's header rather than an image dropped
   onto it, and given its aspect ratio up front so nothing jumps on load.
   ========================================================================== */
.menu-masthead {
  display: block;
  width: calc(100% + 2.3rem);
  margin: -2.75rem -1.15rem 1.25rem;
  max-width: none;
  max-height: 34vh;
  object-fit: contain;
  object-position: center;
}
body[data-masthead="on"] .menu-hero { padding-top: 0; }
body[data-masthead="on"] .menu-hero h1[hidden] { display: none; }
/* With their own artwork at the top, our theme band would fight it. */
body[data-masthead="on"][data-menu-band="on"] .menu-hero {
  background: transparent;
  border-radius: 0;
  padding-bottom: 1.25rem;
}

.masthead-preview {
  max-height: 4.5rem;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .25rem;
  background: #fff;
}
.logo-found .masthead-preview { flex: 1 1 14rem; }

/* ==========================================================================
   Owner dashboard shell — tabs, overview, QR studio (editor.html)
   ========================================================================== */
/* On the dashboard the tab bar is the thing worth pinning; two bars fighting
   over top:0 just cover each other. */
body:has(.dash-tabs) .topbar { position: static; }

/* Narrow screens: a horizontal tab strip under the topbar. Wide screens: a
   fixed left rail, the shape of a real product. */
.dash-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: .25rem;
  padding: .4rem 1.25rem 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.dash-tabs button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  background: none;
  border-radius: 0;
  padding: .6rem .85rem .7rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.dash-tabs button svg { width: 1rem; height: 1rem; flex: none; }
.dash-tabs button:hover { color: var(--ink); background: var(--surface-alt); }
.dash-tabs button[aria-current="true"] {
  color: var(--red-700);
  border-bottom-color: var(--red-600);
}

@media (min-width: 1024px) {
  .dash-body { display: flex; align-items: flex-start; }
  .dash-tabs {
    position: sticky;
    top: 0;
    flex: 0 0 13.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    /* Content height only — a 100dvh rail forced a dead scroll on every
       page. It stays pinned while the content column scrolls. */
    max-height: 100dvh;
    overflow-y: auto;
    padding: 1rem .75rem;
    border-bottom: 0;
    overflow-x: visible;
  }
  .dash-tabs button {
    justify-content: flex-start;
    border-bottom: 0;
    margin-bottom: 0;
    border-radius: 8px;
    padding: .55rem .75rem;
  }
  .dash-tabs button[aria-current="true"] {
    background: var(--red-050);
    color: var(--red-700);
  }
  .dash-body > .wrap { flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--line); }
}

.panel-head { margin: .5rem 0 1.5rem; }
.panel-head h1 {
  margin: 0 0 .2rem;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.panel-head p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 44rem; }

/* Firstrun: the guided welcome owns the room — but only while it is actually
   showing. Any other panel keeps the tab bar, so nobody gets stranded. */
body[data-firstrun][data-tab="menu"] .dash-tabs { display: none; }

.dash-panel { animation: panel-in .25s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .dash-panel { animation: none; } }

/* -------------------------------------------------------------- overview -- */
.overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: .5rem 0 1.25rem;
}
.overview-hello { margin: 0 0 .15rem; color: var(--muted); font-size: .95rem; }
.overview-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; }

.status-pill {
  flex: none;
  margin-top: .4rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.status-pill.is-live { background: #EDF7F1; color: var(--ok); border: 1px solid #BFE3CE; }
.status-pill.is-off  { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--line); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .85rem;
  margin: 1.25rem 0 1.75rem;
}
.stat-card {
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.stat-label { font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.stat-hint  { font-size: .75rem; color: var(--red-600); font-weight: 600; margin-top: .35rem; }

.overview-section-title { margin: 0 0 .75rem; font-size: 1.05rem; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .85rem;
}
.action-card {
  padding: 1.05rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--muted); }
.action-card h4 { margin: 0 0 .25rem; font-size: .98rem; }
.action-card p { margin: 0 0 .6rem; font-size: .84rem; color: var(--muted); }
.action-cta { font-size: .84rem; font-weight: 700; color: var(--red-600); }
.action-card--primary { border-color: var(--red-600); box-shadow: 0 0 0 1px var(--red-600), var(--shadow-sm); }

/* ------------------------------------------------------------- QR studio -- */
.qr-sub { margin: .3rem 0 0; color: var(--muted); max-width: 40rem; }

.qr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 760px) { .qr-grid { grid-template-columns: 1fr; } }

.qr-card {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.qr-canvas {
  width: min(100%, 20rem);
  height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.qr-url {
  margin: .9rem 0 0;
  font-size: .82rem;
  color: var(--ink-soft);
  word-break: break-all;
}
.qr-localhost { margin-top: .9rem; text-align: left; }

.qr-side h4 { margin: 0 0 .5rem; font-size: .95rem; }
.qr-side h4 + .qr-styles { margin-bottom: 1.25rem; }
.qr-styles { display: flex; gap: .5rem; }
.qr-style {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
}
.qr-style[aria-pressed="true"] {
  border-color: var(--red-600);
  box-shadow: 0 0 0 1px var(--red-600);
}
.qr-swatch {
  width: 1rem; height: 1rem;
  border-radius: 4px;
  border: 2px solid;
  display: inline-block;
}
.qr-side .block + .block { margin-top: .5rem; }
.qr-how {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  font-size: .84rem;
  color: var(--muted);
}
.qr-how li { margin: .3rem 0; }

/* -------------------------------------------------- print: table cards --- */
.qr-print-sheet { display: none; }

/* Only when the QR flow started the print — a plain Cmd+P still prints the
   page, not a blank sheet. */
@media print {
  body.printing-qr > *:not(.qr-print-sheet) { display: none !important; }
  body.printing-qr .qr-print-sheet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25in;
    padding: .3in;
  }
  /* Three rows must fit inside a letter page's ~10in printable area:
     3 × ~2.9in cards + 2 × .25in gaps + .6in padding ≈ 9.8in. */
  .qr-tent {
    border: 1px dashed #bbb;
    border-radius: 10px;
    padding: .2in;
    text-align: center;
    break-inside: avoid;
  }
  .qr-tent-canvas { width: 2in; height: 2in; }
  .qr-tent-scan {
    margin: 0 0 .1in;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: .18em;
  }
  .qr-tent-name { margin: .1in 0 0; font-size: 11pt; font-weight: 700; }
}

/* -------------------------------------------------- getting-started path -- */
.setup-path {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.setup-path-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.setup-path-head h3 { margin: 0; font-size: 1rem; }
.setup-path-count { font-size: .8rem; font-weight: 700; color: var(--muted); }
.setup-path-bar {
  height: 5px;
  margin: .7rem 0 1rem;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.setup-path-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red-600), var(--amber-500));
  border-radius: 999px;
  transition: width .4s ease;
}
.setup-path-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .6rem;
}
.setup-path-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .5rem;
  align-items: center;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.setup-path-steps li.done { background: #F2FAF5; border-color: #C4E5D1; }
.setup-path-dot {
  grid-row: span 2;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  background: transparent;
}
.setup-path-steps li.done .setup-path-dot { background: var(--ok); border-color: var(--ok); }
.setup-path-steps b { font-size: .8rem; line-height: 1.25; }
.setup-path-steps small { font-size: .7rem; color: var(--muted); line-height: 1.3; }

/* Inline product glyphs — the professional stand-in for emoji. */
.glyph { display: inline-flex; color: var(--red-600); }
.glyph svg { width: 1.9rem; height: 1.9rem; }
.start-choice .glyph { margin-bottom: .45rem; }
.glyph--drop { display: block; margin: 0 auto .5rem; }
.glyph--drop svg { width: 2.3rem; height: 2.3rem; }

/* ------------------------------------------------ admin console toolbar -- */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 .75rem;
}
.filter-chips { display: flex; gap: .35rem; }
.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
}
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--red-050);
  border-color: var(--red-600);
  color: var(--red-700);
}

.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { color: var(--ink); }
.data-table th.sortable::after { content: "↕"; opacity: .3; margin-left: .3rem; font-size: .7rem; }
.data-table th.sortable[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.data-table th.sortable[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.data-table td.sub-date { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--surface-alt); }

/* ================================================== bilingual ordering ====
   Spanish tab: each dish carries its English ordering name, and a tap opens
   a card the diner shows to an English-speaking server. Everything is drawn
   in the menu's own theme variables so it belongs to their design. */
.item-alt {
  margin-top: .1rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--menu-muted);
  letter-spacing: .01em;
}
body[data-menu-style="elegant"] .item-alt { text-align: center; }

.order-hint {
  margin: .6rem auto 0;
  font-size: .8rem;
  color: var(--menu-muted);
}

body.order-open { overflow: hidden; }

.order-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(12, 8, 8, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: order-fade .18s ease;
}
@keyframes order-fade { from { opacity: 0; } }

.order-card {
  width: min(100%, 26rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  margin: 0 .75rem calc(1rem + env(safe-area-inset-bottom));
  padding: 1.25rem 1.4rem 1.15rem;
  background: var(--menu-bg);
  color: var(--menu-ink);
  border: 1px solid var(--menu-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 5, 5, .45);
  text-align: center;
  font-family: var(--menu-body-font);
  animation: order-rise .22s ease;
}
@keyframes order-rise { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .order-backdrop, .order-card { animation: none; }
}

.order-hint-line {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--menu-muted);
}

/* The part the server reads — their language, set large. */
.order-speech {
  padding: 1rem .75rem 1.1rem;
  border-radius: 12px;
  background: var(--menu-tint);
  border: 1px solid var(--menu-line);
}
.order-lead { margin: 0 0 .3rem; font-size: .9rem; color: var(--menu-muted); }
.order-dish {
  margin: 0;
  font-family: var(--menu-heading-font);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.order-price {
  margin: .35rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--menu-accent);
  font-variant-numeric: tabular-nums;
}

.order-es-name {
  margin: .7rem 0 0;
  font-size: .85rem;
  font-style: italic;
  color: var(--menu-muted);
}

.order-close {
  margin-top: 1rem;
  width: 100%;
  padding: .7rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--menu-accent);
  /* Paper-coloured text, like every other on-accent control here: dark
     themes pair dark paper with a light accent, where white would vanish. */
  color: var(--menu-bg);
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Menu shapes — the page's architecture. Where themes choose the paint,
   the shape decides what kind of printed object this menu is. Each block
   below is one print archetype. They compose with the blueprint attributes
   (data-bp-*) and the style variants; being last in the file, a shape wins
   ties on its own turf.
   ========================================================================== */

/* ---- carte: pure typography, centered, airy. Bistro and fine dining. ---- */
body[data-menu-style][data-menu-shape="carte"] .item-grid { grid-template-columns: 1fr; gap: 0; }
body[data-menu-style][data-menu-shape="carte"] .category { margin-top: 3.25rem; }
body[data-menu-style][data-menu-shape="carte"] .category-head { border: 0; text-align: center; }
body[data-menu-style][data-menu-shape="carte"] .category h2 {
  background: none;
  color: var(--menu-accent);
  padding: 0;
  border: 0;
  display: block;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
body[data-menu-style][data-menu-shape="carte"] .category h2::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1px;
  background: var(--menu-accent);
  margin: .6rem auto 0;
}
body[data-menu-style][data-menu-shape="carte"] .category h2::before { content: none; }
body[data-menu-style][data-menu-shape="carte"] .category-note { text-align: center; font-style: italic; }
body[data-menu-style][data-menu-shape="carte"] .item,
body[data-menu-style][data-menu-shape="carte"] .item:hover {
  background: none;
  border: 0;
  padding: .85rem .5rem;
  text-align: center;
}
body[data-menu-style][data-menu-shape="carte"] .item-head {
  display: flex;
  justify-content: center;
  gap: .55rem;
  font-size: 1.05rem;
}
body[data-menu-style][data-menu-shape="carte"] .item-lead { display: none; }
body[data-menu-style][data-menu-shape="carte"] .item-desc {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}
body[data-menu-style][data-menu-shape="carte"] .item-alt { text-align: center; }
body[data-menu-style][data-menu-shape="carte"] .item-tags { justify-content: center; }

/* ---- framed: the whole page inside a double rule. Formal dining. -------- */
body[data-menu-style][data-menu-shape="framed"] .menu-shell {
  max-width: 56rem;
  margin: clamp(.75rem, 2.5vw, 2rem) auto;
  padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 4.5vw, 3rem) 3rem;
  border: 4px double var(--menu-line);
  outline: 1px solid var(--menu-line);
  outline-offset: 5px;
  background: var(--menu-bg);
}
body[data-menu-style][data-menu-shape="framed"] { padding: 0 .75rem; }
body[data-menu-style][data-menu-shape="framed"] .menu-hero { padding-top: 1.25rem; }
body[data-menu-style][data-menu-shape="framed"] .category { margin-top: 2.75rem; }
body[data-menu-style][data-menu-shape="framed"] .category-head { border: 0; }
body[data-menu-style][data-menu-shape="framed"] .category h2 {
  background: none;
  color: var(--menu-accent);
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 1rem;
}
body[data-menu-style][data-menu-shape="framed"] .category h2::before,
body[data-menu-style][data-menu-shape="framed"] .category h2::after {
  content: "";
  height: 1px;
  background: var(--menu-line);
  flex: 1 1 1rem;
  max-width: 4.5rem;
}
body[data-menu-style][data-menu-shape="framed"] .category-note { text-align: center; font-style: italic; }
body[data-menu-style][data-menu-shape="framed"] .item,
body[data-menu-style][data-menu-shape="framed"] .item:hover { background: none; }
body[data-menu-style][data-menu-shape="framed"]:not([data-bp-price="below"]):not([data-bp-price="after_name"]):not([data-bp-price="right_column"]):not([data-bp-leaders="none"]) .item-lead {
  border-bottom: 1px dotted var(--menu-line);
}

/* ---- panels: every section in its own box, title as a filled band. ------ */
body[data-menu-style][data-menu-shape="panels"] #menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: 1.1rem;
  align-items: start;
}
body[data-menu-style][data-menu-shape="panels"] #menu > .menu-contact,
body[data-menu-style][data-menu-shape="panels"] #menu > .empty-menu { grid-column: 1 / -1; }
body[data-menu-style][data-menu-shape="panels"] .category {
  margin: 0;
  border: 1px solid var(--menu-line);
  border-radius: var(--bp-radius, 10px);
  background: var(--menu-card);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 8, 8, .06);
}
body[data-menu-style][data-menu-shape="panels"] .category-head {
  margin: 0;
  padding: .6rem 1rem;
  background: var(--menu-accent);
  border: 0;
}
body[data-menu-style][data-menu-shape="panels"] .category h2 {
  background: none;
  padding: 0;
  border: 0;
  margin: 0;
  color: var(--menu-bg);
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body[data-menu-style][data-menu-shape="panels"] .category h2::before,
body[data-menu-style][data-menu-shape="panels"] .category h2::after { content: none; }
body[data-menu-style][data-menu-shape="panels"] .category-note {
  color: var(--menu-bg);
  opacity: .85;
  margin: .15rem 0 0;
}
body[data-menu-style][data-menu-shape="panels"] .item-grid {
  grid-template-columns: 1fr;
  gap: 0;
  padding: .45rem .55rem .65rem;
}
body[data-menu-style][data-menu-shape="panels"] .item-grid > .item {
  border-bottom: 0; /* the blueprint's own divider would double ours */
}
body[data-menu-style][data-menu-shape="panels"] .item + .item { border-top: 1px solid var(--menu-line); border-radius: 0; }

/* ---- board: dense counter board — bars, rules, big prices. -------------- */
body[data-menu-style][data-menu-shape="board"] .category { margin-top: 2rem; }
body[data-menu-style][data-menu-shape="board"] .category-head {
  margin-bottom: .35rem;
  padding: .45rem .8rem;
  background: var(--menu-accent);
  border: 0;
}
body[data-menu-style][data-menu-shape="board"] .category h2 {
  background: none;
  padding: 0;
  border: 0;
  margin: 0;
  color: var(--menu-bg);
  font-size: 1.02rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
}
body[data-menu-style][data-menu-shape="board"] .category h2::before,
body[data-menu-style][data-menu-shape="board"] .category h2::after { content: none; }
body[data-menu-style][data-menu-shape="board"] .category-note { color: var(--menu-bg); opacity: .85; margin: .1rem 0 0; }
body[data-menu-style][data-menu-shape="board"] .item-grid { gap: 0; }
body[data-menu-style][data-menu-shape="board"] .item,
body[data-menu-style][data-menu-shape="board"] .item:hover { background: none; border-radius: 0; padding: .55rem .8rem; }
body[data-menu-style][data-menu-shape="board"] .item-grid { grid-template-columns: 1fr; }
body[data-menu-style][data-menu-shape="board"] .item-grid > .item { border-bottom: 0; }
body[data-menu-style][data-menu-shape="board"] .item + .item { border-top: 1px solid var(--menu-line); }
body[data-menu-style][data-menu-shape="board"] .item-head { font-weight: 700; }
body[data-menu-style][data-menu-shape="board"] .item-price { font-size: 1.12rem; font-weight: 800; }
body[data-menu-style][data-menu-shape="board"] .item-desc { font-size: .84rem; margin-top: .1rem; }

/* ---- gallery: modern counter-service — cards, first dish featured. ------ */
body[data-menu-style][data-menu-shape="gallery"] .item-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: .8rem;
}
body[data-menu-style][data-menu-shape="gallery"] .item-grid > .item,
body[data-menu-style][data-menu-shape="gallery"] .item {
  border: 1px solid var(--menu-line);
  background: var(--menu-card);
  border-radius: 12px;
  padding: .9rem 1rem;
}
body[data-menu-style][data-menu-shape="gallery"] .item:hover {
  background: var(--menu-tint);
  border-color: var(--menu-accent);
}
body[data-menu-style][data-menu-shape="gallery"] .item:first-child {
  grid-column: 1 / -1;
  background: var(--menu-tint);
  padding: 1.15rem 1.25rem;
}
body[data-menu-style][data-menu-shape="gallery"] .item:first-child .item-head { font-size: 1.22rem; }
body[data-menu-style][data-menu-shape="gallery"] .item .item-lead { display: none; }
body[data-menu-style][data-menu-shape="gallery"] .item-head { justify-content: space-between; }

/* ------------------------------------------------------ shape picker ----- */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .5rem;
  margin-bottom: .75rem;
}
.shape-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .6rem .65rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.shape-card:hover { border-color: var(--muted); }
.shape-card[aria-pressed="true"] {
  border-color: var(--red-600);
  box-shadow: 0 0 0 1px var(--red-600);
  background: var(--red-050);
}
.shape-art { color: var(--ink-soft); width: 100%; }
.shape-card[aria-pressed="true"] .shape-art { color: var(--red-700); }
.shape-art svg { width: 100%; height: auto; display: block; }
.shape-card strong { font-size: .82rem; }
.shape-card span { font-size: .7rem; color: var(--muted); line-height: 1.3; }

/* ==========================================================================
   Mobile layer — the whole product, operable from a phone.
   The rules here only tighten and enlarge; nothing changes meaning.
   ========================================================================== */

/* Import: the photo buttons ARE the flow on a phone; secondary on desktop. */
.import-mobile-row {
  display: flex;
  gap: .5rem;
  margin-top: .65rem;
  flex-wrap: wrap;
}
.import-mobile-row button { flex: 1 1 12rem; padding: .7rem .9rem; }

@media (pointer: coarse), (max-width: 640px) {
  /* The drop target reads as noise when there is nothing to drag. */
  .drop-zone { display: none; }
  .import-mobile-row { margin-top: 0; }
  .import-mobile-row button { padding: .85rem 1rem; font-size: 1rem; }
}

/* Touch targets: fingers, not cursors. */
@media (pointer: coarse) {
  button, .btn { min-height: 2.6rem; }
  button.tiny, .btn.tiny { min-height: 2.1rem; }
  .dash-tabs button { min-height: 2.75rem; }
  .row-menu > button { min-width: 2.6rem; }
}

/* Modals become bottom sheets on phones — reachable with a thumb, and the
   keyboard doesn't shove a centered box off screen. */
@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal--wide {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 94dvh;
    padding: 1.15rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  /* Topbar: room for four controls without wrapping into a mess. */
  .topbar { padding: .6rem .75rem; gap: .5rem; }
  .topbar-actions { gap: .35rem; }
  .topbar-actions .btn, .topbar-actions button { padding: .45rem .65rem; font-size: .84rem; }

  .wrap, .wrap--wide { padding-left: .9rem; padding-right: .9rem; }

  /* Import review rows: price column narrows, nothing overflows. */
  .review-row { grid-template-columns: auto 1fr 3.6rem; font-size: .86rem; }

  /* Settings: single column, full-width save. */
  .row > * { flex-basis: 100%; }
  .shape-grid { grid-template-columns: repeat(2, 1fr); }

  /* Owner dashboard chrome. */
  .overview-head { margin-top: 0; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stat-value { font-size: 1.4rem; }
  .setup-path-steps { grid-template-columns: 1fr 1fr; }
  .action-grid { grid-template-columns: 1fr; }

  /* Admin console: the table scrolls in its card; chips wrap above it. */
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head input[type="search"] { max-width: none !important; }
}

/* Very small phones: the QR studio stacks and the code stays scannable. */
@media (max-width: 400px) {
  .qr-styles { flex-direction: column; }
  .setup-path-steps { grid-template-columns: 1fr; }
}

/* The tab strip scrolls, but the scrollbar itself is just noise. */
.dash-tabs { scrollbar-width: none; }
.dash-tabs::-webkit-scrollbar { display: none; }

/* The flip corner — Spanish tab only. A folded-page "EN" tab in the bottom
   right of every dish whose tap opens the English ordering card: the visual
   promise that this item turns over into English. Drawn from theme variables
   so it belongs to whatever design the menu wears. */
.item-flip { position: relative; }
/* Reserve the corner: the chip must never sit on top of a description's
   last line. Outranks every shape's own padding. */
body[data-menu-style][data-menu-shape] .item.item-flip { padding-bottom: 1.6rem; }
.item-flip::after {
  content: "EN";
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
  padding: .22rem .38rem .19rem;
  /* One sharp corner, three soft — reads as a lifted page corner. */
  border-radius: 9px 3px 2px 9px;
  background: var(--menu-tint-strong);
  color: var(--menu-accent);
  border: 1px solid var(--menu-accent);
  box-shadow: -1px -1px 3px rgba(15, 8, 8, .12);
  pointer-events: none;
}
.item-flip:hover::after {
  background: var(--menu-accent);
  color: var(--menu-bg);
}

/* Carte strips items of their boxes; give its corner chip a touch more
   breathing room so it doesn't crowd centered text. */
body[data-menu-style][data-menu-shape="carte"] .item-flip::after { right: 0; bottom: .45rem; }

/* ------------------------------------------------ insights: new panels --- */
.lang-split, .hours-chart {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.lang-split h4, .hours-chart h4 { margin: 0 0 .6rem; font-size: .92rem; }
.lang-split-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  overflow: hidden;
}
.lang-split-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red-600), var(--red-500));
  border-radius: 999px 0 0 999px;
}
.lang-split-legend {
  display: flex;
  justify-content: space-between;
  margin-top: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.spark--hours { margin-top: .25rem; }
.spark--hours .spark-bar { min-width: 2px; }