:root {
  --accent: #2C3E50;
  --accent-dark: #1B2733;
  --accent-2: #A9835A;
  --bg: #EEF0F3;
  --surface: #FFFFFF;
  --surface-2: #F5F6F8;
  --text: #1E2530;
  --text-secondary: #64748B;
  --border: #DCE1E8;
  --title-font-family: 'Inter', sans-serif;
  --title-font-style: normal;
  --title-font-size: 18px;
  --phone-font-family: 'Inter', sans-serif;
  --phone-font-style: normal;
  --phone-font-size: 12px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  height: 100%;
  overflow: hidden;
}
button { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;                     /* старые браузеры */
  height: 100dvh;                    /* видимая область на мобильных без адресной строки */
  height: var(--app-height, 100dvh); /* JS-подстраховка (см. CLAUDE.md §6.1) */
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.06);
}
#app::before, #app::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(50px);
}
#app::before { top: -120px; right: -100px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(169,131,90,0.30), transparent 70%); }
#app::after { bottom: -140px; left: -120px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(169,131,90,0.16), transparent 70%); }

/* фоновый узор из админки: плитка на всё окно (а не только колонку сайта — иначе на средних экранах по бокам пусто,
   а узор «съезжает» вместе с колонкой); к центру экрана растворяется, чтобы не мешать контенту */
#ornament-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat;
  -webkit-mask-image: radial-gradient(circle at 50% 55%, transparent 0%, transparent 30%, rgba(0,0,0,0.9) 78%);
  mask-image: radial-gradient(circle at 50% 55%, transparent 0%, transparent 30%, rgba(0,0,0,0.9) 78%);
}
.screen { position: relative; z-index: 1; display: none; flex-direction: column; height: 100%; overflow: hidden; }
.screen.active { display: flex; animation: screenFadeIn 0.28s ease; }
@keyframes screenFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- шапка ---------- */
.header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 10px; flex-shrink: 0; }
.header-home { display: flex; align-items: center; gap: 10px; cursor: pointer; background: none; border: none; padding: 0; text-align: left; min-width: 0; }
.logo { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.header-title {
  font-weight: 600; margin: 0; letter-spacing: -0.01em;
  font-family: var(--title-font-family); font-style: var(--title-font-style); font-size: var(--title-font-size);
}
.header-sub { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-contacts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Шапка главной: название | контакты, адрес — отдельно. Сетка вместо flex, чтобы ничего не наезжало:
   - контакты не шире 58% — иначе телефон переносится под значки соцсетей;
   - название сжимается (переносится по словам);
   - адрес не влияет на ширину колонок (contain: inline-size) и обрезается многоточием;
     полностью — во всплывающей подсказке и на карте по нажатию. */
.header.full {
  display: grid; grid-template-columns: minmax(0, 1fr) fit-content(58%);
  grid-template-areas: "brand contacts" "address address";
  column-gap: 12px; row-gap: 6px; align-items: center;
}
.header.full .header-home { grid-area: brand; }
.header.full .header-home > span:last-child { min-width: 0; }
/* меню на телефоне: шапка компактная — только название и стол, место под блюда */
@media (max-width: 599px) {
  #screen-menu .header.full .header-contacts, #screen-menu .header.full .header-address { display: none; }
}
#screen-landing .header-sub { white-space: normal; } /* «Добро пожаловать!» — переносом, а не многоточием */
.header.full .header-contacts {
  grid-area: contacts; margin-left: 0; min-width: 0;
  flex-wrap: wrap; justify-content: flex-end; row-gap: 6px;
}
.header-address {
  grid-area: address; min-width: 0; contain: inline-size; overflow: hidden;
  display: flex; align-items: center; gap: 5px;
  font-size: var(--address-font-size, 13px); color: var(--text-secondary); text-decoration: none;
}
.header-address span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-address svg { flex-shrink: 0; width: 1.1em; height: 1.1em; color: var(--accent-2); }
.header-address:hover span { text-decoration: underline; }
/* планшет, телефон боком, ПК: адрес справа под телефоном, название — слева на обе строки */
@media (min-width: 600px) {
  .header.full { grid-template-areas: "brand contacts" "brand address"; row-gap: 4px; }
  .header-address { width: min(460px, 45vw); justify-self: end; justify-content: flex-end; }
}
.header-phone {
  display: flex; align-items: center; gap: 5px; color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap;
  font-family: var(--phone-font-family); font-style: var(--phone-font-style); font-size: var(--phone-font-size);
}
.social-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; padding: 0; text-decoration: none;
}

/* ---------- стартовый экран: карусель ---------- */
.hero-collage { position: relative; flex: 3; min-height: 0; margin: 4px 18px 18px; overflow: hidden; }
.collage-card {
  position: absolute; left: 50%; top: 44%;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(30,37,48,0.18);
  border: 3px solid var(--surface);
  background: var(--surface);
}
.collage-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* название и метка блюда — размеры в em от --card-font: масштабируются вместе с карточкой */
.collage-card { font-size: var(--card-font, 8px); }
.collage-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2em 0.8em 0.7em;
  background: linear-gradient(to top, rgba(15,20,28,0.78), rgba(15,20,28,0));
  color: #fff; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.4); text-align: right;
}
.collage-name > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.collage-label {
  position: absolute; top: 0.7em; left: 0.7em; max-width: calc(100% - 1.4em);
  padding: 0.3em 0.75em; border-radius: 999px; background: var(--accent-2); color: #fff;
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 0.2em 0.6em rgba(0,0,0,0.2);
}
/* Дальние карточки бледнеют не прозрачностью (сквозь неё просвечивал бы фоновый узор),
   а наложением цвета фона страницы: сама карточка всегда непрозрачна. */
.collage-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--bg); opacity: var(--fade, 0);
}
.landing-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.landing-side { flex-shrink: 0; display: flex; flex-direction: column; }
.landing-intro { display: none; } /* приветствие — только на широком экране */
.landing-actions { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 18px; flex-shrink: 0; }

/* ---------- категории ---------- */
.categories { display: flex; gap: 8px; overflow-x: auto; padding: 6px 18px 14px; flex-shrink: 0; scrollbar-width: none; }
.categories::-webkit-scrollbar { display: none; }
/* мышь: колесо и перетаскивание листают вбок (app.js), стрелки по краям — когда есть куда листать */
.cat-wrap { position: relative; flex-shrink: 0; min-width: 0; }
.categories.dragging { cursor: grabbing; scroll-behavior: auto; }
.categories.dragging .cat-chip { pointer-events: none; }
.cat-wrap.fade-left .categories { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px); mask-image: linear-gradient(to right, transparent 0, #000 56px); }
.cat-wrap.fade-right .categories { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 56px); mask-image: linear-gradient(to left, transparent 0, #000 56px); }
.cat-wrap.fade-left.fade-right .categories {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.cat-arrow {
  position: absolute; top: 3px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 0 3px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(30,37,48,0.12); transition: background 0.15s, color 0.15s;
}
.cat-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat-arrow.left { left: 8px; }
.cat-arrow.right { right: 8px; }
.cat-arrow[hidden] { display: none; }
/* на сенсорных экранах стрелки не нужны — листают пальцем */
@media (hover: none) { .cat-arrow { display: none !important; } }
.cat-chip {
  flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.cat-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 10px rgba(30,37,48,0.14); }

/* ---------- сетка блюд ---------- */
.dish-grid {
  flex: 1; overflow-y: auto; padding: 2px 18px 96px;
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: max-content; gap: 14px; align-content: start;
}
.dish-card {
  background: var(--surface); border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left;
  box-shadow: 0 2px 10px rgba(43,36,28,0.06); transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex; flex-direction: column;
}
.dish-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(30,37,48,0.12); }
.dish-card:active { transform: scale(0.98); }
/* <img> всегда absolute внутри блока с aspect-ratio — иначе в Edge/iOS "распирает" карточку (CLAUDE.md §6.1) */
/* flex-shrink:0 — иначе во flex-колонке блок с overflow:hidden сжимается до нуля, aspect-ratio не спасает */
.dish-photo { aspect-ratio: 1 / 1; position: relative; overflow: hidden; flex-shrink: 0; }
.dish-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dish-photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 60%); pointer-events: none; }
.photo-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg), var(--border)); color: rgba(100,116,139,0.45);
}
.dish-info { padding: 11px 13px 13px; flex: 1; display: flex; flex-direction: column; }
.dish-name { font-size: 13.5px; font-weight: 600; margin: 0 0 3px; line-height: 1.3; }
.dish-meta { font-size: 11px; color: var(--text-secondary); margin: 0; }
.dish-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 9px; }
.dish-price { font-size: 14px; font-weight: 700; color: var(--accent-2); }
.icon-btn {
  width: 28px; height: 28px; border-radius: 9px; background: var(--accent); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1;
  box-shadow: 0 3px 8px rgba(30,37,48,0.14);
}
.icon-btn.added { background: var(--accent-2); }
.icon-btn:disabled { background: var(--border); box-shadow: none; cursor: default; }

/* стоп-лист Microinvest: блюдо видно, но заказать нельзя — фото затемнено */
.dish-card.stopped { cursor: default; }
.dish-card.stopped:hover { transform: none; box-shadow: 0 2px 10px rgba(43,36,28,0.06); }
.dish-card.stopped .dish-name, .dish-card.stopped .dish-price { opacity: 0.55; }
.dish-card.stopped .dish-photo img, .dish-card.stopped .photo-placeholder,
.modal-photo.stopped img, .modal-photo.stopped .photo-placeholder { filter: grayscale(1) brightness(0.5); }
.dish-card.stopped .dish-photo::before, .modal-photo.stopped::before {
  content: 'Временно недоступно'; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  padding: 8px 8px 20px; text-align: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}.modal-photo.stopped::before { font-size: 16px; padding: 16px 60px 28px; } /* справа — место под кнопку закрытия */
.review-item.stopped .review-item-name { opacity: 0.55; text-decoration: line-through; }
.review-fee { background: var(--surface-2, #F5F6F8); box-shadow: none; }
.review-item-stopped { font-size: 12px; color: #A94442; font-weight: 500; margin: 2px 0 0; }
.confirm-btn:disabled { background: var(--border); color: var(--text-secondary); box-shadow: none; cursor: default; }
.menu-state { grid-column: 1 / -1; text-align: center; color: var(--text-secondary); font-size: 13.5px; padding: 40px 10px; }

/* ---------- плавающая корзина ---------- */
.cart-bar {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  background: var(--accent); color: #fff; border: none; border-radius: 16px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; z-index: 5;
  box-shadow: 0 10px 24px rgba(30,37,48,0.14);
}
.cart-bar-left { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.cart-bar-total { font-size: 16px; font-weight: 700; }

/* ---------- карточка блюда (нижний лист) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,15,10,0.55);
  display: none; align-items: flex-end; justify-content: center; z-index: 20;
}
.modal-overlay.center { align-items: center; padding: 16px; }
.modal-overlay.active { display: flex; animation: overlayFadeIn 0.22s ease; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet {
  width: 100%; max-width: 480px; height: calc(var(--app-height, 100dvh) * 0.85);
  background: var(--surface); border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
  animation: sheetSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-photo { flex: 2; min-height: 0; position: relative; overflow: hidden; transition: flex 0.25s ease; }
/* открыт комментарий — фото уступает место, чтобы не появлялась прокрутка */
.modal-sheet.with-comment .modal-photo { flex: 1.2; }
.modal-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: var(--text-secondary); box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.modal-body { flex: 1; min-height: 0; overflow: hidden; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.modal-scroll { min-height: 0; overflow-y: auto; }
.modal-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.modal-title { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.modal-weight { font-size: 12px; color: var(--text-secondary); white-space: nowrap; margin-left: 12px; padding-top: 5px; }
.modal-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 5px; font-weight: 600; }
.modal-composition { font-size: 13.5px; color: var(--text-secondary); margin: 0; line-height: 1.55; }
/* модификаторы: у блюда есть варианты — фото уступает место */
.modal-sheet.with-modifiers .modal-photo { flex: 1.3; }
.modal-sheet.with-modifiers.with-comment .modal-photo { flex: 1; }
.mod-group { margin-top: 14px; }
.mod-rule { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.mod-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-option {
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease;
}
.mod-option.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mod-price { opacity: 0.7; font-weight: 500; margin-left: 2px; }
.mod-option.stopped { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.add-btn:disabled { background: var(--border); color: var(--text-secondary); box-shadow: none; cursor: default; }
.review-item-options { font-size: 12px; color: var(--accent-2); margin: 2px 0 0; font-weight: 500; }
.comment-box { margin-top: 14px; }
.comment-btn {
  display: flex; align-items: center; gap: 7px; background: var(--bg); border: none; color: var(--text);
  padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.comment-input {
  width: 100%; margin-top: 8px; padding: 10px 13px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 13px; font-family: inherit; resize: none;
}
.comment-input:focus { outline: none; border-color: var(--accent); }
.modal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; flex-shrink: 0; }
.qty-control { display: flex; align-items: center; gap: 14px; }
.qty-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--text);
}
.qty-value { font-size: 15px; font-weight: 600; min-width: 16px; text-align: center; }
.add-btn {
  background: var(--accent); color: #fff; border: none; padding: 12px 22px; border-radius: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(30,37,48,0.14);
}

/* ---------- диалоги (вместо alert/confirm — CLAUDE.md §6.1) ---------- */
.dialog { width: 100%; max-width: 300px; background: var(--surface); border-radius: 18px; padding: 22px; text-align: center; }
.dialog-title { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.dialog-text { font-size: 13px; color: var(--text-secondary); margin: 0 0 20px; line-height: 1.5; }
.dialog-actions { display: flex; gap: 10px; }
.dialog-actions button { flex: 1; border: none; padding: 10px; border-radius: 9px; font-size: 13px; cursor: pointer; background: var(--bg); }
.dialog-actions .primary { background: var(--accent); color: #fff; }

/* ---------- корзина ---------- */
.back-row { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; flex-shrink: 0; }
.back-btn { background: var(--surface); border: none; font-size: 17px; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); flex-shrink: 0; }
.back-title { margin: 0; flex: 1; }
.text-link { background: none; border: none; color: var(--text-secondary); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0; }
.review-list { flex: 1; overflow-y: auto; padding: 4px 18px; }
.review-item {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border-radius: 14px; padding: 13px 15px; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(43,36,28,0.05);
}
.review-item-row { display: flex; align-items: center; justify-content: space-between; }
.review-item-name { font-size: 13.5px; font-weight: 600; margin: 0; flex: 1; }
.review-item-sum { font-size: 13.5px; font-weight: 700; min-width: 64px; text-align: right; }
.review-item-comment { font-size: 11.5px; color: var(--text-secondary); margin: 0; font-style: italic; cursor: pointer; }
.review-total-row { display: flex; justify-content: space-between; padding: 16px 22px; flex-shrink: 0; align-items: baseline; }
.review-total-value { font-size: 19px; font-weight: 700; }
.confirm-btn {
  margin: 0 18px 18px; background: var(--accent); color: #fff; border: none;
  padding: 15px; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(30,37,48,0.14);
}
.confirm-btn.secondary { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); box-shadow: none; }
.landing-actions .confirm-btn { margin: 0; }

/* ---------- стол: QR-сканер и ручной выбор ---------- */
/* safe center: если содержимое выше экрана (телефон боком, открытая клавиатура) — прокрутка с начала, а не обрезка сверху */
.center-screen { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; padding: 20px; }
.scan-frame {
  width: 240px; height: 240px; border: 2px dashed var(--border); border-radius: 16px; background: var(--surface);
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.scan-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-placeholder { font-size: 40px; opacity: 0.4; }
.scan-hint { font-size: 13.5px; color: var(--text-secondary); text-align: center; margin: 0 0 24px; max-width: 280px; line-height: 1.5; }
.table-list { flex: 1; overflow-y: auto; padding: 10px 18px 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.table-btn {
  padding: 14px 8px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface);
  font-size: 14px; font-weight: 500; cursor: pointer; text-align: center;
}
.table-btn:active { transform: scale(0.97); }
.table-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* занятый стол (открытый заказ): гостю недоступен, на планшете персонала — выбрать можно, но видно «занят» */
.table-btn.occupied { background: #C9CFD8; color: #4A5462; border-color: #9AA4B2; border-style: dashed; }
.table-btn.occupied .table-icon { color: #6B7584; }
.table-btn:disabled { cursor: not-allowed; opacity: 0.9; }
.table-btn:disabled:active { transform: none; }
.table-busy { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #B4413C; }
.table-icon { color: var(--accent-2); }

/* ---------- официант и PIN ---------- */
.waiter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; max-width: 340px; }
.waiter-card { background: none; border: none; cursor: pointer; padding: 0; }
.waiter-avatar {
  width: 58px; height: 58px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 17px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 7px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15); overflow: hidden; position: relative;
}
.waiter-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.waiter-name { font-size: 12px; text-align: center; font-weight: 500; margin: 0; }
.pin-message { font-size: 12px; color: var(--text-secondary); margin: 2px 0 16px; min-height: 16px; text-align: center; }
.pin-message.error { color: #A94442; font-weight: 500; }
.pin-dots { display: flex; gap: 14px; margin: 6px 0 22px; }
.pin-dots.shake { animation: pinShake 0.35s ease; }
@keyframes pinShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border); transition: all 0.15s; }
.pin-dot.filled { background: var(--accent); border-color: var(--accent); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 250px; width: 100%; }
.pin-key { height: 56px; border-radius: 16px; background: var(--surface); border: none; font-size: 20px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 8px rgba(43,36,28,0.06); }
.pin-key:active { transform: scale(0.95); }
.pin-key.empty { background: none; cursor: default; box-shadow: none; }
.pin-pad.busy { opacity: 0.5; pointer-events: none; }

/* ---------- доставка: ожидание подтверждения ---------- */
.code-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 6px; }
.order-code { font-size: 38px; font-weight: 700; color: var(--accent); margin: 0 0 22px; letter-spacing: 0.06em; }
#delivery-waiting { display: flex; flex-direction: column; align-items: center; }
.call-phone { font-size: 18px; font-weight: 600; color: var(--text); text-decoration: none; margin-bottom: 24px; }
.waiting-row { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- заказ отправлен ---------- */
.success-icon { font-size: 52px; margin-bottom: 14px; }
.success-text { font-size: 19px; font-weight: 600; margin: 0 0 6px; text-align: center; }
.success-sub { font-size: 13px; color: var(--text-secondary); text-align: center; margin: 0; line-height: 1.5; max-width: 300px; }
/* после заказа: «Добавить к заказу» и «Сделать новый» (на планшете — «Следующий гость» с отсчётом) */
.success-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; margin-top: 24px; }
.success-actions .confirm-btn { margin: 0; width: 100%; }
.success-countdown { font-size: 13px; color: var(--text-secondary); margin: 12px 0 0; text-align: center; }
.success-table { font-size: 22px; font-weight: 700; color: var(--accent); margin: 14px 0 0; text-align: center; }
.pin-table { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 0 12px; text-align: center; }
/* планшет персонала: стол крупно в шапке меню и на экране PIN — видно, куда уходит заказ */
body.tablet .pin-table { font-size: 22px; color: var(--accent); }
body.tablet #location-label { font-size: 15px; font-weight: 700; color: var(--accent); }

/* ---------- доставка ---------- */
.form-screen { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; }
/* не сжимать поля, когда форма выше экрана (телефон боком, Fold): пусть прокручивается — иначе комментарий сплющивался */
.form-screen > * { flex-shrink: 0; }
.form-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; display: block; }
.form-input {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 14px; margin-bottom: 14px; font-family: inherit; background: var(--surface);
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-input.invalid { border-color: #C0504D; }
/* телефон: "+7" зафиксирован, вводятся только 10 цифр */
.phone-field { display: flex; align-items: stretch; margin-bottom: 14px; }
.phone-prefix {
  display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 500;
  border: 1.5px solid var(--border); border-right: none; border-radius: 10px 0 0 10px; background: var(--bg);
}
.phone-field .form-input { margin-bottom: 0; border-radius: 0 10px 10px 0; letter-spacing: 0.02em; }
.form-error { color: #A94442; font-size: 12.5px; min-height: 18px; margin: -4px 0 12px; }
/* оформление заказа: доставка или самовывоз */
.mode-switch { display: flex; gap: 8px; margin-bottom: 16px; }
.mode-btn {
  flex: 1; padding: 11px 8px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface);
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); font-family: inherit;
}
.mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
textarea.form-input { resize: none; line-height: 1.4; min-height: calc(2.8em + 25px); /* 2 строки */ }
.pickup-hint { font-size: 13px; color: var(--text-secondary); margin: -2px 0 14px; line-height: 1.45; }
.checkout-total { font-size: 15px; font-weight: 600; margin: 2px 0 10px; display: flex; justify-content: space-between; gap: 10px; }
.checkout-total .muted { font-weight: 400; color: var(--text-secondary); font-size: 13px; }

/* ---------- меню: основная колонка и панель справа (панель видна только на широком экране) ---------- */
.menu-layout { flex: 1; min-height: 0; display: flex; }
.menu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.side-panel { display: none; }

/* ---------- планшет / альбомная ориентация ---------- */
/* с 600px: Android-планшеты 1200×1920 в Chrome — около 686px CSS (масштаб 1,75) — во всю ширину, 3 колонки блюд */
@media (min-width: 600px) {
  #app { max-width: 1000px; }
  .dish-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) and (orientation: landscape) {
  .dish-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .header { padding: 8px 18px 6px; }
  .logo { width: 34px; height: 34px; }
  .header-sub { font-size: 11px; }
  .categories { padding: 2px 18px 8px; }
  .cat-chip { padding: 6px 14px; font-size: 12px; }
  .dish-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding-bottom: 70px; }
  .modal-sheet { height: calc(var(--app-height, 100dvh) * 0.92); }
}

/* ---------- широкий экран (ПК 1920×1080 и подобные): 5 карточек в ряд, корзина справа, под ней объявление ---------- */
@media (min-width: 1100px) and (orientation: landscape) {
  #app { max-width: none; box-shadow: none; }
  /* остальные экраны — узкой колонкой по центру, как на телефоне */
  .screen { width: 100%; max-width: 560px; margin: 0 auto; }
  #screen-landing { max-width: none; }
  #screen-menu { max-width: none; }

  /* Сетка: шапка — на всю ширину (название, телефон, соцсети, адрес — целиком), ниже слева вкладки групп
     и блюда, справа корзина — её верх на уровне первого ряда карточек. menu-main «растворяется» (contents),
     чтобы шапка, вкладки и блюда стали ячейками общей сетки. */
  .menu-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .menu-main { display: contents; }
  .menu-main .header { grid-column: 1 / -1; grid-row: 1; padding: 20px 28px 10px; }
  .cat-wrap { grid-column: 1; grid-row: 2; }
  .dish-grid { grid-column: 1; grid-row: 3; min-height: 0; }
  .categories { padding: 6px 28px 14px; }
  .cat-arrow.left { left: 16px; }
  .cat-arrow.right { right: 16px; }
  .dish-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 2px 28px 28px; }
  .cart-bar { display: none; }
  /* адрес на ПК — целиком, при нехватке места переносится на вторую строку */
  .header.full .header-address { width: min(640px, 50vw); }
  .header.full .header-address span { white-space: normal; overflow: visible; text-align: right; }

  .side-panel {
    grid-column: 2; grid-row: 2 / 4; /* верх — на уровне вкладок категорий */
    display: flex; flex-direction: column; gap: 16px;
    width: 400px; flex-shrink: 0; padding: 6px 24px 20px 0; min-height: 0;
  }
  .side-cart {
    flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column;
    background: var(--surface); border-radius: 20px; box-shadow: 0 6px 24px rgba(30,37,48,0.08);
  }
  .side-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; flex-shrink: 0; }
  .side-cart-title { font-size: 17px; font-weight: 600; margin: 0; }
  .side-cart-list { padding: 4px 14px; }
  .side-cart-list .review-item { background: var(--surface-2); box-shadow: none; }
  .side-cart-list .review-fee { background: var(--bg); }
  .side-cart-empty { text-align: center; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; margin: 40px 24px; }
  .side-total-row { padding: 14px 20px; border-top: 1px solid var(--border); }
  .side-cart .confirm-btn { margin: 0 16px 16px; }

  /* объявление: фото блюда фоном, текст поверх с затемнением/осветлением (CLAUDE.md §6) */
  .side-promo {
    flex: 1 1 auto; min-height: 200px; position: relative; overflow: hidden;
    border-radius: 20px; background: var(--accent); box-shadow: 0 6px 24px rgba(30,37,48,0.12);
  }
  /* корзина пуста — компактная, под ней объявление; есть блюда (или объявлений нет) — корзина на всю высоту */
  .side-panel.cart-open .side-cart, .side-panel:has(.side-promo[hidden]) .side-cart { flex: 1 1 auto; }
  .side-panel.cart-open .side-promo { display: none; }
  .promo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
  .promo-slide.active { opacity: 1; pointer-events: auto; }
  .promo-slide.clickable { cursor: pointer; }
  .promo-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
  .promo-slide.active img { transform: scale(1.06); }
  .promo-slide::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
  .promo-slide.text-light::after { background: linear-gradient(to top, rgba(15,20,28,0.78), rgba(15,20,28,0.15) 70%); }
  .promo-slide.text-dark::after { background: linear-gradient(to top, rgba(255,255,255,0.88), rgba(255,255,255,0.2) 70%); }
  .promo-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 20px 22px; }
  .text-light .promo-text { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.35); }
  .text-dark .promo-text { color: var(--text); }
  .promo-label {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: var(--accent-2); color: #fff; text-shadow: none; margin-bottom: 8px;
  }
  .promo-title { margin: 0; font-weight: 700; line-height: 1.2; }
  .promo-more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; opacity: 0.9; }
  .promo-dots { position: absolute; top: 12px; right: 14px; z-index: 2; display: flex; gap: 5px; }
  .promo-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background 0.3s; }
  .promo-dots span.active { background: #fff; }

  /* карточка блюда — окно по центру: фото слева, описание справа */
  #dish-overlay { align-items: center; padding: 24px; }
  #dish-overlay .modal-sheet {
    flex-direction: row; max-width: 900px; height: min(600px, 88vh); border-radius: 24px;
    animation: overlayFadeIn 0.22s ease;
  }
  #dish-overlay .modal-photo { flex: 0 0 60%; }            /* фото : описание = 60 : 40 */
  #dish-overlay .modal-body { flex: 0 0 40%; min-width: 0; padding: 28px; }
}
@media (min-width: 1280px) and (orientation: landscape) {
  .dish-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- главная на широком экране: слева приветствие и кнопки, справа крупная карусель ---------- */
@media (min-width: 1100px) and (orientation: landscape) {
  #screen-landing > * { width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; }
  #screen-landing .header { padding: 24px 48px 8px; }
  .landing-body { flex-direction: row-reverse; gap: 56px; padding: 0 48px 40px; }
  .landing-side { width: 460px; display: flex; flex-direction: column; justify-content: center; }
  .landing-body .hero-collage { flex: 1; margin: 0; }
  .landing-intro { display: block; margin-bottom: 36px; }
  .landing-kicker {
    margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2);
  }
  .landing-headline {
    margin: 0 0 18px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--text);
    font-family: var(--title-font-family); font-style: var(--title-font-style); font-size: clamp(40px, 3.6vw, 64px);
  }
  .landing-text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-secondary); max-width: 420px; }
  .landing-actions { padding: 0; gap: 12px; }
  .landing-actions .confirm-btn { padding: 18px 20px; font-size: 16px; border-radius: 16px; }
  .landing-actions .confirm-btn:hover { filter: brightness(1.08); }
  .landing-actions .confirm-btn.secondary:hover { filter: none; border-color: var(--accent); }
}
@media (min-width: 1600px) and (orientation: landscape) {
  .landing-side { width: 540px; }
  .landing-text { font-size: 19px; max-width: 500px; }
  .landing-actions .confirm-btn { padding: 20px 22px; font-size: 17px; }
  #screen-landing .header { padding-top: 32px; }
}

/* ---------- выбор стола на планшете и ПК: все столы сразу (колонки подбирает fitTableGrid) ---------- */
.table-list.fit {
  grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: var(--cell-h);
  align-content: center; overflow: hidden;
}
.table-list.fit .table-btn { padding: 6px; gap: 3px; justify-content: center; font-size: clamp(13px, calc(var(--cell-h) * 0.15), 20px); }
.table-list.fit .table-btn:hover { border-color: var(--accent); }
.table-list.fit .table-icon { width: clamp(18px, calc(var(--cell-h) * 0.28), 48px); height: auto; flex-shrink: 0; }
.table-list.fit .table-busy { font-size: clamp(9px, calc(var(--cell-h) * 0.11), 12px); line-height: 1.1; }
.table-list.compact .table-icon { display: none; }
@media (min-width: 1100px) and (orientation: landscape) {
  #screen-table-select { max-width: 1600px; }
  #screen-table-select .back-row { padding: 20px 28px 6px; }
  #screen-table-select .table-list { padding: 14px 28px 28px; }
}

/* ---------- телефон, повёрнутый боком (альбомная, низкий экран): раскладки в две колонки ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .back-row { padding: 8px 18px 4px; }
  .confirm-btn { padding: 12px; font-size: 14px; margin: 0 18px 12px; }
  .review-total-row { padding: 8px 22px; }

  /* главная: карусель слева, кнопки справа — иначе на карусель остаётся полоска в пару сантиметров */
  #screen-landing .header { padding-top: 8px !important; }
  .landing-body { flex-direction: row-reverse; gap: 18px; padding: 0 18px 12px; }
  .landing-side { width: 44%; justify-content: center; }
  .landing-body .hero-collage { flex: 1; margin: 0; }
  .landing-actions { padding: 0; }
  .landing-actions .confirm-btn { margin: 0; }

  /* сканер QR: рамка слева, подсказка справа */
  #screen-qr-scan .center-screen {
    display: grid; grid-template-columns: auto minmax(0, 260px); column-gap: 24px;
    align-content: center; justify-content: center; padding: 8px 20px;
  }
  #screen-qr-scan .scan-frame {
    grid-row: 1 / 3; margin: 0;
    width: min(240px, calc(var(--app-height, 100dvh) - 80px)); height: min(240px, calc(var(--app-height, 100dvh) - 80px));
  }
  #screen-qr-scan .scan-hint { align-self: end; text-align: left; margin: 0 0 12px; }
  #choose-table-btn { align-self: start; justify-self: start; }

  /* меню: фото ниже, чтобы в экран помещался хотя бы ряд карточек целиком */
  .dish-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .dish-photo { aspect-ratio: 4 / 3; }
  .dish-info { padding: 8px 11px 10px; }
  .cart-bar { padding: 10px 18px; bottom: 10px; }

  /* карточка блюда: фото слева, описание справа */
  #dish-overlay { align-items: center; padding: 8px; }
  #dish-overlay .modal-sheet {
    flex-direction: row; max-width: 780px; height: calc(var(--app-height, 100dvh) - 16px);
    border-radius: 18px; animation: overlayFadeIn 0.22s ease;
  }
  #dish-overlay .modal-photo { flex: 1; }
  #dish-overlay .modal-body { flex: 1.2; padding: 14px 18px; }
  .modal-title { font-size: 17px; }
  .modal-title-row { margin-bottom: 8px; }

  /* официанты: в ряд, аватары меньше */
  .waiter-grid { grid-template-columns: repeat(auto-fill, 92px); justify-content: center; max-width: 640px; gap: 10px; }
  .waiter-avatar { width: 48px; height: 48px; font-size: 15px; }

  /* PIN: слева официант и точки, справа клавиатура */
  #screen-pin .center-screen {
    display: grid; grid-template-columns: minmax(0, 1fr) 230px; column-gap: 32px;
    align-content: center; justify-items: center; padding: 4px 24px 10px;
  }
  #screen-pin .center-screen > * { grid-column: 1; }
  #screen-pin .pin-pad { grid-column: 2; grid-row: 1 / span 4; gap: 8px; }
  #screen-pin .pin-key { height: 46px; }
  #screen-pin .pin-dots { margin: 4px 0 0; }

  /* доставка: форма узкой колонкой по центру, ожидание подтверждения компактнее */
  .form-screen { padding: 10px max(18px, calc(50% - 220px)); }
  .order-code { font-size: 30px; margin-bottom: 10px; }
  .call-phone { margin-bottom: 12px; }
  .success-icon { font-size: 38px; margin-bottom: 6px; }
}

/* Фото хорошего качества в карточке блюда — поверх миниатюры, проявляется, когда загрузится */
.modal-photo img.photo-large { opacity: 0; transition: opacity 0.25s ease; }
.modal-photo img.photo-large.ready { opacity: 1; }

/* Фото не сохраняются долгим нажатием (iOS/Android) и перетаскиванием на рабочий стол. Полностью защитить нельзя —
   скриншот возможен всегда; оригиналы в полном размере сервер не отдаёт, только уменьшенные копии. */
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }

/* согласие на обработку персональных данных (доставка, самовывоз) */
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); cursor: pointer; }
.consent input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.consent a { color: var(--accent); }
.consent.invalid span { color: var(--danger, #C0392B); }

/* Статус заказа гостя: «Заказ №17 готовится · 1 из 3» → «Заказ №17 готов» */
.order-status { color: var(--accent-2, #A9835A); font-weight: 600; }
.order-status.ready { color: #3F7A3A; }
.success-status { font-size: 15px; text-align: center; margin: 12px 0 0; padding: 8px 14px; border-radius: 999px; background: var(--surface-2, #F5F6F8); }
.success-status.ready { background: #E4EDE2; }