/* Экран висит на стене кухни: читается с двух метров, работает пальцем в перчатке.
   Отсюда крупный шрифт, большие цели нажатия и тёмный фон — не слепит в смену. */
:root{
  --bg:#11151c; --panel:#1a212b; --line:#2a3542;
  --ink:#eef3f8; --mute:#8b9aab;
  --new:#4a9eff; --cook:#ffb020; --ready:#35c66b; --late:#ff4d4d;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;user-select:none}

.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;
  padding:10px 18px;background:#0d1117;border-bottom:1px solid var(--line)}
.brand{font-size:20px;font-weight:800;letter-spacing:.04em}
.brand .dot{color:var(--cook)}
.tabs{display:flex;gap:6px}
.tab{background:#182231;border:0;color:var(--mute);font-size:15px;font-weight:700;
  padding:9px 15px;border-radius:10px;cursor:pointer}
.tab b{font-weight:800;color:var(--cook);margin-left:4px}
.tab.on{background:#24405e;color:var(--ink)}
.counters{display:flex;gap:10px;flex:1}
.cnt{font-size:14px;font-weight:600;padding:5px 12px;border-radius:20px;
  background:#182231;color:var(--new)}
.cnt.cook{color:var(--cook)} .cnt.ready{color:var(--ready)}
.right{display:flex;align-items:center;gap:14px}
.clock{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.link{font-size:12px;color:var(--mute)}
.link.bad{color:var(--late)}
.tgl{background:#182231;border:0;color:var(--ink);font-size:17px;width:38px;height:38px;
  border-radius:10px;cursor:pointer;opacity:.45}
.tgl.on{opacity:1;background:#24405e}
/* переключатель языка всегда виден: это не режим, а состояние */
.tgl.lang{opacity:1;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--mute)}

.board{display:grid;gap:14px;padding:14px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));align-items:start}

.ticket{background:var(--panel);border-radius:14px;overflow:hidden;
  border-top:5px solid var(--new);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.ticket.cooking{border-top-color:var(--cook)}
.ticket.ready{border-top-color:var(--ready)}
.ticket.late{animation:pulse 1.6s ease-in-out infinite}
/* Светофор ожидания. Только что пришёл — короткая вспышка, чтобы поймать
   глазом; шесть минут — жёлтая обводка; двенадцать — красный пульс. */
.ticket.warn{box-shadow:0 0 0 2px rgba(255,176,32,.45),0 6px 18px rgba(0,0,0,.3)}
.ticket.fresh{animation:fresh 1.1s ease-out 3}
@keyframes fresh{0%{box-shadow:0 0 0 4px rgba(74,158,255,.55)}100%{box-shadow:0 6px 18px rgba(0,0,0,.3)}}
/* отменён в кассе: повар не должен доготовить то, за что не заплатят */
.ticket.cancelled{border-top-color:var(--late);opacity:.85}
.ticket.cancelled .items,.ticket.cancelled .thead{opacity:.5}
.cancel-flag{background:var(--late);color:#fff;font-size:15px;font-weight:800;
  letter-spacing:.03em;text-align:center;padding:8px 6px}
@keyframes pulse{50%{box-shadow:0 0 0 3px rgba(255,77,77,.5)}}

.thead{display:flex;align-items:baseline;gap:8px;padding:12px 14px 8px}
.tnum{font-size:22px;font-weight:800}
.ttable{flex:1;font-size:15px;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis}
/* час пробития чека: повар сверяет с часами на стене, а не считает минуты */
.twhen{font-size:15px;font-weight:700;color:#7f8ea0;font-variant-numeric:tabular-nums}
.twhen::before{content:"🕐 ";font-size:12px}
.ttime{font-size:17px;font-weight:800;color:var(--mute);font-variant-numeric:tabular-nums}
.ticket.warn .ttime{color:var(--cook)}
.ticket.late .ttime{color:var(--late)}
/* Комментарий к заказу — аллергии и «позвонить перед доставкой». Читается
   раньше блюд, поэтому крупнее списка и с сохранением переносов строк. */
.tcomment{margin:0 14px 8px;padding:8px 11px;background:#3a2c12;border-left:4px solid var(--cook);
  border-radius:6px;font-size:16px;font-weight:600;line-height:1.35;color:#ffe2b0;
  white-space:pre-line}
.tcomment:empty{display:none}

.items{list-style:none;padding:0 8px 6px}
.item{display:flex;align-items:flex-start;gap:10px;padding:11px 8px;border-radius:9px;
  border-bottom:1px solid var(--line);cursor:pointer}
.item:last-child{border-bottom:0}
.item .qty{min-width:34px;font-size:20px;font-weight:800;color:var(--cook);text-align:right}
.item .body{flex:1;min-width:0}
.item .name{font-size:18px;font-weight:600;line-height:1.25}
/* Модификаторы — часть блюда, а не примечание: «2× доп. сыр» меняет выдачу.
   Поэтому светлее и крупнее, чем обычный вторичный текст. */
.item .mods{font-size:15px;font-weight:600;color:#bcd4ea;margin-top:4px;line-height:1.3}
/* откуда блюдо: цех виден сразу, когда смотришь общий экран */
.item .st{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:5px;margin-right:6px;vertical-align:2px}
.st-kitchen{background:#43301a;color:#ffb861}
.st-cold{background:#193042;color:#7fc4ff}
.st-bar{background:#1e3a2a;color:#7fe0a5}
.st-none,.st-{background:#2a3542;color:var(--mute)}
/* Комментарий к блюду — «без лука». Своя плашка, чтобы не слипался
   с модификаторами и не терялся при беглом взгляде. */
.item .note{font-size:15px;font-weight:700;color:#ffdda6;margin-top:5px;
  padding:4px 8px;background:#3a2c12;border-radius:5px;white-space:pre-line}
.item .mark{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#0d1117}
.item.cooking{background:rgba(255,176,32,.09)}
.item.cooking .mark{border-color:var(--cook);background:var(--cook)}
.item.cooking .mark::after{content:"⏱"}
.item.ready{background:rgba(53,198,107,.1)}
.item.ready .name{text-decoration:line-through;color:var(--mute)}
.item.ready .mark{border-color:var(--ready);background:var(--ready)}
.item.ready .mark::after{content:"✓"}
/* Снята в кассе: строка остаётся, но видно, что готовить её не надо. */
.item.removed{cursor:default;background:rgba(255,77,77,.07)}
.item.removed .name{text-decoration:line-through;color:#8b9aab}
.item.removed .qty,.item.removed .mods{color:#6b7887;text-decoration:line-through}
.item.removed .mark{display:none}
.st-removed{background:#4a1c1c;color:#ff9b9b}
.item.served{opacity:.4}
.item.served .mark{border-color:var(--mute);background:var(--mute)}
.item.served .mark::after{content:"✓"}

.tactions{display:flex;gap:8px;padding:10px 12px 12px}
.btn{flex:1;border:0;border-radius:10px;padding:13px 6px;font-size:15px;font-weight:700;
  color:#0d1117;cursor:pointer}
.btn.cook{background:var(--cook)}
.btn.ready{background:var(--ready)}
.btn.ghost{flex:0 0 84px;background:#222d3b;color:var(--mute)}
.btn:active{transform:translateY(1px)}

.empty[hidden]{display:none}   /* без этого display:flex перебивает атрибут hidden */
.empty{position:fixed;inset:56px 0 0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;pointer-events:none}
.empty .big{font-size:30px;font-weight:800;color:#2f3d4e}
.empty .sub{font-size:15px;color:#243040}

@media (max-width:900px){ .counters{display:none} }
@media (max-width:640px){
  .board{grid-template-columns:1fr;padding:10px;gap:10px}
  .tab{padding:8px 11px;font-size:14px}
  .bar{gap:8px;padding:8px 10px}
  .brand{display:none}
}