.menu-page {
  background: #f5f7fa;
  color: #24384e;
  -webkit-font-smoothing: antialiased;
}
.menu-page main { width: min(820px, calc(100% - 40px)); padding: 38px 0 54px; }
.menu-page .back { color: #8290a1; font-size: 12px; margin-bottom: 35px; }
.menu-page .back:hover { color: #285f9e; }
.page-header { margin-bottom: 29px; }
.menu-page .eyebrow { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .2em; color: #6d85a3; margin-bottom: 12px; }
.eyebrow-line { width: 22px; height: 2px; background: #5a81ac; border-radius: 2px; }
.menu-page h1 { font-size: clamp(32px, 5.5vw, 43px); line-height: 1.25; letter-spacing: -.045em; color: #203b5b; font-weight: 700; margin-bottom: 12px; }
.title-mark { color: #7494b9; }
.menu-page .subtitle { color: #8893a1; font-size: 13px; margin: 0; }
.menu-page .panel { border-radius: 20px; padding: 26px 28px; border-color: #e1e7ef; box-shadow: 0 7px 25px #28466b04; margin-bottom: 22px; }
.menu-page .draw-panel { background: #fff; padding-bottom: 24px; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.menu-page .picker-heading h2 { font-size: 14px; color: #4b627c; font-weight: 600; }
.picker-badge { color: #7d95ae; background: #f2f6fa; border: 1px solid #e5edf5; padding: 5px 10px; font-size: 10px; border-radius: 20px; letter-spacing: .04em; }
.menu-page .result { position: relative; overflow: hidden; background: #f2f6fc; border: 1px solid #e6edf7; border-radius: 14px; min-height: 197px; padding: 24px 22px; margin: 0 0 16px; }
.result-ornament { position: absolute; top: 16px; right: 19px; font-size: 21px; color: #bbcde3; }
.menu-page .result-label { font-size: 11px; color: #8b9bb0; letter-spacing: .12em; margin: 0 0 10px; }
.draw-window { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 57px; }
.menu-page .result-value { color: #2e527c; font-size: clamp(26px, 5vw, 37px); font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
.result-hint { margin: 11px 0 0; font-size: 11px; color: #8b9bb0; line-height: 1.6; }
.draw-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; opacity: 0; background: #e3ebf6; }
.draw-progress span { display: block; height: 100%; width: 100%; background: #6d97c8; transform: scaleX(0); transform-origin: left; }
.menu-page .draw { display: flex; justify-content: center; align-items: center; gap: 10px; background: #294f7e; border-color: #294f7e; border-radius: 10px; min-height: 48px; padding: 12px 20px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 10px #294f7e12; }
.menu-page .draw:hover:not(:disabled) { background: #203f65; border-color: #203f65; box-shadow: 0 5px 15px #294f7e24; }
.draw-icon { display: inline-flex; align-items: center; font-size: 18px; color: #c6d8ef; }
.button-arrow { position: absolute; right: 19px; color: #aac0da; font-size: 19px; font-weight: 400; }
.menu-page .draw { position: relative; }
.menu-page .is-drawing .draw:disabled { opacity: 1; cursor: progress; }
.is-drawing .draw-icon { animation: picker-spin 1.4s linear infinite; }
.is-drawing .draw-progress { opacity: 1; }
.is-drawing .draw-progress span { animation: picker-progress 1.9s ease-out forwards; }
.is-drawing .result-ornament { animation: picker-pulse .7s ease-in-out infinite alternate; }
.has-result .result { background: #edf5fc; border-color: #cfdfef; }
.has-result .result-ornament { color: #719ac8; }
.has-result .result-value { color: #224f80; }
.menu-page .menu-panel { padding-top: 27px; }
.menu-page .section-head { align-items: center; margin-bottom: 20px; }
.section-eyebrow { color: #9ca8b6; font-size: 9px; letter-spacing: .16em; margin: 0 0 7px; }
.menu-page .menu-panel h2 { font-size: 21px; color: #2a405c; font-weight: 650; letter-spacing: -.025em; }
.menu-page .count { background: #f3f6fa; color: #7c8fa6; border: 1px solid #e9eef5; border-radius: 20px; padding: 6px 11px; font-size: 11px; white-space: nowrap; }
.menu-page form { gap: 9px; }
.menu-page input { background: #fafbfd; border-color: #e0e7f0; border-radius: 10px; padding: 13px 15px; font-size: 12px; }
.menu-page input::placeholder { color: #a3afbe; }
.menu-page input:focus { background: #fff; border-color: #8ba8c8; box-shadow: 0 0 0 3px #4075ac0b; }
.menu-page .add { border-radius: 10px; background: #eff4fa; border: 1px solid #d9e4f1; color: #42648b; font-size: 12px; padding: 0 19px; font-weight: 600; }
.menu-page .add span { font-size: 15px; margin-right: 2px; font-weight: 400; }
.menu-page .add:hover:not(:disabled) { background: #e2edf9; border-color: #b9cfe6; }
.menu-page .menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 21px; }
.menu-page .menu li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 22px; gap: 9px; align-items: center; padding: 14px 9px 14px 12px; min-height: 68px; border-radius: 11px; background: #fff; border: 1px solid #e5eaf1; color: #405774; transition: border-color .2s, background .2s, box-shadow .2s; }
.menu-page .menu li:hover { background: #fafcff; border-color: #bfd0e5; box-shadow: 0 3px 9px #24466b07; }
.menu-page .dish-number { display: grid; place-items: center; width: 26px; height: 29px; border-radius: 7px; background: #f2f5f9; color: #a1afc0; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 600; }
.menu-page .dish-name { font-size: 12px; line-height: 1.7; font-weight: 550; overflow-wrap: anywhere; }
.menu-page .remove { display: grid; place-items: center; min-width: 22px; min-height: 28px; color: #b5becb; border-radius: 6px; padding: 0; font-size: 18px; }
.menu-page .remove:hover:not(:disabled) { color: #b35862; background: #fbf0f1; }
.menu-page .menu li.is-preview { border-color: #a8c3e1; background: #eff5fc; }
.menu-page .menu li.is-picked { border-color: #86a9cf; background: #f0f6fd; box-shadow: 0 0 0 1px #dce8f5; }
.menu-page .is-picked .dish-number { background: #5c85b2; color: #fff; }
.menu-page .is-picked .dish-name { color: #2b527c; }
.sync-line { display: flex; align-items: center; gap: 12px; min-height: 24px; margin-top: 20px; }
.menu-page .status { position: relative; padding-left: 12px; margin: 0; font-size: 10px; color: #96a3b3; }
.menu-page .status::before { content: ''; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: #8dad9e; }
.menu-page .status[data-error=true] { color: #b35862; }
.menu-page .status[data-error=true]::before { background: #b35862; }
.menu-page .utility { margin: 0; font-size: 10px; padding: 4px 8px; }
.menu-page .empty { padding: 24px 10px 16px; text-align: center; color: #8f9faf; }
.menu-page .empty > span { display: grid; place-items: center; margin: 0 auto 12px; width: 38px; height: 38px; background: #f3f6fa; border-radius: 50%; font-size: 24px; color: #b1bfcd; }
.menu-page .empty p { font-size: 13px; margin: 0 0 7px; }
.menu-page .empty small { font-size: 11px; color: #a4afbb; }
.menu-page footer { margin-top: 29px; font-size: 10px; color: #98a7b8; line-height: 1.8; }
.cloud-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #9bb7aa; margin-right: 5px; vertical-align: 1px; }
.footer-note { display: block; color: #b0bac6; font-size: 9px; margin-top: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.menu-page button:focus-visible, .menu-page a:focus-visible { outline: 3px solid #84a7cf; outline-offset: 4px; }
.menu-page button:disabled { cursor: default; }
@keyframes picker-spin { to { transform: rotate(360deg); } }
@keyframes picker-progress { to { transform: scaleX(1); } }
@keyframes picker-pulse { to { opacity: .45; transform: scale(.8); } }
@media (max-width: 680px) {
  .menu-page .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .menu-page main { width: calc(100% - 30px); padding-top: 23px; }
  .menu-page .back { margin-bottom: 27px; }
  .page-header { margin-bottom: 24px; }
  .menu-page .panel { border-radius: 16px; padding: 21px 18px; margin-bottom: 17px; }
  .menu-page .result { min-height: 192px; padding-inline: 15px; }
  .menu-page .menu { gap: 8px; }
  .menu-page .menu li { grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 6px; padding: 11px 6px 11px 9px; min-height: 66px; }
  .menu-page .dish-number { width: 22px; height: 26px; font-size: 9px; }
  .menu-page .dish-name { font-size: 12px; }
  .menu-page .add { padding: 0 13px; }
  .menu-page input { padding: 12px; font-size: 16px; }
  .menu-page input::placeholder { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-page *, .menu-page *::before, .menu-page *::after { animation: none !important; transition: none !important; }
}