:root {
  --order-shadow: 0 8px 24px rgba(89, 66, 43, .08);
}

.order-hero { min-height: 184px; }
.order-main { padding-bottom: 34px; }
.order-picker, .menu-result { padding: 30px 20px 40px; }
.order-section-label { align-items: flex-start; }
.order-section-label small { padding-top: 10px; color: var(--red); white-space: nowrap; }
.order-intro { margin: 15px 0 20px; color: #776d62; font-family: "Yu Mincho", "Songti SC", serif; font-size: 12px; line-height: 1.8; }
.selected-preview { margin-bottom: 25px; padding: 15px; background: rgba(223, 230, 215, .55); border: 1px solid #d1dac7; border-radius: 5px; }
.selected-preview__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.selected-preview__heading small { display: block; color: var(--green); font-family: Georgia, "Yu Mincho", serif; font-size: 8px; letter-spacing: 1.2px; }
.selected-preview__heading h3 { margin: 1px 0 0; color: var(--wood); font-family: "Yu Mincho", "Songti SC", serif; font-size: 17px; font-weight: 600; }
.clear-selection { min-height: 32px; padding: 0 11px; color: var(--red); background: rgba(255, 253, 248, .72); border: 1px solid rgba(184, 95, 74, .45); border-radius: 3px; font: inherit; font-size: 10px; cursor: pointer; }
.clear-selection:disabled { color: #aaa096; border-color: var(--line); cursor: not-allowed; }
.selected-preview__list { display: flex; gap: 9px; overflow-x: auto; margin-top: 12px; padding-bottom: 3px; scrollbar-width: none; }
.selected-preview__list::-webkit-scrollbar { display: none; }
.preview-dish { flex: 0 0 82px; min-width: 0; }
.preview-dish img { display: block; width: 82px; aspect-ratio: 4 / 3; object-fit: cover; background: #d8c0a3; border: 1px solid rgba(119, 76, 50, .16); border-radius: 3px; }
.preview-dish span { display: block; overflow: hidden; margin-top: 5px; color: var(--wood); font-family: "Yu Mincho", "Songti SC", serif; font-size: 11px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.selected-preview__empty { margin: 13px 0 1px; color: #8d8276; font-size: 10px; }

.order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 11px; }
.order-card { position: relative; display: block; min-width: 0; overflow: hidden; color: inherit; background: rgba(255, 253, 248, .82); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--order-shadow); cursor: pointer; }
.order-card__check { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; place-items: center; width: 28px; height: 28px; color: transparent; background: rgba(255, 253, 248, .92); border: 1px solid var(--line); border-radius: 50%; font-family: Arial, sans-serif; font-size: 17px; box-shadow: 0 2px 8px rgba(63, 57, 47, .12); }
.order-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.order-card__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #d8c0a3; }
.order-card__body { padding: 11px 12px 13px; }
.order-card__body span { color: var(--green); font-size: 9px; }
.order-card__body h3 { margin: 3px 0 0; color: var(--wood); font-family: "Yu Mincho", "Songti SC", serif; font-size: 17px; font-weight: 600; }
.order-card.is-selected { border-color: var(--red); box-shadow: 0 7px 20px rgba(184, 95, 74, .12); }
.order-card.is-selected .order-card__check { color: var(--paper); background: var(--red); border-color: var(--red); }
.order-card:focus-within { outline: 2px solid var(--wood-soft); outline-offset: 2px; }

.order-empty { padding: 48px 0; color: #897d70; text-align: center; font-size: 13px; }
.order-action-bar { position: sticky; z-index: 5; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 8px); margin: 24px -6px 0; padding: 10px; background: rgba(248, 243, 233, .94); border: 1px solid rgba(222, 210, 192, .82); border-radius: 6px; backdrop-filter: blur(10px); }
.order-action-bar p { margin: 0 0 7px; color: #8c8175; text-align: center; font-size: 10px; }
.generate-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 18px; color: var(--paper); background: var(--wood); border: 0; border-radius: 4px; font: inherit; font-size: 13px; cursor: pointer; }
.generate-button:disabled { color: #a49b91; background: #e4ddd3; cursor: not-allowed; }
.generate-button span:last-child { font-size: 18px; }

.menu-result { width: min(100%, 470px); margin: 0 auto; }
.edit-selection { margin: 0 0 15px; padding: 5px 0; color: var(--wood-soft); background: none; border: 0; font: inherit; font-size: 12px; cursor: pointer; }
.share-menu { overflow: hidden; background: var(--paper); border: 1px solid #d9cbb7; border-radius: 4px; box-shadow: 0 12px 35px rgba(89, 66, 43, .12); }
.share-menu__header { position: relative; padding: 31px 22px 25px; text-align: center; border-bottom: 1px solid var(--line); }
.share-menu__header::after { content: "献\A立"; position: absolute; top: 18px; right: 18px; width: 32px; padding: 4px 0; color: var(--red); border: 1px solid var(--red); white-space: pre; font-family: "Yu Mincho", serif; font-size: 10px; line-height: 1.3; transform: rotate(3deg); }
.share-menu__header img { width: 54px; height: 54px; object-fit: cover; border: 1px solid var(--line); border-radius: 50%; }
.share-menu__header p { margin: 8px 0 1px; color: var(--green); font-family: Georgia, serif; font-size: 8px; letter-spacing: 1.7px; }
.share-menu__header h2 { margin: 0; color: var(--wood); font-family: "Yu Mincho", "Songti SC", serif; font-size: 25px; font-weight: 600; }
.share-menu__header span { color: var(--wood-soft); font-family: "Yu Mincho", serif; font-size: 11px; }
.menu-list { padding: 8px 20px; }
.menu-dish { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px; padding: 13px 0; }
.menu-dish + .menu-dish { border-top: 1px solid var(--line); }
.menu-dish img { display: block; width: 84px; aspect-ratio: 4 / 3; object-fit: cover; background: #d8c0a3; border-radius: 3px; }
.menu-dish small { color: var(--green); font-size: 9px; }
.menu-dish h3 { margin: 2px 0 0; color: var(--wood); font-family: "Yu Mincho", "Songti SC", serif; font-size: 18px; font-weight: 600; }
.share-menu__footer { padding: 25px 16px 27px; color: var(--wood); text-align: center; background: var(--green-light); }
.share-menu__footer span { color: var(--red); font-size: 8px; }
.share-menu__footer p { margin: 6px 0 0; font-family: "Yu Mincho", "Songti SC", serif; font-size: 13px; }
.screenshot-note { margin: 14px 0 0; color: #8d8276; text-align: center; font-size: 10px; }
.share-menu-button { display: block; width: 100%; min-height: 47px; margin-top: 14px; color: var(--paper); background: var(--green); border: 0; border-radius: 4px; font: inherit; font-size: 13px; cursor: pointer; }
.menu-share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.copy-menu-button { width: 100%; min-height: 47px; margin-top: 14px; color: var(--wood); background: var(--paper); border: 1px solid var(--wood-soft); border-radius: 4px; font: inherit; font-size: 13px; }
.menu-text-label { display: block; margin-top: 14px; color: var(--green); font-size: 10px; }
.menu-text { width: 100%; min-height: 130px; margin-top: 5px; padding: 12px; color: var(--wood); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 11px; line-height: 1.7; resize: vertical; }
.share-status { min-height: 18px; margin: 6px 0 0; color: var(--green); text-align: center; font-size: 10px; }

body.is-menu-view .order-hero { display: none; }
body.is-menu-view .menu-result { padding-top: max(22px, env(safe-area-inset-top)); }

@media (min-width: 620px) {
  .order-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-action-bar { width: 420px; margin-right: auto; margin-left: auto; }
}

@media print {
  body { padding: 0; background: white; }
  .paper-grain, .bottom-nav, .edit-selection, .screenshot-note, .menu-text-label, .menu-text, .menu-share-actions, .share-status { display: none; }
  .menu-result { width: 100%; padding: 0; }
  .share-menu { border: 0; box-shadow: none; }
}