.menu-share-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 38% at 87% 0%, color-mix(in srgb, var(--secondary) 10%, transparent), transparent 72%),
    radial-gradient(ellipse 60% 42% at 4% 34%, color-mix(in srgb, var(--ink-green) 7%, transparent), transparent 74%),
    var(--bg-page);
}

html:not([data-lang]) .menu-share-page .i18n-zh { display: none; }
.menu-share-shell { width: min(100%, 1100px); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

.menu-share-header {
  min-height: 72px;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.menu-share-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-primary); font-size: 14px; font-weight: 650; }
.menu-share-back:hover { color: var(--secondary); opacity: 1; }
.menu-share-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-share-header__label { display: none; }

.menu-share-hero {
  position: relative;
  padding: 20px 0 12px;
}
.menu-share-hero__copy { position: relative; z-index: 1; max-width: 620px; }
.menu-share-hero h1 {
  max-width: 590px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 43px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1.12;
  text-wrap: balance;
}
.menu-share-hero__lede { max-width: 480px; margin-top: 20px; color: var(--text-secondary); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; }
.menu-share-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.menu-share-hero__count { margin: 0; color: var(--text-secondary); font-size: 15px; }
.menu-share-actions { margin-top: 22px; }
.menu-share-primary {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 9px 16px;
  border-radius: 17px;
  background: var(--primary);
  color: var(--bg-card);
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -.01em;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.menu-share-primary:hover { color: var(--bg-card); opacity: 1; transform: translateY(-2px); box-shadow: var(--shadow-float); }
.menu-share-primary:active { transform: translateY(0); }
.menu-share-primary__arrow { margin-left: 14px; font-size: 19px; font-weight: 400; }
.menu-share-primary__icon { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; }

/* Keep the App handoff visible and explicitly labeled while reading a menu. */
.menu-share-page--ready .menu-share-shell { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.menu-share-page--ready .menu-share-actions { margin: 0; }
.menu-share-page--ready .menu-share-primary {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: max(20px, calc(14px + env(safe-area-inset-bottom)));
  width: max-content;
  max-width: calc(100vw - 40px);
  min-height: 56px;
  padding: 10px 18px;
  display: flex;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary) 45%, var(--bg-card));
  color: var(--text-primary);
  box-shadow: var(--shadow-float), 0 0 0 6px color-mix(in srgb, var(--bg-card) 65%, transparent);
  transform: translateX(-50%);
}
.menu-share-page--ready .menu-share-primary:hover {
  color: var(--text-primary);
  opacity: 1;
  transform: translate(-50%, -3px);
}
.menu-share-page--ready .menu-share-primary:active { transform: translateX(-50%) scale(.95); }
.menu-share-page--ready .menu-share-primary__arrow { margin-left: 0; }

.menu-share-preview { padding: 24px 0 44px; }
.menu-share-secondary { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; transition: color .2s ease, transform .2s ease; }
.menu-share-secondary:hover { color: var(--secondary); transform: translateY(-1px); }
.menu-share-secondary svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-share-secondary__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.menu-share-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; }
.menu-share-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 19px;
  min-height: 164px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-color) 56%, transparent);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.menu-share-card--featured { grid-column: 1 / -1; grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); min-height: 230px; }
.menu-share-card__image { width: 100%; height: 128px; overflow: hidden; border-radius: 17px; background: var(--bg-components); }
.menu-share-card--featured .menu-share-card__image { height: 100%; min-height: 194px; }
.menu-share-card__image img { width: 100%; height: 100%; object-fit: cover; }
.menu-share-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 68% 25%, color-mix(in srgb, var(--secondary) 26%, transparent), transparent 55%), var(--bg-components); color: var(--secondary); }
.menu-share-card__placeholder span { font: 500 50px/1 var(--font-display); transform: rotate(-16deg); opacity: .68; }
.menu-share-card--featured .menu-share-card__placeholder span { font-size: 90px; }
.menu-share-card__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 3px 0; }
.menu-share-card__top { display: flex; align-items: center; gap: 9px; min-height: 20px; color: var(--text-tertiary); font-size: 10px; font-weight: 680; letter-spacing: .1em; text-transform: uppercase; }
.menu-share-card__category { overflow: hidden; max-width: 170px; white-space: nowrap; text-overflow: ellipsis; }
.menu-share-card__number { color: var(--secondary); }
.menu-share-card h3 { width: 100%; margin-top: 9px; overflow-wrap: anywhere; color: var(--text-primary); font: 650 clamp(17px, 2vw, 22px)/1.25 var(--font-body); letter-spacing: -.025em; }
.menu-share-card__translation { margin-top: 6px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.menu-share-card__description { grid-column: 1 / -1; width: 100%; margin: 0; padding-left: 11px; border-left: 2px solid var(--divider); color: var(--text-secondary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.menu-share-card__price { margin-top: auto; padding-top: 11px; color: var(--secondary); font-size: 13px; font-weight: 700; }
.menu-share-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 0 34px; border-top: 1px solid var(--divider); color: var(--text-tertiary); font-size: 12px; }
.menu-share-footer a { color: var(--text-secondary); }
.menu-share-toast { position: fixed; z-index: 100000; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 11px 18px; border-radius: 999px; background: var(--primary); color: var(--bg-card); box-shadow: var(--shadow-float); font-size: 13px; font-weight: 650; white-space: nowrap; }
.menu-share-toast[hidden] { display: none; }

.menu-share-primary:focus-visible, .menu-share-secondary:focus-visible, .menu-share-back:focus-visible, .menu-share-footer a:focus-visible { outline: 3px solid var(--secondary); outline-offset: 4px; }

@media (max-width: 720px) {
  .menu-share-hero h1 { max-width: 440px; font-size: clamp(28px, 7vw, 36px); }
  .menu-share-hero__lede { max-width: 360px; margin-top: 14px; font-size: 15px; }
  .menu-share-actions { margin-top: 23px; }
  .menu-share-preview { padding: 19px 0 35px; }
  .menu-share-cards { grid-template-columns: 1fr; gap: 11px; }
  .menu-share-card, .menu-share-card--featured { grid-column: auto; grid-template-columns: 103px minmax(0, 1fr); min-height: 137px; gap: 14px; padding: 13px; border-radius: 20px; }
  .menu-share-card__image, .menu-share-card--featured .menu-share-card__image { height: 109px; min-height: 109px; border-radius: 14px; }
  .menu-share-card--featured .menu-share-card__placeholder span { font-size: 50px; }
  .menu-share-card__copy { padding: 0; }
  .menu-share-card h3 { margin-top: 5px; font-size: 17px; }
  .menu-share-card__description { font-size: 12px; }
  .menu-share-card__price { padding-top: 5px; }
}

@media (max-width: 390px) {
  .menu-share-shell { padding: 0 16px; }
  .menu-share-primary { width: 100%; justify-content: space-between; }
  .menu-share-page--ready .menu-share-primary { gap: 10px; padding: 10px 14px; }
  .menu-share-page--ready .menu-share-primary__icon { width: 28px; height: 28px; }
  .menu-share-page--ready .menu-share-primary__arrow { display: none; }
  .menu-share-card, .menu-share-card--featured { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; }
  .menu-share-card__image, .menu-share-card--featured .menu-share-card__image { height: 101px; min-height: 101px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-share-primary, .menu-share-secondary { transition: none; }
}