/* Мини-апп задержек кухни Homo: нативный iOS-вид.
   Слой содержимого - обычные непрозрачные карточки. Стекло (Liquid Glass) только на плавающих
   элементах управления: нижняя панель и переключатель «Все / Кухня / Подача».
   Схема: data-scheme=light|dark, из темы Telegram. */

:root {
  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --r-card: 22px; --r-tile: 12px;
  --top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --nav-h: 44px;
  --bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --tab-h: 64px;
  /* impeccable-disable-next-line bounce-easing: выброс около 6% только на органах управления (тумблер, вкладки, плитки), как в iOS; по заданию анимация как у Apple */
  --spring: cubic-bezier(.32, 1.25, .5, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1); /* появление контента: без выброса */
}
[data-scheme="light"] {
  --bg: #f2f2f7; --card: #fff; --label: #000; --label2: rgba(60,60,67,.78); --label3: rgba(60,60,67,.32);
  --sep: rgba(60,60,67,.14); --fill: rgba(120,120,128,.14); --fill2: rgba(120,120,128,.09);
  --blue: #007aff; --red: #ff3b30; --orange: #ff9500; --green: #34c759;
  --red-t: #c50013; --orange-t: #a94a00; --green-t: #1c7c3a; --blue-t: #005fc9; --blue-fill: #0062d6;   /* цвета для текста: достаточный контраст на белом */
  --glass: rgba(255,255,255,.66); --glass-line: rgba(255,255,255,.7); --glass-shadow: 0 10px 34px rgba(0,0,0,.16);
  --thumb: rgba(255,255,255,.95); --thumb-shadow: 0 2px 10px rgba(0,0,0,.16);
  --hero-late: linear-gradient(140deg, #b91c1c 0%, #d63a26 100%);
  --hero-wait: linear-gradient(140deg, #ffc247 0%, #ff9f0a 100%); --hero-wait-ink: #2a1800;
  --hero-ok: linear-gradient(140deg, #0f7530 0%, #17853e 100%);
  --hero-idle: linear-gradient(140deg, #3a5bd9 0%, #506de2 100%);
  --hero-off: linear-gradient(140deg, #5f6572 0%, #6f7582 100%);
}
[data-scheme="dark"] {
  --bg: #000; --card: #1c1c1e; --label: #fff; --label2: rgba(235,235,245,.68); --label3: rgba(235,235,245,.32);
  --sep: rgba(84,84,88,.6); --fill: rgba(120,120,128,.36); --fill2: rgba(120,120,128,.24);
  --blue: #0a84ff; --red: #ff453a; --orange: #ff9f0a; --green: #30d158;
  --red-t: #ff6961; --orange-t: #ffb340; --green-t: #4ade80; --blue-t: #5eaaff; --blue-fill: #0a6fe0;
  --glass: rgba(44,44,48,.58); --glass-line: rgba(255,255,255,.16); --glass-shadow: 0 10px 34px rgba(0,0,0,.6);
  --thumb: rgba(120,120,128,.38); --thumb-shadow: none;
  --hero-late: linear-gradient(140deg, #9f1a1a 0%, #c9341f 100%);
  --hero-wait: linear-gradient(140deg, #e8a11c 0%, #d98200 100%); --hero-wait-ink: #1c1000;
  --hero-ok: linear-gradient(140deg, #0f6a2d 0%, #16853c 100%);
  --hero-idle: linear-gradient(140deg, #2b45b8 0%, #4560e6 100%);
  --hero-off: linear-gradient(140deg, #4b5160 0%, #626a7a 100%);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 17px/1.29 var(--font); letter-spacing: -.01em; color: var(--label); background: var(--bg);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

body { overflow: hidden; }

/* ---------- стекло ---------- */
.glass { background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--sep); }
}

/* ---------- навигационная панель: маленький заголовок появляется при прокрутке ---------- */
.navbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: calc(var(--top) + var(--nav-h)); padding-top: var(--top);
  display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: .5px solid transparent; opacity: 0; transition: opacity .2s, border-color .2s; pointer-events: none; }
.navbar.on { opacity: 1; border-bottom-color: var(--sep); }
.nav-title { font-weight: 600; font-size: 17px; }

.large { padding: 6px 4px 0; }
.large h1 { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .37px; }
.large p { display: flex; align-items: center; gap: 6px; min-height: 22px; margin-top: 2px; font-size: 15px; color: var(--label2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.dot.off { background: var(--red); }

/* ---------- гифки и стикеры ---------- */
.gif { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gif[data-gif] { cursor: pointer; }
.sticker { width: 124px; height: 124px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }

/* ---------- главная карточка-сводка ---------- */
.hero { position: relative; overflow: hidden; margin-top: 14px; min-height: 170px; padding: 18px 138px 18px 20px; border-radius: 28px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px -12px rgba(0,0,0,.45); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hero::before { content: ""; position: absolute; right: -30px; top: -30px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.34), rgba(255,255,255,0) 68%); pointer-events: none; }
.hero .sticker { position: absolute; right: 12px; top: 50%; margin-top: -62px; }
.hero .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .88; }
.hero h2 { font-size: 27px; line-height: 31px; font-weight: 700; letter-spacing: .2px; }
.hero .sub { font-size: 15px; line-height: 20px; opacity: .95; }
.hero.late { background: var(--hero-late); } .hero.ok { background: var(--hero-ok); } .hero.idle { background: var(--hero-idle); }
.hero.off { background: var(--hero-off); }
.hero.wait { background: var(--hero-wait); color: var(--hero-wait-ink); }
.hero.wait::before { background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 68%); }
@media (max-width: 360px) { .hero { padding-right: 112px; } .sticker { width: 104px; height: 104px; } .hero .sticker { margin-top: -52px; } .hero h2 { font-size: 24px; line-height: 28px; } }

/* ---------- плитки ---------- */
.tiles, .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tiles.two .tile { grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 72px; }
.tiles.two .tile .gif { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; }
.tile { display: grid; justify-items: start; gap: 2px; padding: 12px; border-radius: 20px; background: var(--card); text-align: left; min-height: 104px; }
button.tile:active { transform: scale(.97); transition: transform .12s; }
.tile .gif { width: 38px; height: 38px; margin-bottom: 2px; }
.tile b { font-size: 30px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.tile span { font-size: 13px; line-height: 16px; color: var(--label2); }
.tile.late b { color: var(--red-t); } .tile.unserved b { color: var(--orange-t); } .tile.zero b { color: var(--label3); }
.tiles.two .tile b { font-size: 28px; line-height: 30px; align-self: end; } .tiles.two .tile span { align-self: start; }
/* главные плитки как виджет iOS: значок и число сверху, подпись снизу на всю ширину (15 px, плотнее по цвету); на 360 px без переноса */
.tiles.two .tile { grid-template-columns: 40px 1fr; column-gap: 10px; row-gap: 2px; min-height: 0; }
.tiles.two .tile .gif { grid-row: 1; width: 40px; height: 40px; }
.tiles.two .tile b { align-self: center; }
.tiles.two .tile span { grid-column: 1 / -1; align-self: start; font-size: 15px; line-height: 18px; font-weight: 500; color: color-mix(in srgb, var(--label) 82%, transparent); }

/* ---------- секции и группированные списки ---------- */
.sec { margin-top: 26px; }
.sec-h { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 16px 7px; font-size: 13px; line-height: 18px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--label2); }
.sec-h .gif { width: 22px; height: 22px; }
.sec-h em { margin-left: auto; font-style: normal; text-transform: none; font-variant-numeric: tabular-nums; }
.sec-f { margin: 7px 16px 0; font-size: 13px; line-height: 18px; color: var(--label2); }
.list { list-style: none; padding: 0; overflow: hidden; border-radius: var(--r-card); background: var(--card); }
.list > * + *::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: .5px; background: var(--sep); }

.row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 12px 16px 12px 14px; }
.ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-tile); background: var(--fill2); }
.ico .gif { width: 32px; height: 32px; }
.late .ico { background: color-mix(in srgb, var(--red) 16%, transparent); }
.unserved .ico { background: color-mix(in srgb, var(--orange) 18%, transparent); }
.ready .ico, .onway .ico { background: color-mix(in srgb, var(--green) 16%, transparent); }
.t1 { font-size: 17px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2 { font-size: 15px; line-height: 20px; color: var(--label2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.val { min-width: 64px; text-align: right; line-height: 1.1; } /* колонка минут одной ширины: полоски прогресса в списке выровнены */
.val b { display: block; font-size: 24px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.val span { display: block; font-size: 13px; line-height: 16px; color: var(--label2); white-space: nowrap; }
.late .val b { color: var(--red-t); } .unserved .val b { color: var(--orange-t); }
.chip { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 9px; font-size: 12px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.late .chip { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red-t); }
.unserved .chip { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange-t); }
.bar { height: 5px; margin-top: 7px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--green);
  clip-path: inset(0 calc(100% - var(--w, 0%)) 0 0 round 3px); transition: clip-path .6s var(--ease-out); }
.bar i.mid { background: var(--orange); } .bar i.hot { background: var(--red); }

/* ---------- пустые состояния ---------- */
.empty { display: grid; justify-items: center; gap: 6px; padding: 30px 24px 10px; text-align: center; }
.empty .sticker { width: 152px; height: 152px; margin-bottom: 6px; }
.empty h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
.empty p { max-width: 280px; color: var(--label2); font-size: 15px; line-height: 20px; }
.note { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 16px; border-radius: var(--r-card); background: var(--card); }
.note .gif { width: 44px; height: 44px; }
.note p { font-size: 14px; line-height: 19px; color: var(--label2); }
.note b { display: block; margin-bottom: 1px; color: var(--label); font-size: 15px; font-weight: 600; }

/* ---------- Сегодня ---------- */
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 40px; padding: 3px; margin-top: 14px; border-radius: 20px; }
.seg .pill { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 17px; background: var(--thumb); box-shadow: var(--thumb-shadow);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .38s var(--spring); }
.seg button { position: relative; z-index: 1; font-size: 14px; font-weight: 600; border-radius: 17px; color: var(--label2); transition: color .2s; }
.seg button[aria-pressed="true"] { color: var(--label); }
.ev .at { display: block; margin-top: 1px; font-size: 13px; line-height: 16px; color: var(--label2); font-variant-numeric: tabular-nums; }

/* ---------- Настройки ---------- */
.me { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 26px; background: var(--card); }
.me .av { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--hero-idle); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.me .av .gif { width: 50px; height: 50px; }
.me b { display: block; font-size: 20px; line-height: 25px; font-weight: 700; }
.me span { color: var(--label2); font-size: 15px; }
.set { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px 8px 14px; }
.set .ico { width: 36px; height: 36px; border-radius: 9px; }
.set .ico .gif { width: 26px; height: 26px; }
.set .k { font-size: 17px; line-height: 22px; }
.set .k small { display: block; font-size: 13px; line-height: 17px; color: var(--label2); }
.tint-orange .ico { background: color-mix(in srgb, var(--orange) 20%, transparent); }
.tint-red .ico { background: color-mix(in srgb, var(--red) 18%, transparent); }
.tint-blue .ico { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.tint-green .ico { background: color-mix(in srgb, var(--green) 20%, transparent); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper output { min-width: 30px; text-align: right; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper .btns { display: flex; height: 36px; border-radius: 10px; background: var(--fill); overflow: hidden; }
.stepper button { width: 44px; font-size: 22px; line-height: 1; font-weight: 500; }
.stepper button + button { border-left: .5px solid var(--sep); }
.stepper button:active { background: var(--fill); }
.switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: var(--fill); transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.25); transition: transform .3s var(--spring); }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.link { color: var(--blue-t); font-size: 17px; }
.link.danger { color: var(--red-t); }
.act { min-height: 44px; padding: 0 4px; }
.share { display: grid; gap: 10px; margin-top: 10px; padding: 14px 16px; border-radius: var(--r-card); background: var(--card); }
.share code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--fill2); font: 500 13px/18px ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; letter-spacing: 0; }
.share .btns { display: flex; gap: 10px; }
.btn { flex: 1; min-height: 46px; border-radius: 23px; font-weight: 600; background: var(--fill); }
.btn.main { background: var(--blue-fill); color: #fff; }

/* ---------- нижняя панель ---------- */
.edge { position: fixed; z-index: 29; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + var(--bottom) + 46px); pointer-events: none;
  background: linear-gradient(to top, var(--bg) 25%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.tabbar { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--bottom) + 10px); transform: translateX(-50%);
  width: min(calc(100% - 32px), 400px); height: var(--tab-h); padding: 4px; border-radius: 36px; display: grid; grid-template-columns: repeat(3, 1fr); }
.thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 32px; background: var(--thumb);
  box-shadow: var(--thumb-shadow); transition: scale .3s var(--spring), filter .25s; will-change: transform; }
.tabbar button { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: 32px; color: var(--label2);
  font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0; transition: color .2s; }
.tabbar button[aria-selected="true"] { color: var(--blue-t); }
.badge { position: absolute; top: 3px; left: calc(50% + 13px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff;
  font-size: 12px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--glass); }

.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--tab-h) + var(--bottom) + 28px); transform: translateX(-50%); max-width: calc(100% - 48px);
  padding: 10px 18px; border-radius: 22px; background: var(--label); color: var(--bg); font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.3); animation: pop .3s var(--ease-out); }

/* ---------- движение ---------- */
@keyframes bounce { 0% { transform: scale(.82); } 100% { transform: scale(1); } }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.94); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: rise .4s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 45ms); }
}
@media (prefers-reduced-motion: reduce) { .thumb, .switch::after, .seg .pill, .bar i, .tabico { transition: none; } }

/* ---------- страницы в горизонтальной ленте: у каждой своя вертикальная прокрутка ---------- */
#pager { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
#track { display: flex; width: 300%; height: 100%; will-change: transform; }
.pane { flex: 0 0 33.3333%; width: 33.3333%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; padding-top: calc(var(--top) + var(--nav-h)); padding-bottom: calc(var(--tab-h) + var(--bottom) + 40px); will-change: transform, opacity; }
.tab { padding: 0 16px; max-width: 560px; margin: 0 auto; }
.sec { scroll-margin-top: calc(var(--top) + var(--nav-h) + 10px); }
#pager.swiping, #pager.swiping * { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.tabbar { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.tabbar.pressed { cursor: grabbing; }
.tabbar.pressed .thumb { scale: 1.12; filter: brightness(1.05) saturate(1.15); }        /* стекло «приподнимается» сразу при касании */
@keyframes xfade { from { opacity: .55; } }
#pager.xfade { animation: xfade .18s ease-out; }                                        /* при «уменьшении движения» вместо езды - проявление */
.pane { scrollbar-width: none; } .pane::-webkit-scrollbar { display: none; }

/* значки вкладок: цветные, непрозрачные эмодзи; выбранный крупнее и играет анимацию */
.tabico { width: 30px; height: 30px; object-fit: contain; transform: scale(.94); filter: drop-shadow(0 2px 3px rgba(0,0,0,.22)); transition: transform .4s var(--spring); pointer-events: none; }
.tabbar button[aria-selected="true"] .tabico { transform: scale(1.16) translateY(-1px); }