:root{
  --bg:#13161a; --col:#1c2025; --card:#252b32; --line:#2e343c;
  --text:#f3f5f8; --muted:#8d95a2;
  --ready:#2faa4a; --ready-hi:#38c357; --late:#e0453a; --vynis:#f0b858; --deliv:#7fb5f0;
  --loko:#8b5cf6; --loko-bg:#241b3d; --loko-card:#30244f;
  --choice:#f0902b; --choice-bg:#3a2612; --choice-card:#4c3318;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;user-select:none}

.top{display:flex;align-items:center;gap:8px;padding:8px 12px}
.top b{font-size:15px;margin-right:6px}
.top .st{font-size:11px;color:var(--muted);margin-left:auto}
.top .st.stale{color:var(--late);font-weight:700}
.tab{font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;
  background:#272d35;color:var(--muted);cursor:pointer}
.tab.on{background:#414954;color:var(--text)}
.tab .n{opacity:.65;margin-left:4px}

.board{display:flex;gap:9px;padding:0 12px 6px;height:calc(100% - 72px);
  overflow-x:auto;overflow-y:hidden;align-items:flex-start}
/* Карточка ровно по своему содержимому: растянутая на всю высоту доска оставляла под
   короткими заказами пустые тёмные столбы. Длинный заказ упирается в высоту доски и
   скроллится внутри себя. */
.order{flex:0 0 250px;background:var(--col);border-radius:10px;
  display:flex;flex-direction:column;overflow:hidden;max-height:100%}

/* Заказ из интеграции подсвечен целиком, чтобы его не спутали с пробитым на кассе:
   LOKO (курьер) — фиолетовый, Choice (самовывоз) — оранжевый. */
.order.ext-loko{background:var(--loko-bg);box-shadow:inset 0 0 0 2px var(--loko)}
.order.ext-loko .ohead{border-bottom-color:#443566}
.order.ext-loko .item{background:var(--loko-card)}
.order.ext-choice{background:var(--choice-bg);box-shadow:inset 0 0 0 2px var(--choice)}
.order.ext-choice .ohead{border-bottom-color:#5e4323}
.order.ext-choice .item{background:var(--choice-card)}

.ohead{padding:7px 10px 8px;border-bottom:1px solid var(--line);position:relative;flex:none}
.onum{font-size:18px;font-weight:900;letter-spacing:-.02em;line-height:1.05}
.oclock{position:absolute;right:10px;top:10px;font-size:11px;font-weight:800;color:var(--muted)}
.oclock.late{color:var(--late)}
.otags{display:flex;gap:4px;align-items:center;margin-top:5px;flex-wrap:wrap}
.tag{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;background:#333a43;color:var(--muted)}
.tag.vynis{background:#4a3a1c;color:var(--vynis)}
.tag.deliv{background:#1d3550;color:var(--deliv)}
.tag.choice{background:#2b2342;color:#b9a6f0}
.tag.loko{background:#1f3a2c;color:#7ed0a0}
/* Оплачен чек или нет — первое, что спрашивают на выдаче, поэтому крупнее остальных плашек. */
.tag.pay{font-size:12px;padding:3px 8px;letter-spacing:.02em}
.tag.paid{background:#1f8a44;color:#fff}
.tag.unpaid{background:#e0605a;color:#fff}
.tag.pre{font-size:12px;padding:3px 8px;background:var(--vynis);color:#121212}
.osub{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.3}
/* Подпись к чеку — чаще всего имя гостя («Оля», «Цех»), по ней заказ и находят на выдаче. */
.ocomment{margin-top:5px;font-size:12px;font-weight:800;color:#cfe3ff;
  background:#223247;border-radius:5px;padding:3px 7px;display:inline-block;
  max-width:100%;overflow-wrap:anywhere;white-space:pre-line}

.items{flex:1;overflow-y:auto;padding:7px 7px 2px}
/* Заголовок цеха внутри заказа. Пустой — когда весь заказ из одного цеха. */
.shop{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);
  padding:3px 2px 4px}
.shop:empty{display:none}
.item{border-radius:7px;overflow:hidden;margin-bottom:6px;background:var(--card)}
.iname{display:flex;gap:7px;align-items:baseline;padding:7px 9px 3px;
  font-size:13px;font-weight:700;line-height:1.18}
.iqty{color:#fff;font-weight:900;background:#394250;border-radius:4px;
  padding:0 5px;font-size:12px;flex:none;white-space:nowrap}
/* Состав, который не виден по названию: соусы в сете. Тише модификаторов — это не
   пожелание гостя, а просто напоминание, что положить в коробку. */
.inote{padding:1px 9px 5px;font-size:11px;font-weight:600;line-height:1.25;color:#a8b2c0}
.imods{padding:0 9px 6px;display:flex;flex-wrap:wrap;gap:4px}
/* Модификаторы нейтральные: они просто уточняют блюдо. Цветом кричит только
   комментарий гостя — его нельзя пролистать глазами. */
.mod{font-size:10px;font-weight:700;color:#c3cbd6;background:#39414c;border-radius:4px;padding:1px 6px}
/* Комментарий к блюду («Без кінзи!!!») — это требование гостя, его нельзя пролистать
   глазами наравне с добавками, поэтому цвет тревожный, а не как у модификаторов. */
.icomment{margin:0 9px 7px;font-size:12px;font-weight:800;line-height:1.25;
  color:#fff;background:#8c2a22;border-radius:5px;padding:4px 7px;overflow-wrap:anywhere}

.done{display:block;width:100%;border:none;font-family:inherit;font-size:14px;font-weight:800;
  color:#fff;padding:8px;background:var(--ready);cursor:pointer}
.done:active{background:var(--ready-hi)}

.past .items{opacity:.6}
.back{display:block;width:calc(100% - 14px);border:none;font-family:inherit;font-size:12px;
  font-weight:700;color:var(--text);padding:9px;background:#39414c;cursor:pointer;
  border-radius:7px;margin:7px}
.empty{color:var(--muted);padding:40px 14px;font-size:14px}

/* Фирменная плашка — та же, что на складском дашборде. */
.foot{height:30px;display:flex;align-items:center;justify-content:flex-end;gap:7px;
  padding:0 14px;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:22px;letter-spacing:-.02em;color:#fff;pointer-events:none;user-select:none}
.foot .wm-greco{font-weight:900}
.foot .wm-tech{font-weight:800}

/* Заставка при открытии: три секунды и уходит. Анимируем opacity, а не background —
   WebView в Fully Kiosk не интерполирует сокращённую запись background (учтено на ТВ склада). */
.splash{position:fixed;inset:0;z-index:50;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  animation:splash-out .5s ease 2.5s forwards}
.splash .sp-hi{font-size:26px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.splash .sp-brand{font-size:76px;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--text)}
@keyframes splash-out{to{opacity:0;visibility:hidden}}