/* woff2 стоит первым и забирает на себя все живые браузеры: те же шрифты
 * весят 269 КБ вместо 913 КБ у ttf, а качаются они при каждом первом
 * открытии. ttf оставлен запасным вариантом — если woff2 поддерживается,
 * браузер его даже не запросит. */
@font-face {
  font-family: "PT Sans";
  src: url("fonts/PT_Sans-Web-Regular.woff2?v=39a0e43efc") format("woff2"),
       url("fonts/PT_Sans-Web-Regular.ttf?v=9cc8314905") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("fonts/PT_Sans-Web-Bold.woff2?v=42c146434f") format("woff2"),
       url("fonts/PT_Sans-Web-Bold.ttf?v=3128bd5ecf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink-rgb: 78, 89, 89;
  --bg: #f7f3e7;
  --card: #ffffff;
  --card-press: #f4efe3;
  --text: #2f3636;
  --text-2: #3a4242;
  --muted: #5f6a6a;
  --faint: #a9b0b0;
  --sep: rgba(78, 89, 89, 0.12);
  --fill: rgba(78, 89, 89, 0.09);
  --ink: #4e5959;
  --on-ink: #f7f3e7;
  --accent: #e9c51d;
  --on-accent: #2f3636;
  --accent-soft: #f3e6b0;
  --warn-bg: #fbefc0;
  --warn-ink: #7d6509;
  --glass: rgba(255, 253, 246, 0.94);
  --veil: rgba(247, 243, 231, 0.9);
  --shadow: 0 8px 28px rgba(47, 54, 54, 0.14);
  --pattern-image: url('images/pattern-tile-ink.png');

  --font: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* анимации: см. спецификацию «Анимации» на холсте дизайна */
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --ease-std: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-press: 120ms;
  --t-micro: 200ms;
  --t-std: 280ms;
  --t-screen: 380ms;
  --t-spring: 450ms;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --tg-row: 0px;
  --top-inset: calc(var(--safe-top) + var(--tg-row));
  --compact-row: 50px;
  --compact-pad: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-rgb: 234, 230, 221;
    --bg: #21272a;
    --card: #2b3235;
    --card-press: #333b3e;
    --text: #eae6dd;
    --text-2: #d9d4c9;
    --muted: #a3acab;
    --faint: #6f7979;
    --sep: rgba(234, 230, 221, 0.12);
    --fill: rgba(234, 230, 221, 0.1);
    --ink: #3b4548;
    --on-ink: #eae6dd;
    --accent-soft: rgba(233, 197, 29, 0.22);
    --warn-bg: rgba(233, 197, 29, 0.16);
    --warn-ink: #e3c531;
    --glass: rgba(43, 50, 53, 0.94);
    --veil: rgba(33, 39, 42, 0.9);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    --pattern-image: url('images/pattern-tile-cream.png');
  }
}

/* ---------- загрузочный экран ---------- */

@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-spin-rev { to { transform: rotate(-360deg); } }
@keyframes splash-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.975); opacity: 0.9; }
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f7f3e7;
  transition: opacity 0.35s ease;
}

.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('images/pattern-tile-ink.png');
  background-size: 104px auto;
  opacity: 0.06;
  pointer-events: none;
}

.splash.hide {
  opacity: 0;
  pointer-events: none;
}

.splash-rings {
  position: relative;
  width: 232px;
  height: 232px;
  display: grid;
  place-items: center;
}

.splash-ring { position: absolute; }
.splash-ring-outer { animation: splash-spin 2.4s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite; }
.splash-ring-inner { animation: splash-spin-rev 6s linear infinite; }

.splash-logo {
  position: relative;
  z-index: 1;
  height: 150px;
  width: auto;
  animation: splash-breathe 2.8s ease-in-out infinite;
}

.splash-word {
  position: relative;
  margin-top: 52px;
  width: min(300px, 74vw);
  height: auto;
}

.splash-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 13px;
  line-height: 1;
  color: rgba(78, 89, 89, 0.45);
}


* { box-sizing: border-box; }

html, body {
  height: 100%;
  /* iOS сам раздувает мелкий текст на длинных страницах — запрещаем */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; }
a { color: var(--warn-ink); }

#bg-pattern {
  position: fixed;
  inset: 0;
  background-image: var(--pattern-image);
  background-size: 104px auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

#app { position: fixed; inset: 0; z-index: 1; }

/* ---------- стек экранов ---------- */

#stage { position: absolute; inset: 0; overflow: hidden; }

.screen {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transition: transform var(--t-screen) var(--ease-ios);
}
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern-image);
  background-size: 104px auto;
  opacity: 0.06;
  pointer-events: none;
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1c2222;
  opacity: var(--dim, 0);
  pointer-events: none;
  transition: opacity var(--t-screen) var(--ease-ios);
}
.screen.is-top { box-shadow: -10px 0 30px rgba(47, 54, 54, 0.12); }
.screen.is-under { transform: translateX(-30%); --dim: 0.16; }
.screen.is-buried { visibility: hidden; }
.screen.is-under.morph-under { transform: none; --dim: 0; }
.screen.no-anim, .screen.no-anim::after { transition: none !important; }

.scroller {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }

.screen-inner {
  position: relative;
  isolation: isolate; /* z-index карт при раздаче не выходит за экран — не лезет поверх меню */
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: calc(var(--top-inset) + 14px) 16px calc(120px + var(--safe-bottom));
}

.compact {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--top-inset) + var(--compact-row));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--top-inset) - var(--tg-row)) var(--compact-pad) 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.compact.on { pointer-events: auto; }
.compact-title {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-back[hidden] { display: none; }
.compact-back {
  position: absolute;
  left: 4px;
  top: calc(var(--top-inset) + 3px);
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- «потяните, чтобы обновить» ----------
   Полоска живёт над списком и в обычном состоянии сжата в ноль, поэтому
   ничего не занимает и не сдвигает содержимое. */

.refresh-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top-inset) + 4px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
}
.refresh-hint.armed, .refresh-hint.refreshing { color: var(--text); }
.refresh-hint.armed .refresh-ring { transform: scale(1.12); }
.refresh-ring { transition: transform var(--t-micro) var(--spring); }
.refresh-hint.refreshing .refresh-ring { animation: spin 0.8s linear infinite; }
.refresh-hint.settling { transition: opacity var(--t-std) var(--ease-ios), transform var(--t-std) var(--ease-ios); }
.screen-inner.pull-settle { transition: transform var(--t-std) var(--ease-ios); }

.edge {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  z-index: 5;
  touch-action: none;
  display: none;
}
.edge.on { display: block; }

/* ---------- типографика и базовые блоки ---------- */

.large-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  transform-origin: 0 50%;
  will-change: transform, opacity;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.title-block { display: flex; flex-direction: column; gap: 8px; }

.navback {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  margin: -6px 0 -10px -6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  align-self: flex-start;
}

.gh {
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 16px 6px;
}

.group { background: var(--card); border-radius: 14px; overflow: hidden; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 12px 0 14px;
  border: 0;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-press) ease;
}
.row.pressed, .row:active { background: var(--card-press); }
.row + .row .row-body, .row-sep + .row .row-body { border-top: 1px solid var(--sep); }
.row-body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px 0;
}
.row-text { flex-grow: 1; min-width: 0; }
.row-title { font-size: 17px; line-height: 1.25; }
.row-sub { font-size: 14px; line-height: 1.3; color: var(--muted); margin-top: 2px; }
.row-trail { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.chev { color: var(--faint); flex-shrink: 0; }

.tile {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ty { background: var(--accent); color: var(--on-accent); }
.ti { background: var(--ink); color: var(--on-ink); }
.ts { background: var(--accent-soft); color: var(--ink); }
@media (prefers-color-scheme: dark) { .ts { color: var(--text); } }

.badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
@media (prefers-color-scheme: dark) { .badge { color: var(--text); } }

.kv {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.3;
}
.kv + .kv { border-top: 1px solid var(--sep); }
.kv-key { color: var(--muted); flex-shrink: 0; }
.kv-val { font-weight: 700; text-align: right; }
.kv-val.copyable { color: var(--warn-ink); cursor: pointer; }

.empty-state, .loading-state, .error-state {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}
.loading-state::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2.5px solid var(--sep);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- чипы и сегменты ---------- */

.chips {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  border: 1px solid var(--sep);
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-micro) ease, color var(--t-micro) ease, transform var(--t-press) var(--ease-std);
}
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 700; }
.chip.pressed, .chip:active { transform: scale(0.94); }

.seg {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: 12px;
  background: var(--fill);
}
.seg-plate {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  border-radius: 9px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(47, 54, 54, 0.15);
  transition: transform var(--t-spring) var(--spring);
}
.seg-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  height: 34px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  transition: color var(--t-micro) ease;
}
.seg-btn.active { color: var(--text); font-weight: 700; }

/* ---------- главная ---------- */

.home-head { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.home-logo { width: 38px; height: 59px; object-fit: contain; }
.home-title { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; }
.home-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--card);
  color: var(--muted);
  font-size: 17px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(47, 54, 54, 0.06);
  cursor: pointer;
}
.quick { display: flex; justify-content: space-between; gap: 8px; }
.quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 74px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.quick-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.news::-webkit-scrollbar { display: none; }
.news-card {
  flex-shrink: 0;
  width: 150px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.news-img {
  width: 150px;
  height: 150px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
}
.news-title { margin-top: 6px; font-size: 15px; line-height: 1.25; }

/* ---------- карточка напитка ---------- */

.stats { display: flex; gap: 12px; }
.stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}
.stat.dark { background: var(--ink); color: var(--on-ink); }
.stat-label {
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.stat.dark .stat-label { color: var(--accent); }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 2px; line-height: 1.15; }
.stat-value.small { font-size: 18px; margin-top: 6px; line-height: 1.2; }

.roll { display: inline-block; }
.roll.go { animation: roll-in var(--t-std) var(--ease-std) both; }
@keyframes roll-in { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }

.item-photo { width: 100%; border-radius: 18px; object-fit: cover; max-height: 320px; }

.callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text-2);
}
.callout-icon { flex-shrink: 0; font-size: 18px; line-height: 1.3; }

/* ---------- блоки Notion ---------- */

.blocks { display: flex; flex-direction: column; gap: 12px; }
.b-h1 { margin: 10px 0 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.b-h2 { margin: 8px 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.b-h3 { margin: 4px 0 -4px; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.b-p { font-size: 17px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; }
.b-list {
  margin: 0;
  padding: 12px 16px 12px 36px;
  border-radius: 14px;
  background: var(--card);
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-2);
}
.b-list li + li { margin-top: 6px; }
.b-list .b-list { padding: 6px 0 0 20px; background: none; }
.b-divider { height: 1px; border: 0; background: var(--sep); margin: 4px 0; }
.b-children { margin-top: 6px; }

.b-toggle { border-radius: 14px; background: var(--card); overflow: hidden; }
.b-toggle > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 14px 0 16px;
  font-size: 17px;
  cursor: pointer;
}
.b-toggle > summary::-webkit-details-marker { display: none; }
.b-toggle > summary .chev { margin-left: auto; transition: transform var(--t-micro) var(--ease-std); }
.b-toggle[open] > summary .chev { transform: rotate(90deg); }
.b-toggle-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.b-toggle-body .b-list { padding: 0 0 0 20px; background: none; }

.b-video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.b-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.85; }
.b-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 30px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- зерно ---------- */

.bean-list { display: flex; flex-direction: column; gap: 10px; }
.bean {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-std);
}
.bean.pressed, .bean:active { transform: scale(0.98); }
.bean-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bean-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.bean-where { font-size: 14px; color: var(--muted); margin-top: 2px; }
.bean-esp {
  flex-shrink: 0;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.bean-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bean-tags .badge.muted { background: var(--fill); }

/* ---------- помолы ---------- */

.grind { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.grind + .grind { border-top: 1px solid var(--sep); }
.grind-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; }
.grind-val {
  min-width: 58px;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.grind-track { position: relative; height: 6px; border-radius: 3px; background: var(--fill); }
.grind-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--ink); }
@media (prefers-color-scheme: dark) { .grind-fill { background: var(--text); } }

/* ---------- чек-лист ---------- */

.progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--on-ink);
}
.progress-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.progress-count { font-size: 22px; font-weight: 700; }
.progress-track { height: 8px; border-radius: 4px; background: rgba(247, 243, 231, 0.2); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 4px; background: var(--accent); transition: width var(--t-spring) var(--ease-ios); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  background: var(--card);
  text-align: left;
  cursor: pointer;
}
.check + .check { border-top: 1px solid var(--sep); }
.check.sub { padding-left: 50px; }
.check-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 12px;
  border: 2px solid rgba(var(--ink-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-micro) ease, border-color var(--t-micro) ease, transform var(--t-std) var(--spring);
}
.check-box path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--t-std) var(--ease-std);
}
.check-text {
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 1.5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 320ms var(--ease-std) 80ms, color var(--t-micro) ease;
}
.check.on .check-box { background: var(--accent); border-color: var(--accent); }
.check.on .check-box path { stroke-dashoffset: 0; transition-delay: 60ms; }
.check.on .check-text { color: var(--faint); background-size: 100% 1.5px; }
.check.pressed .check-box { transform: scale(0.88); }

.confetti { position: fixed; left: 50%; bottom: 190px; width: 0; height: 0; z-index: 20; pointer-events: none; }
.confetti span {
  position: absolute;
  left: -8px;
  top: -10px;
  animation: confetti 1150ms var(--ease-std) both;
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 0; }
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(170px + var(--safe-bottom));
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 23px;
  background: #2f3636;
  color: #f7f3e7;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(47, 54, 54, 0.25);
  animation: toast-in 420ms var(--spring) both;
}
.toast.out { animation: toast-out 300ms var(--ease-ios) both; }
@keyframes toast-out {
  from { transform: translate(-50%, 0); opacity: 1; }
  to { transform: translate(-50%, 16px); opacity: 0; }
}
@keyframes toast-in {
  from { transform: translate(-50%, 24px) scale(0.92); opacity: 0; }
  to { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* ---------- плавающее меню и поиск ---------- */

.dock {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: max(16px, var(--safe-bottom));
  height: 62px;
  z-index: 10;
  max-width: 560px;
  margin: 0 auto;
  transition: transform 320ms var(--ease-ios), opacity 240ms ease;
}
.dock.searching { transform: translateY(130px); }
/* Прячем на месте — чуть вниз и в прозрачность, не за край экрана: на iOS
   слой с backdrop-filter, едва задев нижний край, пропадает целиком. */
.dock.hidden { transform: translateY(22px) scale(0.96); opacity: 0; pointer-events: none; }

.capsule {
  position: absolute;
  left: 0;
  top: 0;
  right: 72px;
  height: 62px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  border-radius: 31px;
  background: var(--glass);
  border: 1px solid var(--sep);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transform-origin: 0 50%;
  transition: opacity 250ms ease, transform var(--t-screen) var(--ease-ios);
}
.tab-pill {
  position: absolute;
  left: 0;
  top: 4px;
  height: 52px;
  border-radius: 26px;
  background: var(--accent);
  transition: transform var(--t-spring) var(--spring), width var(--t-spring) var(--spring);
}
.tab-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  height: 52px;
  border: 0;
  border-radius: 26px;
  background: none;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11px;
  cursor: pointer;
  transition: color var(--t-micro) ease, transform var(--t-press) var(--ease-std);
}
.tab-btn.active { color: var(--on-accent); font-weight: 700; }
.tab-btn.pressed, .tab-btn:active { transform: scale(0.92); }

.search-pill {
  position: absolute;
  right: 0;
  top: 0;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 31px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-std);
}
.search-pill.pressed, .search-pill:active { transform: scale(0.94); }

/* Поиск открывается сверху: клавиатура iOS поднимается снизу и больше не
   двигает поле. Меню на время поиска уезжает вниз. */
.dock.searching { transform: translateY(130px); }

.search-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 11;
  max-width: 588px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--top-inset) + 10px) 14px 10px;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  transition: opacity var(--t-micro) ease, transform var(--t-std) var(--ease-ios);
}
.search-bar.on { opacity: 1; transform: none; pointer-events: auto; }
.search-field {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--card);
  color: var(--muted);
  box-shadow: var(--shadow);
}
#search-input {
  flex-grow: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px; /* меньше 16px — iOS зумит страницу при фокусе */
  -webkit-appearance: none;
  appearance: none;
}
#search-input::-webkit-search-cancel-button { display: none; }
.search-cancel {
  flex-shrink: 0;
  height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}

.search-veil {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: var(--veil);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.search-veil.on { opacity: 1; pointer-events: auto; }
.search-panel {
  position: fixed;
  left: 14px;
  right: 14px;
  top: calc(var(--top-inset) + 72px);
  bottom: 16px;
  max-width: 560px;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 9;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.search-panel.on { display: flex; }
.search-panel .group { box-shadow: var(--shadow); flex-shrink: 0; }
.search-hint { padding: 0 4px; display: flex; flex-direction: column; gap: 10px; }
.search-hint .chips { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }

/* ---------- появление и отклик ---------- */

.stagger { animation: row-in 340ms var(--ease-std) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes push-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.screen.push-in { animation: push-in var(--t-screen) var(--ease-ios) both; }
.screen.fade-in { animation: fade-in var(--t-micro) ease-out both; }
.screen.pop-out { transform: translateX(100%); transition-duration: 300ms; }
.screen.fade-out { opacity: 0; transition: opacity var(--t-micro) ease; }

.press { transition: transform var(--t-press) var(--ease-std); }
.press.pressed, .press:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .stagger, .screen.push-in, .roll.go, .toast {
    animation-name: fade-in !important;
    animation-duration: 200ms !important;
    animation-delay: 0s !important;
  }
  .screen.is-under { transform: none; }
  .confetti { display: none; }
}

/* ---------- журнал эспрессо ---------- */

.dock.away { transform: translateY(130px); }

.ej-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 18px;
  background: var(--ink);
  color: var(--on-ink);
  text-align: left;
  cursor: pointer;
}
.ej-hero-top, .ej-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.ej-hero-top > span:first-child { opacity: 0.8; }
.ej-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ej-stat-label { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.ej-stat-value { font-size: 22px; font-weight: 700; }

.ej-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ej-card-top { color: var(--muted); }
.ej-card-recipe { display: flex; gap: 14px; font-size: 17px; font-weight: 700; }
.ej-card-sub { font-size: 14px; color: var(--muted); }

/* журнал: ноты, календарь, запись */
.ej-auth-note { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--warn-bg); color: var(--text); font-size: 15px; line-height: 1.4; }
.ej-notes { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; font-weight: 700; }
.ej-notes.col { flex-direction: column; gap: 10px; font-size: 17px; }
.ej-note { display: inline-flex; align-items: center; gap: 7px; }
.ej-note-dot { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.ej-note-dot.custom { box-shadow: inset 0 0 0 2px var(--faint); }
.ej-hero .rcp-rating.dark { margin-left: 0; }
.ej-hero .ej-note-dot { box-shadow: 0 0 0 2px rgba(247, 243, 231, 0.85); }
.ej-hero .ej-note-dot.custom { box-shadow: inset 0 0 0 2px var(--on-ink); }

.ej-cal { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--card); }
.ej-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ej-cal-head b { font-size: 17px; }
.ej-cal-head span { font-size: 13px; color: var(--muted); text-align: right; }
.ej-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; }
.ej-cal-wd { justify-self: center; font-size: 11px; color: var(--muted); }
.ej-day { position: relative; justify-self: center; width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); }
.ej-day.before { color: var(--faint); }
.ej-day.miss { background: var(--fill); }
.ej-day.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.ej-day.today { box-shadow: inset 0 0 0 2px var(--text); }
.ej-day i { position: absolute; right: -2px; top: -3px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--text); color: var(--bg); font-size: 10px; font-style: normal; line-height: 14px; text-align: center; }
.ej-cal-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.ej-cal-legend span { display: flex; align-items: center; gap: 5px; }
.ej-cal-legend i { width: 10px; height: 10px; border-radius: 5px; }
.ej-cal-legend i.on { background: var(--accent); }
.ej-cal-legend i.miss { background: var(--fill); box-shadow: inset 0 0 0 1px var(--sep); }

.ej-box.ej-flow { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.ej-flow-end { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ej-flow-end small, .ej-flow-mid small { font-size: 13px; color: var(--muted); }
.ej-flow-dot { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.ej-flow-dot.dose { background: var(--ink); color: var(--on-ink); font-size: 17px; }
.ej-flow-dot.yield { background: var(--accent); color: var(--on-accent); font-size: 20px; }
.ej-flow-mid { flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ej-flow-mid b { font-size: 22px; }
.ej-flow-line { width: 100%; height: 2px; background: linear-gradient(90deg, var(--ink), var(--accent)); }
.ej-prow { display: flex; align-items: center; gap: 10px; padding: 2px 0; font-size: 15px; }
.ej-prow-name { width: 100px; color: var(--muted); }
.ej-prow-dots { display: flex; gap: 6px; }
.ej-prow-dots i { width: 10px; height: 10px; border-radius: 5px; background: var(--fill); }
.ej-prow-dots i.past { background: rgba(233, 197, 29, 0.5); }
.ej-prow-dots i.on { background: var(--accent); }
.ej-prow b { margin-left: auto; text-align: right; }
.ej-psubs { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--sep); padding-top: 12px; margin-top: 2px; }
.ej-psub { display: flex; align-items: center; gap: 14px; }
.ej-psub > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ej-psub small { font-size: 13px; color: var(--muted); }
.ej-psub b { font-size: 17px; }
.ej-mini-tri { width: 64px; height: 56px; flex-shrink: 0; }
.ej-mini-tri polygon { fill: var(--warn-bg); stroke: var(--card); stroke-width: 6; stroke-linejoin: round; }
.ej-mini-tri polygon.mid { fill: var(--accent-soft); }
.ej-mini-tri polygon.on { fill: var(--accent); }
.ej-tail-viz { position: relative; width: 64px; height: 56px; flex-shrink: 0; }
.ej-tail-viz .track { position: absolute; left: 0; top: 24px; width: 64px; height: 8px; border-radius: 4px; background: var(--fill); }
.ej-tail-viz .trail { position: absolute; left: 0; top: 22px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), rgba(233, 197, 29, 0)); }
.ej-tail-viz .head { position: absolute; left: 0; top: 20px; width: 16px; height: 16px; border-radius: 8px; background: var(--accent); }
.ej-paroma { display: flex; align-items: center; gap: 16px; }
.ej-mini-wheel { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.ej-mini-wheel svg { width: 100%; height: 100%; display: block; }
.ej-mini-wheel path { fill: var(--fill); }
@media (prefers-color-scheme: dark) {
  /* тёмные группы («Обжарка», «Орехи») иначе сливаются с карточкой */
  .ej-note-dot:not(.custom) { box-shadow: 0 0 0 1.5px rgba(234, 230, 221, 0.35); }
  .ej-mini-wheel path[style] { stroke: rgba(234, 230, 221, 0.35); stroke-width: 1; }
}
.ej-mini-wheel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 21px; }

.ej-new {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(max(16px, var(--safe-bottom)) + 76px);
  z-index: 3;
  max-width: 560px;
  margin: 0 auto;
  height: 54px;
  border: 0;
  border-radius: 27px;
  background: #2f3636;
  color: #f7f3e7;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(47, 54, 54, 0.2);
  cursor: pointer;
}

/* форма */
.ej-progress { display: flex; gap: 6px; }
.ej-progress span { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--fill); transition: background 300ms ease; }
.ej-progress span.on { background: var(--accent); }

.ej-step { display: flex; flex-direction: column; gap: 14px; }
.ej-step.from-right { animation: step-right 320ms var(--ease-ios) both; }
.ej-step.from-left { animation: step-left 320ms var(--ease-ios) both; }
@keyframes step-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes step-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.no-stagger .stagger { animation: none !important; }

.ej-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(16px, var(--safe-bottom));
  z-index: 3;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}
.ej-btn-main, .ej-btn-ghost {
  height: 54px;
  border: 0;
  border-radius: 27px;
  font-size: 17px;
  cursor: pointer;
}
.ej-btn-main { flex-grow: 1; background: #2f3636; color: #f7f3e7; font-weight: 700; box-shadow: 0 8px 24px rgba(47, 54, 54, 0.2); }
.ej-btn-main:disabled { opacity: 0.4; box-shadow: none; }
.ej-btn-ghost { padding: 0 22px; background: var(--card); color: var(--text); box-shadow: var(--shadow); }

.ej-beans { display: flex; flex-direction: column; gap: 10px; }
.ej-bean {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-micro) ease, transform var(--t-press) var(--ease-std);
}
.ej-bean.on { border-color: var(--accent); }
.ej-bean .chev { margin-left: auto; }
.ej-bean.pressed { transform: scale(0.98); }
.ej-bean-text { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; }
.ej-bean-name { font-size: 18px; font-weight: 700; }
.ej-bean-sub { font-size: 14px; color: var(--muted); }

.ej-prefill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--warn-bg);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.35;
  transition: opacity 200ms ease, transform 200ms ease;
}
.ej-prefill > span { flex-grow: 1; }
.ej-prefill.gone { opacity: 0; transform: scale(0.96); }
.ej-prefill-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: #2f3636;
  color: #f7f3e7;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ej-ratio-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: var(--on-ink); }
.ej-ratio-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.ej-ratio-val { font-size: 26px; font-weight: 700; }
.ej-axis { position: relative; height: 8px; border-radius: 4px; background: rgba(247, 243, 231, 0.18); }
.ej-zone { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(233, 197, 29, 0.5); }
.ej-mark {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  border-radius: 2px;
  background: #f7f3e7;
  transition: left 300ms var(--ease-std);
}
.ej-ratio-note { font-size: 13px; opacity: 0.8; }

.ej-sliders { padding: 4px 0; }
.ej-slider { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.ej-slider + .ej-slider { border-top: 1px solid var(--sep); }
.ej-slider-top { display: flex; align-items: baseline; justify-content: space-between; }
.ej-slider-label { font-size: 15px; color: var(--muted); }
.ej-slider-val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ej-slider-row { display: flex; align-items: center; gap: 10px; }
.ej-delta { font-size: 13px; color: var(--muted); }
.ej-stepbtn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: var(--fill);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-std);
}
.ej-stepbtn.pressed, .ej-stepbtn:active { transform: scale(0.88); }
.ej-timer {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-micro) ease, color var(--t-micro) ease, transform var(--t-press) var(--ease-std);
}
.ej-timer.running { background: #2f3636; color: var(--accent); animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse { 50% { box-shadow: 0 0 0 7px rgba(233, 197, 29, 0.35); } }

.ej-range {
  -webkit-appearance: none;
  appearance: none;
  flex-grow: 1;
  min-width: 0;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.ej-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--p, 50%), var(--fill) var(--p, 50%));
}
.ej-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--p, 50%), var(--fill) var(--p, 50%));
}
.ej-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(47, 54, 54, 0.3);
}
.ej-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 14px; background: #ffffff; box-shadow: 0 1px 4px rgba(47, 54, 54, 0.3); }

/* шкалы вкуса: четыре точки от слабого к сильному */
.ej-scales { background: var(--card); border-radius: 16px; padding: 2px 0; }
.ej-scale { padding: 12px 14px 10px; }
.ej-scale + .ej-scale { border-top: 1px solid var(--sep); }
.ej-scale-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.ej-scale-head b { font-size: 17px; color: var(--text); }
.ej-scale-track { position: relative; display: flex; touch-action: pan-y; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.ej-scale-line, .ej-scale-fill { position: absolute; top: 6px; height: 2px; left: calc(50% / var(--n)); border-radius: 1px; }
.ej-scale-line { right: calc(50% / var(--n)); background: var(--fill); }
.ej-scale-fill { width: calc((100% - 100% / var(--n)) * var(--k) / (var(--n) - 1)); background: var(--accent); transition: width var(--t-std) var(--ease-ios); }
.ej-tick { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.ej-dot { width: 14px; height: 14px; border-radius: 7px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--sep); transition: background var(--t-micro) var(--ease-std), transform var(--t-spring) var(--spring), box-shadow var(--t-micro); }
.ej-tick.past .ej-dot { background: rgba(233, 197, 29, 0.55); box-shadow: none; }
.ej-tick.on .ej-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(233, 197, 29, 0.25); transform: scale(1.5); }
.ej-tick-label { font-size: 12px; line-height: 1.15; color: var(--muted); text-align: center; }
.ej-tick.on .ej-tick-label { color: var(--text); font-weight: 700; }
.ej-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ej-chips .chip { height: 36px; font-size: 15px; }
.ej-scale-head.sub { font-size: 13px; margin-bottom: 8px; }

/* карточки шага «Вкус» и чашка ароматики */
.ej-box { background: var(--card); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ej-box-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); min-height: 24px; }
.ej-box-head b { font-size: 17px; color: var(--text); text-align: right; }
.ej-box-sub { font-size: 13px; color: var(--muted); }
.ej-box .ej-scale { padding: 2px 0 4px; }
.ej-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ej-grid3 .chip { height: 38px; justify-content: center; font-size: 15px; padding: 0 6px; }
.ej-tri { position: relative; width: 240px; max-width: 100%; margin: 4px auto 0; padding: 20px 0 22px; }
.ej-tri svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.ej-tri-zone { fill: var(--warn-bg); stroke: var(--card); stroke-width: 3; stroke-linejoin: round; cursor: pointer; transition: fill var(--t-micro) var(--ease-std); }
.ej-tri-zone.mid { fill: var(--accent-soft); }
.ej-tri-zone.on { fill: var(--accent); }
.ej-tri-zone:active { opacity: 0.8; }
.ej-tri-l { position: absolute; font-size: 13px; font-weight: 700; color: var(--text-2); pointer-events: none; }
.ej-tri-l.top { top: 0; left: 0; right: 0; text-align: center; }
.ej-tri-l.left { bottom: 0; left: 0; }
.ej-tri-l.right { bottom: 0; right: 0; }
.ej-crumb { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 6px; margin-top: 4px; font-size: 15px; color: var(--muted); min-height: 44px; }
.ej-crumb b { font-size: 20px; color: var(--text); }
.ej-crumb small { flex-basis: 100%; text-align: center; font-size: 13px; }
.ej-picked:empty { display: none; }
.ej-picked { margin: 6px 0 4px; }
.ej-often:empty { display: none; }
.ej-often { margin-top: 12px; }
.ej-tail { height: 28vh; }

/* журнал фильтра и оценка 1–5 */
.ej-page { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ej-hero-bean { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ej-bar.rate { flex-wrap: wrap; }
.ej-rate {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 18px;
  border-radius: 27px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.ej-rate-label { min-width: 0; font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ej-rate-stars { flex-shrink: 0; }
.ej-rate-stars { display: flex; }
.ej-rate-star {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--fill);
  cursor: pointer;
  transition: color var(--t-micro) ease, transform var(--t-press) var(--ease-std);
}
.ej-rate-star.on { color: var(--accent); }
.ej-rate-star:active { transform: scale(0.85); }
.ej-more { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.ej-more-check {
  align-self: center;
  width: 92px;
  height: 92px;
  margin: 8px 0 10px;
  border-radius: 46px;
  background: var(--accent);
  color: #2f3636;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12px var(--accent-soft);
}
.ej-more .gh { padding-bottom: 0; }
.ej-more-row { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 12px 16px; }
.ej-more-row + .ej-more-row { border-top: 1px solid var(--sep); }
.ej-more-row small { grid-column: 2; color: var(--muted); font-size: 14px; }
.ej-more-row .rcp-rating { grid-column: 3; grid-row: 1; }
.ej-more .ej-btn-main { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.ej-search-low { margin-top: 14px; }
.ej-picked { margin-top: 10px; font-size: 15px; line-height: 1.4; }

/* колесо ароматов */
.ej-wheel { display: flex; justify-content: center; margin: 2px -8px 0; }
.ejw { width: min(100%, 380px); height: auto; display: block; overflow: visible; font-family: var(--font); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
.ejw-seg { cursor: pointer; }
.ejw-seg path { stroke: var(--bg); stroke-width: 2.5; transition: fill var(--t-micro) var(--ease-std), opacity var(--t-micro) var(--ease-std); }
.ejw-seg text { font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.ejw-top path { fill: var(--f); }
.ejw-top text { fill: var(--t); font-size: 10px; }
.ejw-top { transition: transform var(--t-std) var(--ease-ios); }
.ejw-top.on { transform: scale(1.08); }
.ejw-fam path { fill: var(--card); }
.ejw-fam text { fill: var(--text); }
.ejw-fam.on path { fill: var(--text); }
.ejw-fam.on text { fill: var(--bg); }
.ejw-note path { fill: var(--warn-bg); }
.ejw-note text { fill: var(--text); font-size: 10.5px; }
.ejw-note.on path { fill: var(--accent); }
.ejw-note.on text { fill: var(--on-accent); }
.ejw-note.hover path { fill: var(--accent-soft); stroke: var(--accent); }
.ejw-note.hover { transform: scale(1.04); }
.ejw-note { transition: transform var(--t-micro) var(--ease-std); }
.ejw-hub { fill: var(--card); }
.ejw-count { fill: var(--text); font-size: 26px; font-weight: 700; text-anchor: middle; }
/* при смене группы/семейства внешние кольца раскрываются из-под внутренних */
.ejw-in-fam .ejw-fam, .ejw-in-fam .ejw-note, .ejw-in-note .ejw-note { animation: ejw-in var(--t-std) var(--ease-ios) both; transform-origin: 0 0; }
@keyframes ejw-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ejw-seg { animation: none !important; } }
.ej-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: 10px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--card);
  color: var(--muted);
}
.ej-search input {
  flex-grow: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  -webkit-appearance: none;
  appearance: none;
}
.ej-search input::-webkit-search-cancel-button { display: none; }
.ej-found:empty { display: none; }
.ej-found { margin-bottom: 12px; }
.ej-found-list { display: flex; gap: 8px; flex-wrap: wrap; }
.ej-found-group { opacity: 0.6; font-weight: 400; font-size: 13px; margin-left: 2px; }
.ej-add { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.ej-found-hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
.ej-picked-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ej-pick { height: 32px; font-size: 14px; }
.chip.active.ej-custom { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.section-list.from-right { animation: step-right 280ms var(--ease-ios) both; }
.section-list.from-left { animation: step-left 280ms var(--ease-ios) both; }

@media (prefers-reduced-motion: reduce) {
  .ej-step.from-right, .ej-step.from-left { animation: fade-in 200ms both; }
  .ej-timer.running { animation: none; }
}

/* ---------- рецепты ручного заваривания ---------- */

.rcp-seg .seg-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; }
.rcp-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding-bottom: 90px; }
.rcp-add-wrap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(96px + var(--safe-bottom));
  z-index: 3;
  max-width: 560px;
  margin: 0 auto;
}
.rcp-add {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 26px;
  background: #2f3636;
  color: #f7f3e7;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 28px rgba(47, 54, 54, 0.2);
  cursor: pointer;
}

.rcp-base {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: #4e5959;
  color: #f7f3e7;
}
.rcp-base-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rcp-base-head b { font-size: 20px; }
.rcp-pill { height: 26px; line-height: 26px; padding: 0 10px; border-radius: 13px; background: var(--accent); color: #2f3636; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.rcp-base-sub { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: 0.85; }

.rcp-params { display: flex; justify-content: space-between; gap: 4px; }
.rcp-params div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rcp-params b { font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rcp-params span { font-size: 12px; color: var(--muted); }
.rcp-params.dark b { color: #f7f3e7; }
.rcp-params.dark span { color: var(--accent); }

.rcp-bar { display: flex; gap: 2px; overflow: hidden; flex-grow: 1; min-width: 40px; }
.rcp-bar span { display: block; }

.rcp-style { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; background: var(--fill); color: var(--text); }
.rcp-style.inv { background: #2f3636; color: #f7f3e7; }
.rcp-style.dark { background: var(--accent); color: #2f3636; }

.rcp-users { display: flex; flex-direction: column; gap: 10px; }
.rcp-users .gh { padding-left: 4px; padding-bottom: 0; }
.rcp-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.rcp-card {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
}
.rcp-card-title { font-size: 17px; font-weight: 700; }
.rcp-card-meta { font-size: 13px; color: var(--muted); }
.rcp-card-meta b { color: var(--text); }
.rcp-card-row { display: flex; align-items: center; gap: 10px; }
.rcp-empty { padding: 24px 16px; }
.rcp-base.pressed, .rcp-card.pressed { transform: scale(0.98); }

/* гайд и таймер */
.rcp-title { display: flex; align-items: center; gap: 10px; color: var(--text); }
.rcp-title svg { flex-shrink: 0; }
.rcp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; font-size: 14px; color: var(--muted); }
.rcp-cardbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
  margin-bottom: 14px;
  width: 100%;
  border: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  box-sizing: border-box;
}
.rcp-label { font-size: 13px; color: var(--muted); }
.rcp-note { margin: 0; font-size: 16px; line-height: 1.4; }
.rcp-tip { margin-bottom: 14px; padding: 14px; border-radius: 16px; background: var(--warn-bg); font-size: 15px; line-height: 1.4; }
.rcp-tutorial { margin-bottom: 14px; padding: 14px; border-radius: 16px; background: var(--card); }
.rcp-tutorial summary { font-weight: 700; cursor: pointer; }
.rcp-bottom-gap { height: 90px; }

.rcp-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--sep); transition: background var(--t-micro) ease, opacity var(--t-micro) ease; }
.rcp-label + .rcp-step { border-top: 0; }
.rcp-step-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.rcp-act { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rcp-act.sm { width: 24px; height: 24px; border-radius: 7px; }
.rcp-step-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rcp-step-head { display: flex; gap: 10px; align-items: baseline; }
.rcp-step-head b { font-size: 16px; }
.rcp-step-head span, .rcp-step-sub { font-size: 14px; color: var(--muted); }
.rcp-step-note { font-size: 15px; line-height: 1.35; }
.rcp-step-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rcp-step-tags span { padding: 1px 8px; border-radius: 10px; background: var(--accent-soft); font-size: 12px; font-weight: 700; }
.rcp-step.now { background: var(--warn-bg); }
.rcp-step.now, .rcp-step.editing { border-radius: 10px; border-top-color: transparent; }
.rcp-step.now + .rcp-step, .rcp-step.editing + .rcp-step { border-top-color: transparent; }
.rcp-step.now .rcp-step-num { background: var(--accent); }
.rcp-step.done { opacity: 0.45; }
.rcp-step.editing { background: var(--warn-bg); }
.rcp-tap-rows .rcp-step { cursor: pointer; }

.rcp-timer-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 16px; }
.rcp-clock { font-size: 72px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rcp-clock-sub { font-size: 15px; color: var(--muted); }
.rcp-track { position: relative; margin-bottom: 16px; }
.rcp-track-bar .rcp-bar { width: 100%; }
.rcp-track-mark { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--text); left: 0; }
.rcp-now { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; padding: 16px; border-radius: 16px; background: #2f3636; color: #f7f3e7; min-height: 70px; }
.rcp-now-what { font-size: 20px; }
.rcp-now-note { font-size: 15px; opacity: 0.85; }
.rcp-now-next { font-size: 14px; color: var(--accent); }

/* лента-линейка */
.rcp-ruler { position: relative; height: 62px; flex-grow: 1; min-width: 0; overflow: hidden; }
.rcp-ruler-tape {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rcp-ruler-tape::-webkit-scrollbar { display: none; }
.rcp-pad { flex: 0 0 calc(50% - 5px); }
.rcp-tick { position: relative; flex: 0 0 10px; height: 100%; scroll-snap-align: center; }
.rcp-tick::before { content: ""; position: absolute; left: 50%; top: 20px; width: 1px; height: 9px; transform: translate(-50%, -50%); border-radius: 1px; background: rgba(var(--ink-rgb), 0.4); }
.rcp-tick.half::before { height: 16px; width: 1.3px; }
.rcp-tick.major::before { height: 26px; width: 2px; background: var(--text); }
.rcp-tick i { position: absolute; left: 50%; top: 38px; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; }
.rcp-ruler-mark { position: absolute; left: 50%; top: 3px; width: 4px; height: 34px; margin-left: -2px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.rcp-ruler::before, .rcp-ruler::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 1; pointer-events: none; }
.rcp-ruler::before { left: 0; background: linear-gradient(to right, var(--card), transparent); }
.rcp-ruler::after { right: 0; background: linear-gradient(to left, var(--card), transparent); }
.rcp-ruler-row { display: flex; align-items: center; gap: 6px; }
.rcp-ruler-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.rcp-ruler-head b { font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }
.rcp-big { text-align: center; font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* форма своего рецепта */
.rcp-name { margin: 4px 0 14px; }
.rcp-name-view { display: flex; align-items: flex-start; gap: 8px; border: 0; padding: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.rcp-name-view .placeholder { color: var(--text); }
.rcp-pen { margin-top: 8px; color: var(--muted); flex-shrink: 0; }
.rcp-name-edit { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 14px; background: var(--card); box-shadow: inset 0 -2px 0 var(--accent); }
.rcp-name-input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 28px; font-weight: 700; color: var(--text); }
.rcp-link { border: 0; background: none; padding: 0; font: inherit; font-size: 16px; font-weight: 700; color: #a8880f; cursor: pointer; }
@media (prefers-color-scheme: dark) { .rcp-link { color: var(--accent); } }
.rcp-methods { display: flex; gap: 8px; margin-bottom: 14px; }
.rcp-mchip { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 19px; background: var(--card); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.rcp-mchip.on { background: #2f3636; color: #f7f3e7; font-weight: 700; }
.rcp-style-seg:not(:empty) { margin-bottom: 14px; }
.rcp-beanrow { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rcp-bean-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--warn-bg); display: flex; align-items: center; justify-content: center; }
.rcp-bean-text { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.25; }
.rcp-bean-text span { font-size: 13px; color: var(--muted); }
.rcp-bean-text b { font-size: 17px; }
.ej-sliders + .rcp-cardbox { margin-top: 14px; }
.rcp-summary { cursor: pointer; }
.rcp-sum-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rcp-sum-head b { font-size: 17px; }
.rcp-sum-head span { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.rcp-sum-empty { display: flex; align-items: center; gap: 6px; color: #a8880f; font-weight: 700; }
@media (prefers-color-scheme: dark) { .rcp-sum-empty { color: var(--accent); } }
.rcp-sum-rows { display: flex; flex-direction: column; }
.rcp-sum-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--sep); font-size: 15px; }
.rcp-sum-row b { min-width: 40px; }
.rcp-sum-row i { font-style: normal; font-size: 14px; color: var(--muted); }
.rcp-pillbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border-radius: 22px; border: 1.5px dashed rgba(var(--ink-rgb), 0.3); background: transparent; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; }
.rcp-pillbtn span { font-size: 13px; color: var(--muted); }
.rcp-notebox { margin-bottom: 14px; }
.rcp-notebox .rcp-cardbox { margin-bottom: 0; }
.rcp-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--fill); color: var(--text); font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; outline: none; }
.rcp-hint { font-size: 13px; color: var(--muted); }

/* проливы и шаги */
.rcp-sub { font-size: 15px; color: var(--muted); }
.title-block + .rcp-cardbox { margin-top: 14px; }
.rcp-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.rcp-kind { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: var(--fill); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.rcp-kind.on { background: #2f3636; color: #f7f3e7; font-weight: 700; }
.rcp-tiles { display: flex; gap: 8px; }
.rcp-tile { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font: inherit; cursor: pointer; }
.rcp-tile span { font-size: 13px; color: var(--muted); }
.rcp-tile b { font-size: 24px; font-variant-numeric: tabular-nums; }
.rcp-tile.on { background: var(--warn-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.rcp-comment { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--fill); }
.rcp-comment .rcp-textarea { background: var(--card); }
.rcp-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.rcp-tagrow .chip { background: var(--card); }
.rcp-tagrow .chip.active { background: var(--ink); }
.rcp-ed-actions { display: flex; gap: 8px; }
.rcp-commit { flex-grow: 1; height: 50px; border: 0; border-radius: 25px; background: var(--accent); color: #2f3636; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.rcp-del { height: 50px; padding: 0 18px; border: 0; border-radius: 25px; background: var(--fill); color: #b5452f; font: inherit; font-size: 16px; cursor: pointer; }
.bean.picked { box-shadow: inset 0 0 0 2px var(--accent); }
.rcp-nobean { margin-top: 14px; }
.seg + .bean-list { margin-top: 16px; }
.rcp-yield { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; color: var(--text); }
.rcp-yield svg { color: var(--muted); flex-shrink: 0; }
.rcp-yield b { font-size: 17px; }
.rcp-yield i { font-style: normal; font-size: 13px; color: var(--muted); }
.rcp-form-yield:not(:empty) { padding: 10px 16px 12px; border-top: 1px solid var(--sep); }
.rcp-kind.instant { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--ink-rgb), 0.3); }
.rcp-kind.instant.on { background: #2f3636; box-shadow: none; }

/* ---------- заготовки: калькулятор замеса и метод по шагам ---------- */

.prep-calc { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--card); }
.prep-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; color: var(--muted); }
.prep-head span + span { font-size: 14px; }
.prep-need { display: flex; align-items: center; gap: 10px; }
.prep-num { flex-grow: 1; text-align: center; line-height: 1; }
.prep-num b { font-size: 44px; font-variant-numeric: tabular-nums; }
.prep-num span { font-size: 22px; color: var(--muted); }
.prep-range { margin: 4px 0; }
.prep-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.prep-from:not(:empty) { font-size: 14px; color: var(--warn-ink); }
.prep-gh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 6px 0; }
.prep-gh .gh { padding-bottom: 0; }
.prep-gh > span:last-child { font-size: 13px; color: var(--muted); }
.prep-ing + .prep-ing { border-top: 1px solid var(--sep); }
.prep-ing.lock { background: var(--warn-bg); }
.prep-ing.open:not(.lock) { background: var(--card-press); }
.prep-ing-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.prep-ing-row span { flex-grow: 1; font-size: 17px; }
.prep-ing-row b { font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prep-have { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; font-size: 13px; color: var(--muted); }
.prep-have-row { display: flex; align-items: center; gap: 10px; }
.prep-steps { display: flex; flex-direction: column; padding: 6px 14px; border-radius: 16px; background: var(--card); }
.prep-step { display: flex; gap: 12px; align-items: stretch; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.prep-rail { position: relative; display: flex; justify-content: center; width: 30px; flex-shrink: 0; padding-top: 10px; }
.prep-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14px; width: 2px; background: rgba(233, 197, 29, 0.45); }
.prep-step:first-child .prep-rail::before { top: 10px; }
.prep-step:last-child .prep-rail::before { bottom: auto; height: 10px; }
.prep-step:only-child .prep-rail::before { display: none; }
.prep-dot { position: relative; width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); }
.prep-step.warn .prep-dot { background: var(--warn-bg); color: var(--warn-ink); }
.prep-step.done .prep-dot { background: var(--accent); color: #2f3636; box-shadow: none; }
.prep-step-body { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 0; transition: opacity var(--t-micro) ease; }
.prep-step-text { font-size: 16px; line-height: 1.4; }
.prep-step.warn .prep-step-text { font-weight: 700; }
.prep-step.done .prep-step-body { opacity: 0.5; }
.prep-step.done .prep-step-text { text-decoration: line-through; }
.prep-warn { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--warn-bg); color: var(--warn-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
.prep-uses { display: flex; gap: 6px; flex-wrap: wrap; }
.prep-use { display: inline-flex; align-items: center; gap: 2px; background: var(--card); }
.prep-use .chev { width: 14px; height: 14px; }
.prep-ings-wrap, .prep-calc + section { margin-top: 0; }
.prep-tune { width: 22px; height: 22px; flex-shrink: 0; margin-right: -2px; display: flex; align-items: center; justify-content: center; color: #e6cf73; transition: color var(--t-micro) ease; }
.prep-ing-row span.prep-tune { flex-grow: 0; }
.prep-ing.open .prep-tune, .prep-ing.lock .prep-tune { color: #c9a514; }
.prep-sub { padding: 0 14px 12px; }
.prep-sublink { display: inline-flex; align-items: center; gap: 2px; border: 0; padding: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--warn-ink); cursor: pointer; }
.kv-link { width: 100%; border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: none; }
.kv-link .kv-key { color: var(--text); }
.kv-link .chev { margin-left: 4px; }
.b-link { display: inline-flex; align-items: center; gap: 2px; border: 0; padding: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.kv-link { align-items: center; }
.kv-link .kv-val { margin-left: auto; }
.kv-link .chev { margin-left: 0; margin-right: -6px; }

/* ---------- категории разделов: лента страниц ---------- */
.pager {
  display: flex;
  align-items: flex-start;
  margin: 0 -16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  transition: height var(--t-std) var(--ease-ios);
}
.pager::-webkit-scrollbar { display: none; }
.pager-panel {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 0 16px 2px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pager-panel .gh { padding-left: 4px; }

/* ---------- карточка напитка: описание, посуда значками ---------- */

.drink-lead { margin: 0; font-size: 17px; line-height: 1.45; color: var(--muted); }
.drink-stats .stat.vol { flex: 0 0 auto; min-width: 112px; }
.drink-stats .stat-value { white-space: nowrap; }
.cup-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cup-lines > .roll { display: flex; flex-direction: column; gap: 6px; }
.cup-line { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.cup-ic { flex-shrink: 0; color: #c9a514; }

/* ---------- двойной эспрессо: зерно из последней калибровки ---------- */

.esp-now .prep-gh { padding-left: 0; }
.esp-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--card); }
.esp-empty { font-size: 15px; color: var(--muted); }
.esp-title { display: flex; flex-direction: column; gap: 2px; }
.esp-title b { font-size: 24px; line-height: 1.15; }
.esp-title span { font-size: 15px; color: var(--muted); }
.esp-facts { display: flex; flex-direction: column; }
.esp-fact { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; }
.esp-fact + .esp-fact { border-top: 1px solid var(--sep); }
.esp-n { width: 24px; height: 24px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--warn-ink); font-size: 13px; font-weight: 700; }
.esp-fact-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.esp-fact-body b { font-size: 17px; line-height: 1.3; }
.esp-k { font-size: 13px; color: var(--muted); }
.esp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.esp-chip { height: 28px; line-height: 28px; padding: 0 10px; border-radius: 14px; font-size: 15px; background: var(--fill); color: var(--ink); }
.esp-chip.note { background: var(--accent-soft); color: #2f3636; font-weight: 700; }
.esp-chip.body { background: #2f3636; color: #f7f3e7; font-weight: 700; }
.esp-none { font-size: 15px; color: var(--warn-ink); }
.esp-foot { font-size: 13px; color: var(--muted); }
.say-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--warn-bg); color: #2f3636; }
.say-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--warn-ink); }
.say-text { font-size: 16px; line-height: 1.45; }

/* ---------- еда: список ---------- */

.food-list { display: flex; flex-direction: column; gap: 8px; }
.food-row.row { border-radius: 18px; padding: 10px 12px 10px 10px; gap: 12px; align-items: center; }
.food-row .row-body, .food-row + .food-row .row-body { border: 0; padding: 0; }
.food-thumb { position: relative; width: 60px; height: 60px; flex-shrink: 0; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--fill); color: #c9b98a; }
.food-thumb.photo { background: #e6dcc0; }
/* без фото — как плитки списаний: пастельно-жёлтая плашка с первыми буквами */
.food-thumb.abbr { background: #faf0cc; }
.food-thumb.abbr b { font-size: 20px; font-weight: 700; letter-spacing: .5px; color: #c2a43c; }
@media (prefers-color-scheme: dark) {
  .food-thumb.abbr { background: rgba(233, 197, 29, 0.13); }
  .food-thumb.abbr b { color: #e6cf7a; }
}
.food-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-std) ease; }
.food-thumb.ready img { opacity: 1; }
.food-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; font-size: 14px; color: var(--muted); }
.food-vit { color: var(--muted); flex-shrink: 0; }
.food-tag { height: 20px; line-height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--warn-bg); color: var(--warn-ink); }
.food-tag.good { background: #e3eedd; color: #3d5a32; }

/* ---------- еда: карточка ---------- */

.food-head { display: flex; flex-direction: column; border-radius: 22px; background: var(--card); overflow: hidden; }
.food-photo { height: 220px; background: #e6dcc0; }
.food-photo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--t-std) ease; }
.food-photo.ready img { opacity: 1; }
.food-head-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.food-head-body .large-title { font-size: 30px; margin: 0; }
.food-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.food-desc { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); white-space: pre-line; }
.food-warn { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--warn-bg); color: #2f3636; }
.food-warn > svg { flex-shrink: 0; color: var(--warn-ink); }
.food-warn > div { display: flex; flex-direction: column; gap: 6px; }
.food-warn-head { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--warn-ink); }
.food-warn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.food-warn-tags span { height: 28px; line-height: 28px; padding: 0 10px; border-radius: 14px; background: #fff; font-size: 15px; font-weight: 700; }
.food-warn-text { font-size: 15px; line-height: 1.35; }
.food-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 10px 4px; border-radius: 16px; background: var(--card); }
.food-strip span { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; text-align: center; }
.food-strip span + span { border-left: 1px solid var(--sep); }
.food-strip i { font-style: normal; font-size: 13px; color: var(--muted); }
.food-strip b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 6px; }
.food-lies { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 0 4px; font-size: 15px; color: var(--ink); }
.food-lies b { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.food-lies svg { color: #c9a514; }
.food-bju { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--card); }
.food-gh { font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.food-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.food-bar .b0, .food-legend .b0 { background: #2f3636; }
.food-bar .b1, .food-legend .b1 { background: var(--accent); }
.food-bar .b2, .food-legend .b2 { background: #d9cfae; }
.food-legend { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 15px; }
.food-legend span { display: flex; align-items: center; gap: 6px; }
.food-legend i { width: 10px; height: 10px; border-radius: 5px; }
.food-tip { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: #2f3636; color: #f7f3e7; }
.food-tip svg { flex-shrink: 0; color: var(--accent); }
.food-tip span { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.4; }
.food-tip i { font-style: normal; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.7; }
.food-sec { display: flex; flex-direction: column; gap: 8px; }
.food-sec .gh { padding-bottom: 0; }
.food-serve { display: flex; flex-wrap: wrap; gap: 8px; }
.food-serve span { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 12px; border-radius: 14px; background: var(--card); font-size: 15px; font-weight: 700; }
.food-serve svg, .food-note svg { flex-shrink: 0; color: #c9a514; }
.food-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card); font-size: 16px; font-weight: 700; }
.food-comp { display: flex; flex-wrap: wrap; gap: 6px; }
.food-comp .chip { height: 36px; }
.food-comp + .food-comp-group, .food-comp-group + .food-comp-group { margin-top: 14px; }
.food-comp-title { margin: 0 2px 8px; font-size: 15px; font-weight: 700; color: var(--text); }

/* шторка «где ещё есть этот ингредиент» */
.ing-veil { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(47, 54, 54, 0); transition: background var(--t-std) ease; }
.ing-veil.open { background: rgba(47, 54, 54, 0.45); }
.ing-sheet { display: flex; flex-direction: column; gap: 12px; max-height: 72vh; padding: 10px 16px calc(20px + var(--safe-bottom)); border-radius: 24px 24px 0 0; background: var(--bg); overflow-y: auto; transform: translateY(100%); transition: transform var(--t-screen) var(--ease-ios); }
.ing-veil.open .ing-sheet { transform: none; }
.ing-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb), 0.25); }
.ing-top { display: flex; align-items: flex-start; gap: 10px; }
.ing-top > span { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.ing-top i { font-style: normal; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.ing-top b { font-size: 24px; line-height: 1.15; }
.ing-top em { font-style: normal; font-size: 15px; color: var(--muted); }
.ing-close { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 18px; background: var(--fill); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ing-body { display: flex; flex-direction: column; gap: 10px; }
.ing-card { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 0; border-radius: 16px; background: #2f3636; color: #f7f3e7; font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; }
.ing-card span { flex-grow: 1; }
.ing-card .chev { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ing-veil, .ing-sheet { transition: none; } }

/* описание еды проявляется на месте гаснущего названия */
.food-swap { display: grid; overflow: hidden; }
.food-swap > * { grid-area: 1 / 1; align-self: start; }
.food-swap .large-title { transform-origin: left top; }
.food-swap .food-desc { opacity: 0; pointer-events: none; }
.food-swap.desc-on .food-desc { pointer-events: auto; }
.food-swap.desc-on .large-title { pointer-events: none; }

/* ---------- люди ---------- */

.pp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pp-top > span { font-size: 15px; color: var(--muted); }
.pp-av { flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: .2px; }
.pp-star { color: #c9a514; flex-shrink: 0; }
.pp-ib { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--ink); cursor: pointer; }
.pp-ib.dark { background: #2f3636; color: var(--accent); }

.pp-shift { position: relative; isolation: isolate; border-radius: 18px; }
/* фон плашки из трёх частей: верх и низ со скруглениями, середина
   тянется scaleY — раскрытие идёт одними transform'ами, без clip и высоты */
.pp-pre > * { opacity: 0; }
.pp-sbg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pp-sbg i { position: absolute; left: 0; right: 0; background: var(--card); }
.pp-sbg .t { top: 0; height: 18px; border-radius: 18px 18px 0 0; }
.pp-sbg .m { top: 17px; bottom: 17px; transform-origin: 0 0; }
.pp-sbg .b { bottom: 0; height: 18px; border-radius: 0 0 18px 18px; }
.pp-shift-head { display: flex; align-items: center; gap: 12px; width: 100%; height: 64px; padding: 0 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pp-shift.open .pp-shift-head { height: 40px; }
.pp-stack { display: flex; flex-shrink: 0; }
.pp-stack .pp-av { box-shadow: 0 0 0 2px var(--card); }
.pp-stack .pp-av + .pp-av { margin-left: -10px; }
.pp-shift.open .pp-stack { visibility: hidden; }
.pp-shift-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pp-shift-text b { font-size: 16px; }
.pp-shift-text > span { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-shift.open .pp-shift-text { opacity: 0; }
.pp-shift-chev { transform: rotate(90deg); transition: transform .45s var(--ease-ios); margin-left: auto; }
.pp-shift.open .pp-shift-chev { transform: rotate(-90deg); }
.pp-srow { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 0 10px 0 12px; border-top: 1px solid var(--sep); }
.pp-flyto { transform-origin: 0 0; box-shadow: 0 0 0 2.7px var(--card); } /* масштаб от угла — смещения считаем от угла; обводка = обводка стопки в масштабе 34/46, на фоне строки её не видно */
.pp-srow-main { flex-grow: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; padding: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pp-srow-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-srow-text b { display: flex; align-items: center; gap: 5px; font-size: 17px; }
.pp-srow-text > span { font-size: 14px; color: var(--muted); }
.pp-bar { height: 4px; margin-top: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.pp-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.pp-later { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 14px; border-top: 1px solid var(--sep); border-radius: 0 0 18px 18px; background: var(--bg); }
.pp-later .gh { padding: 0 14px; }
.pp-later-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px; scrollbar-width: none; }
.pp-chipp { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 0; border-radius: 16px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pp-chipp > span { display: flex; flex-direction: column; }
.pp-chipp b { font-size: 16px; }
.pp-chipp > span > span { font-size: 13px; color: var(--muted); }

.pp-all { margin-top: 6px; }
.pp-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--card); color: var(--muted); }
.pp-search input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--text); }
.pp-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pp-role { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.pp-role > span { width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pp-role.on { background: #2f3636; color: #f7f3e7; font-weight: 700; }
.pp-list { display: flex; flex-direction: column; gap: 8px; isolation: isolate; }
.pp-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--card); transform-origin: 50% 0; }
.pp-card-main { flex-grow: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; padding: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pp-card-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-card-text b { display: flex; align-items: center; gap: 5px; font-size: 17px; }
.pp-full { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-tags:empty { display: none; }
.pp-tag { height: 20px; line-height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--text); }
.pp-tag.on { background: #e3eedd; color: #3d5a32; }

/* переход в карточку человека: белый блок и аватарка летят поверх экранов */
.pp-ghost { position: fixed; z-index: 9000; pointer-events: none; }
.pp-ghost.card { background: var(--card); border-radius: 18px; transform-origin: 0 0; will-change: transform, opacity; }
.pp-ghost.av { transform-origin: 0 0; }

/* карточка человека */
.ppc-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 16px 18px; border-radius: 22px; background: var(--card); text-align: center; }
.ppc-name { display: flex; flex-direction: column; gap: 2px; }
.ppc-name b { font-size: 28px; line-height: 1.1; }
.ppc-name span { font-size: 16px; color: var(--muted); }
.ppc-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ppc-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 700; }
.ppc-tag .pp-star { color: var(--accent); }
.ppc-status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: #e3eedd; color: #3d5a32; font-size: 14px; font-weight: 700; }
.ppc-status i { width: 8px; height: 8px; border-radius: 4px; background: #5c8a4a; }
.ppc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.ppc-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border: 0; border-radius: 16px; background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ppc-actions button svg { color: #c9a514; }
.ppc-actions button.dark { background: #2f3636; color: #f7f3e7; }
.ppc-actions button.dark svg { color: var(--accent); }
.ppc-strip { border-radius: 16px; background: var(--card); overflow: hidden; }
.ppc-days { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; padding: 10px 12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.ppc-days::-webkit-scrollbar { display: none; }
.ppc-day { flex: 0 0 44px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 8px; border-radius: 12px; }
.ppc-day.week { margin-left: 10px; }
.ppc-day.work { background: var(--bg); }
.ppc-day.today { background: var(--accent-soft); }
.ppc-day i { font-style: normal; font-size: 10px; letter-spacing: .3px; text-transform: uppercase; color: #a08a3c; height: 12px; }
.ppc-day em { font-style: normal; font-size: 12px; color: var(--muted); }
.ppc-day b { font-size: 16px; }
.ppc-day small { font-size: 11px; line-height: 1.15; text-align: center; color: var(--faint); }
.ppc-day.work small { font-weight: 700; color: var(--text); }
.ppc-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 6px 0 14px; }
.ppc-row + .ppc-row { border-top: 1px solid var(--sep); }
.ppc-row-ic { color: #c9a514; }
.ppc-row b { flex-grow: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.ppc-copy { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: none; color: var(--faint); cursor: pointer; }
@media (prefers-color-scheme: dark) {
  .pp-ib { color: var(--text); }
  .pp-role.on { background: var(--accent); color: #2f3636; }
  .pp-role > span[style*="background:#2f3636"] { box-shadow: inset 0 0 0 1.5px var(--faint); }
  .ppc-actions button.dark { background: var(--accent); color: #2f3636; }
  .ppc-actions button.dark svg { color: #2f3636; }
}

/* ----- общие анимации (motion.js) ----- */
.mx-pre { opacity: 0; }
.mx-ghost { position: fixed; z-index: 9000; pointer-events: none; overflow: hidden; transform-origin: 0 0; will-change: transform; background: #e6dcc0; }
.mx-ghost img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ----- чек-лист смены (shift.js) ----- */
.sh-sub { font-size: 16px; color: var(--muted); }
.sh-sec { display: flex; flex-direction: column; gap: 8px; }
.sh-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sh-gh > span:last-child { font-size: 13px; color: var(--muted); padding-right: 4px; }
.sh-card { border-radius: 18px; background: var(--card); overflow: hidden; }
.sh-note { padding: 10px 14px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; }
.sh-hint { margin: 0; padding: 0 4px; font-size: 13px; color: var(--muted); }
.sh-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-top: 1px solid var(--sep); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.sh-row:first-child { border-top: 0; }
.sh-row.sh-busy { opacity: .5; }
.sh-row-text { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; font-size: 16px; }
.sh-row-text b { font-size: 16px; }
.sh-row-text small { font-size: 13px; color: var(--muted); }
.sh-row-text .done { opacity: .6; text-decoration: line-through; }
.sh-box { width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(var(--ink-rgb), .3); color: #2f3636; }
.sh-box.on { background: var(--accent); box-shadow: none; }
.sh-box.dark { box-shadow: inset 0 0 0 2px rgba(247, 243, 231, .35); }
.sh-box.dark.on { box-shadow: none; }
.sh-prev { display: flex; flex-direction: column; border-radius: 20px; background: #2f3636; color: #f7f3e7; overflow: hidden; }
.sh-row.dark { color: #f7f3e7; border-top-color: rgba(247, 243, 231, .12); }
.sh-row.dark .sh-row-text span:not(.done) { font-weight: 700; }
.sh-row.dark small { color: var(--accent); }
.sh-prev-lines { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid rgba(247, 243, 231, .12); }
.sh-prev > .sh-prev-lines:first-child { border-top: 0; }
.sh-prev-line { display: flex; align-items: flex-start; gap: 8px; }
.sh-prev-line i { width: 44px; flex-shrink: 0; padding-top: 6px; font-style: normal; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
.sh-prev-line > span { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-prev-line b, .sh-prev-line button { height: 28px; line-height: 28px; padding: 0 10px; border: 0; border-radius: 14px; font-size: 14px; font-weight: 700; }
.sh-prev-line .stop { background: #f7f3e7; color: #2f3636; }
.sh-prev-line .low { background: rgba(247, 243, 231, .14); color: #f7f3e7; font-weight: 400; }
.sh-prev-line button { cursor: pointer; transition: transform var(--t-press) var(--ease-std), box-shadow var(--t-micro) ease, opacity .25s ease; }
.sh-prev-line button.sh-picked { box-shadow: 0 0 0 2px var(--accent); }
.sh-prev-line button.sh-gone { opacity: 0; transform: scale(.7); }
.sh-pop { position: fixed; z-index: 60; display: flex; gap: 6px; padding: 6px; border-radius: 22px; background: var(--card); box-shadow: 0 10px 30px rgba(47, 54, 54, .28); transform-origin: 50% 0; }
.sh-pop-btn { min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 20px; background: var(--fill); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; cursor: pointer; }
.sh-pop-btn.ttk { background: var(--accent); color: #2f3636; }
.sh-pop-btn:active { transform: scale(.92); }
.sh-evening.red { color: #c0392b; font-weight: 700; }
.sh-act.red { box-shadow: inset 0 0 0 2px #c0392b; }
.sh-act.red .sh-act-text small { color: #c0392b; font-weight: 700; }
.sh-act.red .sh-tile { background: rgba(192, 57, 43, .12); color: #c0392b; }
.sh-task-head { display: flex; align-items: center; gap: 12px; padding: 14px; font-size: 18px; }
.sh-tile { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--accent-soft); color: var(--warn-ink); display: flex; align-items: center; justify-content: center; }
.sh-tile.soft { background: var(--fill); color: var(--text); }
.sh-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sh-act { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 0; border-radius: 18px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sh-act-top { display: flex; justify-content: space-between; align-items: center; }
.sh-act-text { display: flex; flex-direction: column; gap: 2px; }
.sh-act-text b { font-size: 17px; }
.sh-act-text small { font-size: 13px; color: var(--muted); }
.sh-act.sh-busy { opacity: .6; pointer-events: none; }
.sh-act-thumb { width: 42px; height: 42px; border-radius: 13px; object-fit: cover; background: var(--fill); }
.sh-badge { min-width: 24px; height: 24px; padding: 0 8px; box-sizing: border-box; border-radius: 12px; background: var(--accent); color: #2f3636; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sh-evening { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.sh-feed { padding: 2px 14px; }
.sh-feed-row { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--sep); }
.sh-feed-row:first-child { border-top: 0; }
.sh-feed-row > b { width: 44px; flex-shrink: 0; font-size: 14px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.sh-feed-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; }
.sh-feed-row small { font-size: 13px; color: var(--muted); }
.sh-widget { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 0; border-radius: 20px; background: #2f3636; color: #f7f3e7; font: inherit; text-align: left; cursor: pointer; }
.sh-widget-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--accent); }
.sh-widget-top > span { display: flex; flex-direction: column; gap: 2px; color: #f7f3e7; }
.sh-widget-top i { font-style: normal; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
.sh-widget-top b { font-size: 20px; }
.sh-widget-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-widget-chips span { min-height: 28px; line-height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(247, 243, 231, .12); font-size: 13px; white-space: nowrap; }
.sh-widget-chips span.done { background: rgba(233, 197, 29, .22); color: var(--accent); }
/* формы */
.sh-pair { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 18px; background: var(--card); }
.sh-pair-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sh-pair-photos .sh-thumb, .sh-pair-photos .sh-add { aspect-ratio: 1; }
.sh-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--fill); }
.sh-thumb.tall { aspect-ratio: 3 / 4; }
.sh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--t-std) ease; }
.sh-thumb.ready img { opacity: 1; }
.sh-thumb-x { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border: 0; border-radius: 15px; background: rgba(47, 54, 54, .72); color: #f7f3e7; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-thumb.pending { display: flex; align-items: center; justify-content: center; }
.sh-spin { width: 26px; height: 26px; border-radius: 13px; border: 3px solid rgba(var(--ink-rgb), .18); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.sh-add { aspect-ratio: 3 / 4; border: 2px dashed rgba(var(--ink-rgb), .25); border-radius: 12px; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--warn-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sh-add span { color: var(--ink); }
.sh-seg { position: relative; display: flex; gap: 4px; padding: 3px; border-radius: 14px; background: var(--fill); }
/* плашка выбора одна и переезжает — кнопки не перерисовываются */
.sh-seg-plate { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 5px); border-radius: 11px; background: #2f3636; opacity: 0; transform: translateX(0); transition: transform 380ms var(--ease-ios), opacity 200ms ease; }
.sh-seg[data-s="open"] .sh-seg-plate { opacity: 1; }
.sh-seg[data-s="sold"] .sh-seg-plate { opacity: 1; transform: translateX(calc(100% + 4px)); }
.sh-seg-btn { position: relative; flex: 1; height: 40px; border: 0; border-radius: 11px; background: none; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; transition: color 250ms ease; }
.sh-seg-btn.on { color: #f7f3e7; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .sh-seg-btn { color: var(--muted); }
  .sh-seg-btn.on { color: var(--accent); }
  .sh-seg-plate { background: #161b1d; box-shadow: inset 0 0 0 1px rgba(233, 197, 29, .38); }
}
.sh-pair.single { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sh-pair.single .sh-pair-photos { grid-template-columns: minmax(0, 1fr); }
.sh-pair.single .sh-seg { flex-direction: column; }
.sh-pair.single .sh-seg-btn { height: auto; }
.sh-pair.single .sh-seg-plate { right: 3px; width: auto; bottom: auto; height: calc(50% - 5px); }
.sh-pair.single .sh-seg[data-s="sold"] .sh-seg-plate { transform: translateY(calc(100% + 4px)); }
.sh-more-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-more { height: 52px; border: 2px dashed rgba(var(--ink-rgb), .25); border-radius: 18px; background: none; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.sh-more svg { color: var(--warn-ink); }
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sh-grid.four .sh-thumb, .sh-grid.four .sh-add { aspect-ratio: 1; }
.sh-grid .sh-add span { font-size: 13px; }
.sh-field { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-radius: 16px; background: var(--card); }
.sh-field .gh { padding: 0; }
.sh-field textarea { width: 100%; border: 0; outline: none; resize: none; background: none; font: inherit; font-size: 16px; color: var(--text); padding: 0; }
.sh-bottom-gap { height: 90px; }
.sh-list { border-radius: 16px; }
.sh-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--sep); }
.sh-item:first-child { border-top: 0; }
.sh-food-thumb { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--fill); color: #c9b98a; display: flex; align-items: center; justify-content: center; }
.sh-food-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-item-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.sh-item-text b { font-size: 16px; }
.sh-item-text small { font-size: 13px; color: var(--muted); }
.sh-step { display: flex; align-items: center; gap: 8px; }
.sh-step b { min-width: 18px; text-align: center; font-size: 17px; }
.sh-step button { width: 34px; height: 34px; border: 0; border-radius: 17px; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-step button.plus { background: var(--accent-soft); color: #2f3636; }
.sh-searchbox { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 23px; background: var(--card); color: var(--muted); }
.sh-searchbox.small { height: 40px; border-radius: 20px; background: var(--fill); }
.sh-searchbox input { border: 0; outline: none; background: none; font: inherit; font-size: 16px; flex-grow: 1; color: var(--text); min-width: 0; }
.sh-results { display: flex; flex-direction: column; gap: 8px; }
.sh-ing { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--sep); flex-wrap: wrap; }
.sh-ing:first-child { border-top: 0; }
.sh-ing-name { flex: 1 1 100%; font-size: 16px; font-weight: 700; }
.sh-ing-ctrl { display: flex; align-items: center; gap: 8px; flex-grow: 1; }
.sh-ing-amount { width: 76px; height: 36px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 10px; background: var(--fill); font: inherit; font-size: 16px; font-weight: 700; color: var(--text); }
.sh-units { display: flex; gap: 2px; padding: 2px; border-radius: 12px; background: var(--fill); }
.sh-units button { height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.sh-units button.on { background: #2f3636; color: #f7f3e7; font-weight: 700; }
.sh-ing-x { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 17px; background: none; color: var(--faint); display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; }
.sh-ing-add { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border-top: 1px solid var(--sep); color: var(--warn-ink); }
.sh-list > .sh-ing-add:first-child { border-top: 0; }
.sh-ing-add input { border: 0; outline: none; background: none; font: inherit; font-size: 16px; flex-grow: 1; color: var(--text); min-width: 0; }
.sh-todo { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 4px 0 14px; border-top: 1px solid var(--sep); font-size: 16px; }
.sh-todo:first-child { border-top: 0; }
.sh-todo > span:nth-child(2) { flex-grow: 1; }
.sh-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 4px; background: var(--accent); }
.sh-hbox { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.sh-hlabel { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--warn-ink); }
.sh-hchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-hchip { height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: var(--fill); color: var(--text); font: inherit; font-size: 14px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.sh-hchip.low { background: var(--accent-soft); color: #2f3636; font-weight: 700; }
.sh-hchip.stop { background: #2f3636; color: #f7f3e7; font-weight: 700; }
.sh-hchip.stop svg { color: var(--accent); }
.sh-sum { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: #2f3636; color: #f7f3e7; }
.sh-sum > span { display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.sh-sum i { font-style: normal; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
.sh-ing-sug { display: flex; flex-direction: column; gap: 6px; }
.sh-ing-sug:empty { display: none; }
.sh-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-sug { max-width: 100%; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: var(--card); color: var(--text); font: inherit; font-size: 14px; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-sug i { flex-shrink: 0; }
.sh-sug i { font-style: normal; font-size: 12px; color: var(--muted); }
.sh-sug.add { background: var(--accent-soft); color: #2f3636; font-weight: 700; }
.sh-ings:empty + .sh-ing-add { border-top: 0; }
.sh-sendall { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border: 0; border-radius: 20px; background: #2f3636; color: #f7f3e7; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(47, 54, 54, .2); }
.sh-sendall svg { color: var(--accent); flex-shrink: 0; }
.sh-sendall > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-sendall b { font-size: 18px; }
.sh-sendall small { font-size: 13px; opacity: .75; }
.sh-sendall:disabled { opacity: .6; }
.sh-row.dark.red .sh-box { box-shadow: inset 0 0 0 2px #ff8a7a; }
.sh-row.dark.red .sh-row-text > span { color: #ffb4a8; }
.sh-row.dark.red small { color: #ff8a7a; }
.sh-bread-row .unpaid { color: var(--warn-ink); font-weight: 700; }
.sh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh-tiles .sh-hint { grid-column: 1 / -1; }
.sh-ft { position: relative; border-radius: 16px; background: var(--card); transition: box-shadow 200ms ease; }
.sh-ft.on { box-shadow: inset 0 0 0 2px var(--accent); }
.sh-ft-main { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.sh-ft-main:active .sh-ft-img { transform: scale(.94); }
.sh-ft-img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--fill); color: #c9b98a; display: flex; align-items: center; justify-content: center; transition: transform 120ms ease; }
.sh-ft-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-ft-name { padding: 0 2px; font-size: 13px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-ft-badge { position: absolute; right: 10px; top: 10px; min-width: 30px; height: 30px; padding: 0 8px; box-sizing: border-box; border-radius: 15px; background: #2f3636; color: var(--accent); font-size: 16px; font-weight: 700; line-height: 30px; text-align: center; pointer-events: none; }
.sh-ft:not(.on) .sh-ft-badge, .sh-ft:not(.on) .sh-ft-minus { display: none; }
.sh-ft-minus { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; border: 0; border-radius: 15px; background: rgba(255, 255, 255, .9); color: #2f3636; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(47, 54, 54, .2); touch-action: manipulation; }
.sh-picked-sum { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 4px; font-size: 14px; color: var(--muted); }
.sh-picked-sum:empty { display: none; }
.sh-picked-sum b { color: var(--text); }
.sh-cats { margin: 0 -16px; padding: 0 16px; }
.sh-subs[hidden] { display: none; }
/* без фото — пастельно-жёлтая плашка с первыми буквами названия */
.sh-ft-img.abbr { background: #faf0cc; }
.sh-ft-abbr { font-size: 30px; font-weight: 700; letter-spacing: 1px; color: #c2a43c; }
@media (prefers-color-scheme: dark) {
  .sh-ft-img.abbr { background: rgba(233, 197, 29, 0.13); }
  .sh-ft-abbr { color: #e6cf7a; }
}
.sh-sug-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* полноэкранный просмотр фото смены */
.sh-viewer { position: fixed; inset: 0; z-index: 9500; touch-action: pan-x pan-y; }
.sh-v-bg { position: absolute; inset: 0; background: #111414; }
.sh-v-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.sh-v-track::-webkit-scrollbar { display: none; }
.sh-v-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sh-v-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; will-change: transform; }
.sh-v-slide.zoom { align-items: flex-start; justify-content: flex-start; overflow: auto; }
.sh-v-slide.zoom img { flex-shrink: 0; margin: auto; max-width: none; max-height: none; width: 250%; height: auto; }
.sh-v-x { position: absolute; right: 14px; top: calc(var(--top-inset) + 10px); width: 38px; height: 38px; border: 0; border-radius: 19px; background: rgba(255, 255, 255, .16); color: #f7f3e7; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sh-v-n { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); transform: translateX(-50%); padding: 5px 12px; border-radius: 14px; background: rgba(255, 255, 255, .16); color: #f7f3e7; font-size: 13px; font-variant-numeric: tabular-nums; pointer-events: none; }
.sh-thumb img { cursor: zoom-in; }

/* акцизная марка прочиталась / нет */
.sh-code { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px 0 6px; border-radius: 11px; background: rgba(47, 54, 54, .78); color: #b7e07a; font-size: 12px; font-weight: 700; pointer-events: none; }
.sh-pair.bad { box-shadow: inset 0 0 0 2px rgba(214, 84, 64, .55); }
.sh-code-warn { display: flex; gap: 8px; align-items: flex-start; padding: 2px 4px; color: #c2503f; font-size: 14px; line-height: 1.3; }
.sh-code-warn svg { flex-shrink: 0; margin-top: 2px; }
.sh-pair.single .sh-code-warn { grid-column: 1 / -1; grid-row: 2; }
@media (prefers-color-scheme: dark) { .sh-code-warn { color: #f08a78; } }

/* задачи на сегодня от админа */
.sh-adm-item { position: relative; display: flex; align-items: stretch; }
.sh-adm-item .sh-row { flex: 1; min-width: 0; }
.sh-adm-x { flex-shrink: 0; width: 44px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-adm-add { display: flex; gap: 8px; align-items: center; padding: 10px 12px 12px; }
.sh-adm-list .sh-adm-item + .sh-adm-add, .sh-adm-list .sh-adm-item + .sh-adm-item { border-top: 1px solid var(--sep); }
.sh-adm-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--fill); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.sh-adm-input::placeholder { color: var(--faint); }
.sh-adm-btn { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--accent); color: #2f3636; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* оценка рецепта */
.rcp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rcp-rating { display: inline-flex; align-items: baseline; gap: 3px; flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.rcp-rating i { font-style: normal; color: var(--accent); }
.rcp-rating small { font-size: 13px; font-weight: 400; color: var(--muted); }
.rcp-rating.dark { color: var(--on-ink); margin-left: auto; }
.rcp-rating.dark small { color: inherit; opacity: 0.7; }
.rcp-base-head .rcp-rating.dark + .rcp-pill { margin-left: 0; }
.rcp-meta-rating:empty { display: none; }
.rcp-rate-avg { display: inline-flex; align-items: baseline; gap: 4px; font-size: 14px; color: var(--muted); }
.rcp-rate-stars { display: flex; justify-content: space-between; max-width: 300px; margin: 0 auto; width: 100%; }
.rcp-rate-stars .ej-rate-star { width: 52px; height: 52px; font-size: 38px; }

/* описание вкуса по рецепту */
.rcp-taste-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border: 0; border-radius: 23px; background: var(--accent-soft); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; }
.rcp-taste-body { font-size: 15px; color: var(--muted); }
.rcp-taste-body b { color: var(--text); }
.rcp-taste-last { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }

/* фильтр: вкус «на потом» */
.ej-later { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; border: 0; border-radius: 18px; background: none; color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; }
.ej-later span { text-decoration: underline; text-underline-offset: 3px; }
.ej-later small { font-size: 13px; font-weight: 400; color: var(--muted); }
.ej-untasted { align-self: flex-start; padding: 3px 10px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; font-weight: 700; }
.ej-untasted.dark { background: rgba(233, 197, 29, .18); color: var(--accent); }
button.ej-more-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ej-more-row .ej-untasted { grid-column: 3; grid-row: 1; }

/* фото витрин: первое снято, ждём второе */
.sh-vitrina.wait { position: relative; box-shadow: inset 0 0 0 2px var(--accent); }
.sh-vitrina-hit { position: absolute; inset: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.sh-vitrina.wait > *:not(.sh-vitrina-hit) { pointer-events: none; }
.sh-vitrina.wait .sh-vitrina-x { pointer-events: auto; position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border: 0; border-radius: 14px; background: var(--fill); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-vitrina.wait .sh-act-text small { padding-right: 30px; }

/* ===== бета: общее ===== */
.op-pop { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border-radius: 16px; background: var(--card); color: var(--text); box-shadow: 0 10px 30px rgba(47, 54, 54, .28); transform-origin: 90% 0; }
.op-pop-head { padding: 6px 10px 4px; font-size: 12px; color: var(--muted); }
.op-pop-foot { padding: 4px 10px 6px; font-size: 12px; color: var(--faint); }
.op-pop-row { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.op-pop-row:active { background: var(--fill); }
.op-pop-row .dot { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.op-pop-row .dot.y { background: var(--accent); }
.op-pop-row .dot.d { background: #2f3636; }
.op-pop-row.danger { color: #a8402f; }

/* ===== остатки зерна ===== */
.stk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.stk-toggle { flex-shrink: 0; height: 38px; margin-bottom: 4px; padding: 0 14px; border: 0; border-radius: 19px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.stk-toggle.on { background: var(--fill); color: var(--text); }
.stk-sum:empty { display: none; }
.stk-sum { display: flex; flex-direction: column; gap: 8px; }
.stk-totals { display: flex; gap: 8px; }
.stk-total { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 16px; background: var(--card); }
.stk-total i { font-style: normal; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.stk-total b { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-total.esp { background: #2f3636; color: #f7f3e7; }
.stk-total.esp i { color: var(--accent); }
.stk-total.low b { color: #d9584b; }
.stk-total.esp.low b { color: #ff8a7a; }
.stk-warn { padding: 0 4px; font-size: 13px; line-height: 1.35; color: #a8402f; }
.stk-hint { padding: 0 4px; font-size: 14px; color: var(--muted); }
.stk-side { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.stk-kg { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.stk-kg b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stk-kg b small { font-size: 13px; font-weight: 400; color: var(--muted); }
.stk-kg > small { font-size: 12px; white-space: nowrap; color: var(--faint); }
.stk-kg > small.old, .stk-row small .old { color: #a8402f; font-weight: 700; }
.stk-tag { width: 40px; height: 40px; border-radius: 14px; background: var(--fill); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.stk-tag:active { transform: scale(.9); }
.stk-list { display: flex; flex-direction: column; border-radius: 20px; background: var(--card); overflow: hidden; }
.stk-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.stk-row + .stk-row { border-top: 1px solid var(--sep); }
.stk-row-text { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.stk-row-text b { font-size: 16px; }
.stk-row-text small { font-size: 12px; color: var(--muted); }
.stk-step { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 16px; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stk-step:active { transform: scale(.9); }
.stk-field { flex-shrink: 0; width: 78px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; background: var(--bg); transition: background var(--t-micro); }
.stk-field.changed { background: var(--warn-bg); }
.stk-input { width: 44px; border: 0; background: none; color: var(--text); font: inherit; font-size: 19px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; padding: 0; outline: none; }
.stk-field small { font-size: 13px; color: var(--muted); }
.stk-bar { position: sticky; bottom: calc(16px + var(--safe-bottom)); z-index: 5; display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.stk-bar small { text-align: center; font-size: 13px; color: var(--muted); }
.stk-bar .ej-btn-main { width: 100%; flex-grow: 0; }

/* ===== хлеб: бронь ===== */
.br-sec { display: flex; flex-direction: column; gap: 10px; }
.br-gh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.br-gh small, .br-link { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
.br-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--warn-ink); display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.br-label { margin-top: 6px; }
.br-strip { display: flex; gap: 5px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.br-strip::-webkit-scrollbar { display: none; }
.br-day { flex: 0 0 46px; scroll-snap-align: start; height: 66px; border: 0; border-radius: 15px; background: var(--card); color: var(--text); font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; transition: background var(--t-micro), color var(--t-micro); }
.br-day small { font-size: 12px; opacity: .8; }
.br-day b { font-size: 20px; line-height: 1.1; }
.br-day i { font-style: normal; font-size: 10px; font-weight: 700; min-height: 12px; }
.br-day.far { box-shadow: inset 0 0 0 1px var(--sep); }
.br-day.on { background: #2f3636; color: #f7f3e7; box-shadow: none; }
.br-day:active { transform: scale(.94); }
.br-staff { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 14px; line-height: 1.3; color: var(--ink); }
.br-staff svg { color: var(--warn-ink); flex-shrink: 0; }
.br-ft.off:not(.on) { opacity: .8; }
.br-ft.off .sh-ft-img.abbr { background: #efeadb; }
.br-ft.off .sh-ft-abbr { color: #b3ab95; }
.br-ft.bad { box-shadow: inset 0 0 0 2px #d9584b; }
.sh-ft-img { position: relative; }
.br-off { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 20px; line-height: 20px; border-radius: 10px; background: #c2503f; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.br-warn { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #fdf1ee; box-shadow: inset 0 0 0 2px #e8a597; }
.br-warn-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: #c2503f; color: #fff; display: flex; align-items: center; justify-content: center; }
.br-warn > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.br-warn b { font-size: 16px; color: #8c3326; }
.br-warn small { font-size: 14px; color: #6b2c22; }
.br-comment { height: 50px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--card); color: var(--text); font: inherit; font-size: 17px; outline: none; }
.br-bar { position: sticky; bottom: calc(14px + var(--safe-bottom)); z-index: 5; margin-top: 10px; }
.br-send { width: 100%; height: 58px; border: 0; border-radius: 18px; background: #2f3636; color: #f7f3e7; font: inherit; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 8px 24px rgba(47, 54, 54, .2); }
.br-send svg { color: var(--accent); }
.br-send.off { background: #e6e1d4; color: #8a9393; box-shadow: none; pointer-events: none; }
.br-send.off svg { color: inherit; }
.br-done { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 40px; text-align: center; }
.br-done-ic { width: 104px; height: 104px; border-radius: 52px; background: var(--accent); color: #2f3636; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(233, 197, 29, .22); }
.br-done-title { display: flex; flex-direction: column; gap: 6px; }
.br-done-title b { font-size: 28px; line-height: 1.15; }
.br-done-title small { font-size: 17px; color: var(--muted); }
.br-done-card { width: 100%; display: flex; flex-direction: column; border-radius: 18px; background: var(--card); text-align: left; overflow: hidden; }
.br-done-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 16px; }
.br-done-row + .br-done-row { border-top: 1px solid var(--sep); }
.br-done-row.meta { font-size: 15px; color: var(--muted); }
.br-done-row .ok { color: #4e7a2f; }
.br-done-row .no { color: #a8402f; }
.br-done-note { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--fill); text-align: left; font-size: 14px; color: var(--ink); }
.br-done-note svg { color: var(--warn-ink); flex-shrink: 0; }
.br-done-btns { width: 100%; display: flex; gap: 8px; margin-top: 6px; }
.br-done-btn { flex: 1; height: 54px; border: 0; border-radius: 18px; background: #2f3636; color: #f7f3e7; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.br-done-btn.ghost { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 2px var(--sep); }

/* ===== план выпечки ===== */
.bp-grid { display: flex; flex-direction: column; padding: 8px 0; border-radius: 20px; background: var(--card); }
.bp-row { display: grid; grid-template-columns: 96px repeat(7, minmax(0, 1fr)); align-items: center; min-height: 44px; padding: 3px 8px; }
.bp-row + .bp-row { border-top: 1px solid var(--sep); }
.bp-row.head { min-height: 30px; }
.bp-name { font-size: 13px; font-weight: 700; line-height: 1.2; padding-right: 4px; }
.bp-wd { justify-self: center; width: 30px; height: 24px; line-height: 24px; text-align: center; border-radius: 12px; font-size: 13px; color: var(--muted); }
.bp-wd.today { background: #2f3636; color: var(--accent); font-weight: 700; }
.bp-wd.sel { color: var(--text); font-weight: 700; }
.bp-cell { justify-self: center; width: 34px; height: 34px; border: 0; border-radius: 11px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; background: none; color: var(--text); box-shadow: inset 0 0 0 2px #e6e1d4; }
.bp-cell.on { background: var(--accent-soft); box-shadow: none; color: #2f3636; }
.bp-cell.on.today { background: var(--accent); }
.bp-cell.unset { color: var(--faint); box-shadow: inset 0 0 0 1px var(--sep); }
.bp-cell.sel { box-shadow: 0 0 0 2px #2f3636; }
.bp-row.total span:not(:first-child) { justify-self: center; font-size: 14px; font-weight: 700; }
.bp-row.total span:first-child { font-size: 13px; color: var(--muted); }
.bp-edit { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--card); }
.bp-edit > span { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.bp-edit > span b { font-size: 16px; }
.bp-edit > span small { font-size: 13px; color: var(--muted); }
.bp-n { min-width: 30px; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.bp-hint { margin: -6px 4px 0; font-size: 13px; color: var(--muted); }
.bp-book { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: baseline; padding: 12px 14px; font-size: 15px; }
.bp-book + .bp-book { border-top: 1px solid var(--sep); }
.bp-book small { font-size: 13px; color: var(--muted); }

/* ===== плашка смены: стоп-лист ===== */
.sh-widget-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sh-widget-stop i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #ff9a8a; margin-right: 2px; }
.sh-widget-stop span { height: 28px; line-height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(217, 88, 75, .28); color: #fff; font-size: 13px; }
.sh-widget-stop span.more { background: rgba(247, 243, 231, .12); }
.sh-photo-ic { flex-shrink: 0; margin-left: auto; color: var(--muted); display: flex; }

/* ===== переключатель ===== */
.op-switch { position: relative; flex-shrink: 0; width: 50px; height: 30px; border: 0; border-radius: 15px; background: rgba(78, 89, 89, .2); cursor: pointer; padding: 0; transition: background var(--t-micro); }
.op-switch i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(47, 54, 54, .25); transition: transform var(--t-std) var(--spring); }
.op-switch.on { background: var(--accent); }
.op-switch.on i { transform: translateX(20px); }

/* ===== объявления ===== */
#ann-wrap:empty, #adm-wrap:empty { display: none; }
.ann-list { display: flex; flex-direction: column; gap: 8px; }
.ann-plate { position: relative; display: flex; align-items: stretch; border-radius: 18px; overflow: hidden; }
.ann-plate.imp { background: #fdf1ee; box-shadow: inset 0 0 0 2px #e8a597; }
.ann-plate.info { background: var(--warn-bg); }
.ann-open { flex-grow: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ann-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.ann-plate.imp .ann-ic { background: #c2503f; color: #fff; }
.ann-plate.info .ann-ic { background: var(--accent); color: #2f3636; }
.ann-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ann-text i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.ann-plate.imp .ann-text i { color: #a8402f; }
.ann-plate.info .ann-text i { color: var(--warn-ink); }
.ann-text b { font-size: 16px; line-height: 1.25; color: #2f3636; }
.ann-x { flex-shrink: 0; width: 44px; border: 0; background: none; color: var(--warn-ink); cursor: pointer; }
.ann-page { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; background: var(--card); }
.ann-page.imp { box-shadow: inset 0 0 0 2px #e8a597; }
.ann-page.tight { padding: 16px; }
.ann-badge { align-self: flex-start; height: 24px; line-height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.ann-page.imp .ann-badge { background: #c2503f; color: #fff; }
.ann-page.info .ann-badge { background: var(--accent); color: #2f3636; }
.ann-page > small { font-size: 13px; color: var(--muted); margin-top: -4px; }
.ann-body { font-size: 17px; line-height: 1.45; }
.ann-ack, .ann-close { height: 52px; border: 0; border-radius: 18px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ann-ack { margin-top: 8px; background: #2f3636; color: #f7f3e7; }
.ann-ack.done { background: var(--accent); color: #2f3636; }
.ann-close { background: var(--fill); color: var(--text); }

/* ===== админка: плашка и хаб ===== */
.adm-widget { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.adm-widget > svg:last-child { color: var(--muted); flex-shrink: 0; }
.adm-widget-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--accent); color: #2f3636; display: flex; align-items: center; justify-content: center; }
.adm-widget-text { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.adm-widget-text b { font-size: 17px; }
.adm-widget-text small { font-size: 13px; color: var(--muted); }
.adm-red { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #d9584b; color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; flex-shrink: 0; }
.adm-live { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 22px; background: #2f3636; color: #f7f3e7; }
.adm-live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 4px; }
.adm-live-head span { font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.adm-live-head small { font-size: 14px; color: rgba(247, 243, 231, .7); text-align: right; }
.adm-live-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 16px; }
.adm-live-row + .adm-live-row { border-top: 1px solid rgba(247, 243, 231, .1); }
.adm-live-row > span:nth-child(2) { flex-grow: 1; }
.adm-live-row small { font-size: 14px; color: rgba(247, 243, 231, .7); text-align: right; }
.adm-live-row small.bad { color: #f3b9a8; }
.adm-st { width: 22px; height: 22px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.adm-st.ok { background: var(--accent); color: #2f3636; }
.adm-st.bad { background: #c2503f; color: #fff; font-size: 14px; font-weight: 700; }
.adm-st.empty { box-shadow: inset 0 0 0 2px rgba(120, 130, 130, .45); }
.adm-group { display: flex; flex-direction: column; border-radius: 20px; background: var(--card); overflow: hidden; }
.adm-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.adm-row + .adm-row { border-top: 1px solid var(--sep); }
.adm-row > .chev { color: var(--muted); flex-shrink: 0; }
.adm-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--accent-soft); color: var(--warn-ink); display: flex; align-items: center; justify-content: center; }
.adm-row-text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-row-text b { font-size: 17px; }
.adm-row-text small { font-size: 14px; color: var(--muted); line-height: 1.3; }
.adm-pill { flex-shrink: 0; height: 24px; line-height: 24px; padding: 0 8px; border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 700; }
.adm-pill.red { background: #fbe3dd; color: #a8402f; }

/* ===== админка: задачи ===== */
.at-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: var(--card); }
.at-label { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.at-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1.35; outline: none; resize: none; }
.at-input.one { height: 44px; padding: 0 12px; }
.at-days { display: flex; gap: 6px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.at-days::-webkit-scrollbar { display: none; }
.at-day { flex-shrink: 0; min-width: 62px; height: 52px; padding: 0 10px; border: 0; border-radius: 14px; background: var(--bg); color: var(--text); font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.at-day b { font-size: 14px; }
.at-day small { font-size: 12px; opacity: .75; }
.at-day.on { background: #2f3636; color: #f7f3e7; }
.at-week { display: flex; gap: 6px; flex-wrap: wrap; }
.at-wd { flex: 1 0 0; min-width: 38px; height: 40px; border: 0; border-radius: 12px; background: var(--bg); color: var(--faint); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.at-wd.wide { color: var(--text); font-weight: 400; min-width: 70px; }
.at-wd.on { background: var(--accent); color: #2f3636; }
.at-wd.dark { background: #2f3636; color: #f7f3e7; font-weight: 700; }
.at-hint { font-size: 13px; color: var(--muted); }
.at-hint.wide { margin: 0 4px; font-size: 14px; }
.at-switch { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.at-switch > span { flex-grow: 1; display: flex; flex-direction: column; }
.at-switch b { font-size: 16px; }
.at-switch small { font-size: 13px; color: var(--muted); }
.at-add { width: 100%; flex-grow: 0; margin-top: 4px; }
.at-item { display: flex; align-items: center; gap: 10px; padding: 12px 6px 12px 14px; }
.at-item + .at-item { border-top: 1px solid var(--sep); }
.at-item.done .at-item-text b { text-decoration: line-through; color: var(--muted); }
.at-item-text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.at-item-text b { font-size: 16px; }
.at-item-text b.muted { color: var(--faint); font-weight: 400; }
.at-item-text small { font-size: 13px; color: var(--muted); }
.at-empty { margin: 0; padding: 14px; font-size: 15px; color: var(--faint); }
.at-dts { display: flex; flex-direction: column; }
.at-dt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.at-dt + .at-dt { border-top: 1px solid var(--sep); }
.at-dt > svg { color: var(--faint); flex-shrink: 0; }
.at-dt-wd { width: 36px; height: 28px; line-height: 28px; flex-shrink: 0; border-radius: 14px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 700; text-align: center; }
.at-dt-wd.on { background: var(--accent); color: #2f3636; }
.at-dt.edit { align-items: flex-start; cursor: default; }
.at-dt-form { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.at-dt-btns { display: flex; gap: 8px; justify-content: flex-end; }
.at-mini { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: #2f3636; color: #f7f3e7; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.at-mini.ghost { background: var(--fill); color: var(--text); }

/* ===== админка: итоги ===== */
.rp-nav { display: flex; align-items: center; gap: 10px; }
.rp-nav > span { flex-grow: 1; display: flex; flex-direction: column; text-align: center; }
.rp-nav b { font-size: 17px; }
.rp-nav small { font-size: 13px; color: var(--muted); }
.rp-nav .stk-step:disabled { opacity: .35; }
.rp-sum { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--card); }
.rp-sum > b { font-size: 30px; font-variant-numeric: tabular-nums; color: #4e7a2f; }
.rp-sum.bad > b { color: #a8402f; }
.rp-sum > span { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 700; }
.rp-sum small { font-size: 14px; font-weight: 400; color: var(--muted); }
.rp-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.rp-row + .rp-row { border-top: 1px solid var(--sep); }
.rp-row .adm-st { margin-top: 1px; }
.rp-row .adm-st.empty { box-shadow: inset 0 0 0 2px var(--sep); }
.rp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-text b { font-size: 16px; }
.rp-text small { font-size: 13px; color: var(--muted); }
.as-unit { font-size: 13px; color: var(--muted); margin-left: -6px; }

/* ===== админка: объявления ===== */
.an-item { display: flex; align-items: stretch; border-radius: 18px; background: var(--card); overflow: hidden; }
.an-item.imp { box-shadow: inset 4px 0 0 #c2503f; }
.an-item.info { box-shadow: inset 4px 0 0 var(--accent); }
.an-item-main { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 18px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.an-item-main b { font-size: 16px; margin-top: 2px; }
.an-item-main small { font-size: 13px; color: var(--muted); }
.an-tag { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--warn-ink); }
.an-item.imp .an-tag { color: #a8402f; }
.an-rm { flex-shrink: 0; padding: 0 16px; border: 0; border-left: 1px solid var(--sep); background: none; color: #a8402f; font: inherit; font-size: 15px; cursor: pointer; }
.an-arch { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.an-arch + .an-arch { border-top: 1px solid var(--sep); }
.an-arch small { flex-shrink: 0; font-size: 13px; color: var(--muted); }
.ak-sum { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--card); }
.ak-ring { width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg) 0); display: flex; align-items: center; justify-content: center; position: relative; }
.ak-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.ak-ring b { position: relative; z-index: 1; font-size: 18px; }
.ak-sum > span:last-child { display: flex; flex-direction: column; }
.ak-sum b { font-size: 17px; }
.ak-sum small { font-size: 14px; color: var(--muted); }
.ak-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ak-row + .ak-row { border-top: 1px solid var(--sep); }
.ak-av { width: 36px; height: 36px; flex-shrink: 0; border-radius: 18px; background: var(--accent-soft); color: var(--warn-ink); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ak-av.wait { background: var(--fill); color: var(--muted); }
.ak-text { display: flex; flex-direction: column; min-width: 0; }
.ak-text b { font-size: 16px; }
.ak-text small { font-size: 13px; color: var(--muted); }

/* ===== админка: календарь списаний ===== */
.ws-cal { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 22px; background: var(--card); }
.ws-cal-head { display: flex; justify-content: space-between; align-items: center; }
.ws-cal-head b { font-size: 18px; }
.ws-nav { width: 34px; height: 34px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ws-nav:disabled { opacity: .35; }
.ws-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; -webkit-user-select: none; user-select: none; }
.ws-wd { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 2px; }
.ws-cell { height: 46px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ws-cell.band { background: var(--accent-soft); }
.ws-cell.band-l { background: linear-gradient(90deg, transparent 50%, var(--accent-soft) 50%); }
.ws-cell.band-r { background: linear-gradient(90deg, var(--accent-soft) 50%, transparent 50%); }
.ws-cell.fut { opacity: .35; cursor: default; }
.ws-day { width: 40px; height: 40px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background var(--t-micro), color var(--t-micro); }
.ws-day span { font-size: 13px; line-height: 1.1; }
.ws-day b { font-size: 10px; min-height: 12px; }
.ws-day.h1 { background: #faf0cc; color: #2f3636; }
.ws-day.h2 { background: #f0d96b; color: #2f3636; }
.ws-day.h3 { background: var(--accent); color: #2f3636; }
.ws-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.ws-day.sel { background: #2f3636; color: #f7f3e7; box-shadow: none; }
.ws-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 2px; font-size: 12px; color: var(--muted); }
.ws-legend span { display: flex; align-items: center; gap: 5px; }
.ws-legend i { width: 12px; height: 12px; border-radius: 4px; }
.ws-legend i.h1 { background: #faf0cc; }
.ws-legend i.h2 { background: #f0d96b; }
.ws-legend i.h3 { background: var(--accent); }
.ws-legend small { flex-basis: 100%; font-size: 12px; }
.ws-title { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.ws-title b { font-size: 20px; }
.ws-title .br-link { font-size: 15px; }
.ws-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ws-tiles span { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 18px; background: var(--card); }
.ws-tiles span.dark { background: #2f3636; color: #f7f3e7; }
.ws-tiles small { font-size: 13px; color: var(--muted); }
.ws-tiles .dark small { color: rgba(247, 243, 231, .7); }
.ws-tiles b { font-size: 26px; }
.ws-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.ws-item + .ws-item { border-top: 1px solid var(--sep); }
.ws-item > span { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.ws-item > span b { font-size: 16px; font-weight: 400; }
.ws-item > span small { font-size: 12px; color: var(--muted); }
.ws-item > b { font-size: 16px; white-space: nowrap; }
.ws-top { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ws-bar { display: flex; flex-direction: column; gap: 5px; }
.ws-bar > span { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; }
.ws-bar > i { display: block; height: 10px; border-radius: 5px; background: var(--bg); overflow: hidden; }
.ws-bar > i > i { display: block; height: 10px; border-radius: 5px; background: var(--accent); }

/* ===== админка: карточки ===== */
.cc-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cc-row + .cc-row { border-top: 1px solid var(--sep); }
.cc-row > span:first-child { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.cc-row b { font-size: 16px; }
.cc-row small { font-size: 13px; color: var(--muted); }
.cc-link { flex-shrink: 0; font-size: 14px; color: var(--warn-ink); }
.as-who { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.as-who + .as-who, .as-pick + .as-who { border-top: 1px solid var(--sep); }
.as-who > svg { color: var(--muted); flex-shrink: 0; }
.as-who-val { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.as-who-val b { font-size: 15px; }
.as-who-val small { font-size: 13px; color: var(--muted); }
.as-who-val small.none { color: #a8402f; }
.as-pick { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; background: var(--bg); border-top: 1px solid var(--sep); }
.as-person { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.as-person + .as-person { border-top: 1px solid var(--sep); }
.as-person .ak-text { flex-grow: 1; }
.as-person > svg { color: var(--warn-ink); flex-shrink: 0; }
.as-person.notg { opacity: .6; }
.as-person.on .ak-av { background: var(--accent); color: #2f3636; }
.as-person.clear { justify-content: center; color: #a8402f; font-size: 15px; }
.stk-kgs { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.stk-kg i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.stk-kind { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; vertical-align: 2px; }
.stk-kind.esp { background: #2f3636; color: var(--accent); }
.stk-kind.flt { background: var(--accent-soft); color: var(--warn-ink); }
.br-off.left { background: #2f3636; color: var(--accent); }
.stk-row-text .stk-kind { align-self: flex-start; margin: 2px 0 1px; }
.stk-pair { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; line-height: 1.15; }
.stk-pair b { font-size: 17px; font-variant-numeric: tabular-nums; }
.stk-pair small { font-size: 12px; color: var(--muted); }
.stk-pair .stk-kind { padding: 1px 5px; font-size: 10px; vertical-align: 0; }
.rp-body { display: flex; flex-direction: column; gap: 16px; transition: opacity var(--t-std); }
.rp-body.loading { opacity: .35; pointer-events: none; }
.rp-spin { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; border: 2px solid var(--sep); border-top-color: var(--warn-ink); animation: rp-spin .7s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.row-soon { cursor: default; opacity: .5; }
.row-soon:active { transform: none; background: none; }
.rp-notify { padding: 12px 14px; border-radius: 18px; background: var(--card); }
.rp-to { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--sep); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rp-to > span { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.rp-to b { font-size: 15px; }
.rp-to small { font-size: 13px; color: var(--muted); }
.rp-to svg { color: var(--faint); flex: none; }
.rt-warn { color: #c0392b; }
.rcp-jump { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-radius: 20px; background: #2f3636; color: #f7f3e7; font: inherit; text-align: left; cursor: pointer; }
.rcp-jump > span:nth-child(2) { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.rcp-jump b { font-size: 17px; }
.rcp-jump small { font-size: 13px; opacity: .75; }
.rcp-jump .chev { color: var(--accent); }
.rcp-jump-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--accent); color: #2f3636; display: flex; align-items: center; justify-content: center; }
.sh-thumb.bad { box-shadow: 0 0 0 3px #d9584b; }

/* ===== бета: мало и закончилось ===== */
.low-hit, .low-row { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; }
.low-hit + .low-hit, .low-row + .low-row { border-top: 1px solid var(--sep); }
.low-hit > span, .low-row > span:nth-child(2) { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.low-hit b, .low-row b { font-size: 16px; }
.low-hit small, .low-row small { font-size: 12px; color: var(--muted); }
.low-btn { flex-shrink: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.low-btn.low { background: var(--accent-soft); color: var(--warn-ink); }
.low-btn.out { background: #fbe3dd; color: #a8402f; }
.low-btn.low.on { background: var(--accent); color: #2f3636; }
.low-btn.out.on { background: #c2503f; color: #fff; }
.low-btn:active { transform: scale(.94); }
.low-badge { flex-shrink: 0; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11px; font-weight: 700; }
.low-badge.low { background: var(--accent); color: #2f3636; }
.low-badge.out { background: #c2503f; color: #fff; }
.low-x { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--fill); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.low-results:empty { display: none; }
.low-hang:empty { display: none; }
.op-pop-row .dot.r { background: #c2503f; }
.low-dot { flex-shrink: 0; width: 34px; height: 34px; margin: -4px -6px -4px 4px; border-radius: 11px; background: var(--fill); color: var(--muted); font-size: 18px; font-weight: 700; line-height: 30px; text-align: center; letter-spacing: 1px; cursor: pointer; }
.low-dot:active { transform: scale(.9); }
.low-mark { display: inline-block; margin-left: 8px; height: 20px; line-height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.low-mark.low { background: var(--accent); color: #2f3636; }
.low-mark.out { background: #c2503f; color: #fff; }
.low-veil { position: fixed; inset: 0; z-index: 80; background: rgba(47, 54, 54, .4); display: flex; align-items: flex-end; }
.low-sheet { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(20px + var(--safe-bottom)); border-radius: 26px 26px 0 0; background: var(--bg); color: var(--text); box-shadow: 0 -10px 30px rgba(47, 54, 54, .2); }
.low-grip { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(78, 89, 89, .25); }
.low-sheet-title { font-size: 22px; }
.low-sheet-sub { font-size: 14px; color: var(--muted); margin-top: -6px; }
.low-opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 0; border-radius: 18px; background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.low-opt.on { box-shadow: inset 0 0 0 2px #2f3636; }
.low-opt > i { width: 22px; height: 22px; flex-shrink: 0; border-radius: 11px; box-shadow: inset 0 0 0 2px rgba(78, 89, 89, .3); }
.low-opt.on > i { background: #2f3636; box-shadow: inset 0 0 0 5px var(--accent); }
.low-opt > span { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.low-opt b { font-size: 17px; }
.low-opt small { font-size: 13px; color: var(--muted); }
.low-base { margin-top: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.low-opt:not(.on) .low-base { display: none; }
.low-go { height: 54px; border: 0; border-radius: 18px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; background: #c2503f; color: #fff; }
.low-go.low { background: var(--accent); color: #2f3636; }
.low-cancel { height: 44px; border: 0; border-radius: 16px; background: var(--fill); color: var(--text); font: inherit; font-size: 16px; cursor: pointer; }
.low-note { font-size: 12px; color: var(--faint); }
.al-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.al-body .br-link { align-self: flex-start; }
.al-body .sh-ing-add { border-radius: 14px; background: var(--bg); }
.al-cat + .al-cat { border-top: 1px solid var(--sep); }

/* ===== бета: сертификат ===== */
.ct-phone { display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 14px; border-radius: 14px; background: var(--card); }
.ct-phone span { font-size: 20px; color: var(--faint); }
.ct-phone input { flex-grow: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 20px; font-variant-numeric: tabular-nums; outline: none; }
.ct-sums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ct-sum { height: 48px; border: 0; border-radius: 14px; background: var(--card); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ct-sum.on { background: #2f3636; color: #f7f3e7; }
.kv:has(.low-dot) .kv-key { margin-right: auto; }
.al-body .an-chips { max-height: none; }
.low-open { width: 100%; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; border: 0; border-radius: 16px; background: var(--card); color: var(--muted); font: inherit; font-size: 16px; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.low-open > span { flex-grow: 1; }
.low-open > b { height: 40px; padding: 0 14px; border-radius: 12px; background: var(--accent); color: #2f3636; font-size: 15px; display: flex; align-items: center; gap: 6px; }
/* смена: «Ещё» — строки в одной карточке */
.sh-more-card { display: flex; flex-direction: column; }
.sh-mrow { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 0; background: none; }
.sh-mrow + .sh-mrow { border-top: 1px solid var(--sep); }
.sh-mrow .sh-tile { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; }
.sh-mrow .sh-act-thumb { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; object-fit: cover; }
.sh-mrow .sh-act-text { flex-grow: 1; min-width: 0; }
.sh-mrow .sh-act-text b { font-size: 16px; }
.sh-mrow .sh-act-text small { font-size: 12px; }
.sh-mrow > .chev { color: var(--muted); flex-shrink: 0; }
.sh-more-card + .sh-sendall { margin-top: 6px; }
label.low-open { cursor: text; padding-right: 14px; }
.low-open input { flex-grow: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; }
.low-open input::-webkit-search-cancel-button { -webkit-appearance: none; }
.low-shift-res:empty { display: none; }
/* демо-режим */
body.demo::before { content: ""; position: fixed; z-index: 90; left: 0; right: 0; top: 0; height: calc(var(--top-inset) + 3px); border-bottom: 3px solid #c2503f; pointer-events: none; }
body.demo::after { content: "ДЕМО"; position: fixed; z-index: 90; top: calc(var(--top-inset) + 3px); right: 12px; height: 18px; padding: 0 8px; border-radius: 0 0 8px 8px; background: #c2503f; color: #fff; font: 700 10px/18px var(--font); letter-spacing: 1px; pointer-events: none; }
.dm-card { padding: 0 14px; }
.dm-row + .dm-row { border-top: 1px solid var(--sep); }
.dm-row { padding: 10px 0; }

/* ---------- вход из браузера по коду (бета) ---------- */
.wl { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; padding: max(48px, env(safe-area-inset-top, 0px) + 32px) 24px max(28px, env(safe-area-inset-bottom, 0px) + 20px); background: var(--bg); overflow-y: auto; transition: opacity .35s ease; }
.wl::before { content: ""; position: absolute; inset: 0; background-image: url('images/pattern-tile-ink.png'); background-size: 104px auto; opacity: .06; pointer-events: none; }
.wl.ok { opacity: 0; }
.wl-top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wl-logo { width: 62px; height: 96px; object-fit: contain; margin-bottom: 18px; }
.wl-title { margin: 2px 0 0; font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--text); }
.wl-sub { margin: 22px 0 0; font-size: 17px; color: var(--muted); }
.wl-dots { display: flex; gap: 18px; margin-top: 22px; }
.wl-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); transition: background .15s ease, transform .15s ease; }
.wl-dots i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.12); }
.wl-dots.wait i { animation: wl-pulse .8s ease-in-out infinite; }
.wl-dots.wait i:nth-child(2) { animation-delay: .1s; } .wl-dots.wait i:nth-child(3) { animation-delay: .2s; } .wl-dots.wait i:nth-child(4) { animation-delay: .3s; }
.wl-dots.shake { animation: wl-shake .42s ease; }
.wl-msg { min-height: 36px; max-width: 300px; margin: 18px 0 0; font-size: 14px; line-height: 1.3; color: var(--muted); }
.wl-msg.err { color: #c0392b; font-weight: 700; }
.wl-pad { position: relative; display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 26px; justify-content: center; }
.wl-key { width: 76px; height: 76px; border: 0; border-radius: 50%; background: var(--card); color: var(--text); font: 600 30px/1 var(--font); box-shadow: 0 4px 14px rgba(47, 54, 54, .08); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wl-key:active { background: var(--accent); transform: scale(.94); }
.wl-del { background: transparent; box-shadow: none; display: grid; place-items: center; color: var(--muted); }
.wl-del:active { background: var(--fill); }
@keyframes wl-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes wl-pulse { 50% { transform: scale(.7); opacity: .5; } }
@media (max-height: 640px) { .wl-logo { height: 64px; margin-bottom: 8px; } .wl-key { width: 64px; height: 64px; font-size: 26px; } .wl-pad { grid-template-columns: repeat(3, 64px); gap: 12px 22px; } }
.wl-out { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px auto 0; padding: 10px 16px; border: 0; border-radius: 14px; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }

/* коды входа в админке */
.wc-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; }
.wc-edit > span:first-child { flex: 1 1 140px; display: flex; flex-direction: column; }
.wc-edit b { font-size: 16px; }
.wc-edit small { font-size: 13px; color: var(--muted); }
.wc-in { width: 96px; padding: 8px 10px; border: 2px solid var(--accent); border-radius: 12px; background: var(--card); color: var(--text); font: 700 22px/1 var(--font); letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.wc-in:focus { outline: none; }
.wc-code { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #2f3636; color: #f7f3e7; }
.wc-code b { font-size: 34px; letter-spacing: 10px; font-variant-numeric: tabular-nums; color: var(--accent); }
.wc-code span { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.wc-code small { opacity: .75; font-size: 13px; }
.wc-btns { display: flex; gap: 8px; flex: none; }
.wc-btn { padding: 8px 12px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wc-btn.ghost { background: var(--fill); color: var(--muted); font-weight: 400; }

/* правка отправленного списания */
.sh-feed-row { align-items: flex-start; }
.sh-feed-edit { flex: none; margin-left: auto; align-self: center; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--text); cursor: pointer; }
.sh-edit-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; line-height: 1.35; }
.sh-edit-note svg { flex: none; margin-top: 1px; }

/* заметка в передаче смены */
.sh-prev-note { margin: 0; padding: 14px 16px; font-size: 16px; line-height: 1.4; white-space: pre-wrap; border-bottom: 1px solid rgba(247, 243, 231, .12); }
.sh-prev-note:last-child { border-bottom: 0; }
.ho-note { min-height: 72px; }

/* время итогов в личку */
.rp-at { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sep); cursor: pointer; }
.rp-at > span { flex-grow: 1; display: flex; flex-direction: column; }
.rp-at b { font-size: 15px; }
.rp-at small { font-size: 13px; color: var(--muted); }
.rp-time { padding: 8px 12px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--text); font: 700 18px/1 var(--font); font-variant-numeric: tabular-nums; }
.rp-time:focus { outline: 2px solid var(--accent); }

/* клавиатура: окно кончается там, где она начинается; нижнее меню прячем */
:root { --kb: 0px; }
#stage { bottom: var(--kb); }
body.kb-open .dock { transform: translateY(130px); opacity: 0; pointer-events: none; }
body.kb-open .screen-inner { padding-bottom: 96px; }
/* журнал фильтра: предсмачивание по тумблеру */
.rcp-cardbox + .ej-bloom { margin-top: 14px; }
.ej-bloom .at-switch { padding: 12px 16px; }
.ej-bloom-body .ej-slider { border-top: 1px solid var(--sep); }
.ej-bloom-note { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.ej-hero .ej-bloom-note { color: rgba(255, 255, 255, .72); }
/* «Мало и закончилось» в «Смене»: длинный список сворачивается */
.low-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border: 0; border-top: 1px solid var(--sep); background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--muted); cursor: pointer; }
.low-more svg { transform: rotate(90deg); transition: transform var(--t-std) var(--ease-std); }
.low-more.open svg { transform: rotate(-90deg); }
.sh-prev-more { background: rgba(247, 243, 231, .08) !important; color: var(--accent) !important; }

/* ---------- обучение: бесконечный режим (quiz.js) ---------- */

:root {
  --qz-ok: #3f9a5c;
  --qz-ok-sh: #2b7444;
  --qz-ok-bg: #dcefe0;
  --qz-ok-ink: #22603a;
  --qz-bad: #c8553d;
  --qz-bad-sh: #9a3d2a;
  --qz-bad-bg: #f8e1da;
  --qz-bad-ink: #8f2f1d;
  --qz-edge: rgba(var(--ink-rgb), 0.15);
  --qz-acc-sh: #b99a12;
}
@media (prefers-color-scheme: dark) {
  :root {
    --qz-ok-bg: rgba(63, 154, 92, 0.22);
    --qz-ok-ink: #8fd3a5;
    --qz-bad-bg: rgba(200, 85, 61, 0.22);
    --qz-bad-ink: #f0a594;
    --qz-edge: rgba(var(--ink-rgb), 0.2);
  }
}

.qz-pine { flex-shrink: 0; }
.qz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.qz-head .large-title { font-size: 30px; }
.qz-pill { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px 0 9px; border-radius: 17px; background: var(--card); font-weight: 700; font-size: 16px; box-shadow: 0 1px 2px rgba(47, 54, 54, 0.06); flex-shrink: 0; }
.qz-lead { margin: -6px 0 0; font-size: 15px; line-height: 1.35; color: var(--muted); }
.qz-muted { font-size: 13px; color: var(--muted); }

.qz-card { background: var(--card); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.qz-card > b { font-size: 16px; }
.qz-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qz-card-top b { font-size: 16px; }
.qz-card.dark { background: #2f3636; color: #f7f3e7; padding: 16px; }
.qz-card.dark .qz-card-text { color: rgba(247, 243, 231, 0.75); }
.qz-card.soon { opacity: 0.7; }
.qz-eyebrow { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.qz-card.dark .qz-eyebrow { color: var(--accent); }
.qz-card-title { font-size: 22px; line-height: 1.2; font-weight: 700; }
.qz-card-text { font-size: 15px; line-height: 1.35; color: var(--muted); }
.qz-card-btns { display: flex; gap: 8px; margin-top: 2px; }
.qz-chip { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 10px; background: var(--fill); color: var(--muted); white-space: nowrap; }
.qz-chip.y { background: var(--accent); color: var(--on-accent); }

.qz-btn {
  flex-grow: 1; height: 50px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 700;
  box-shadow: 0 4px 0 var(--qz-acc-sh); cursor: pointer;
}
.qz-btn.big { width: 100%; height: 56px; border-radius: 16px; font-size: 18px; }
.qz-btn:disabled { background: var(--fill); color: var(--faint); box-shadow: none; }
.qz-btn.ok { background: var(--qz-ok); color: #fff; box-shadow: 0 4px 0 var(--qz-ok-sh); }
.qz-btn.bad { background: var(--qz-bad); color: #fff; box-shadow: 0 4px 0 var(--qz-bad-sh); }
.qz-btn.ghost { background: transparent; color: var(--text); box-shadow: none; border: 2px solid var(--qz-edge); height: 52px; width: 100%; }
.qz-btn-ic { width: 50px; height: 50px; border: 0; border-radius: 14px; background: rgba(247, 243, 231, 0.12); color: #f7f3e7; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.qz-mini { border: 0; background: none; padding: 8px 0; font-size: 14px; font-weight: 700; color: var(--warn-ink); cursor: pointer; }

.qz-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qz-board { display: flex; flex-direction: column; min-width: 0; }
.qz-board-title { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); padding-bottom: 2px; }
.qz-top-row { min-height: 40px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--sep); }
.qz-board-title + .qz-top-row { border-top: 0; }
.qz-top-me { border-top: 1px dashed var(--qz-edge); min-height: 34px; }
.qz-medal { width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #2f3636; flex-shrink: 0; }
.qz-medal.ghost { background: none; color: var(--muted); }
.qz-top-name { flex-grow: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-top-name.me { font-weight: 700; }
.qz-top-score { display: flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 700; }
.qz-top-score.muted { font-weight: 400; color: var(--muted); font-size: 14px; }
.qz-top-empty { font-size: 14px; color: var(--muted); padding: 8px 0; }

.qz-today { flex-direction: row; align-items: center; }
.qz-today > div { flex-grow: 1; display: flex; flex-direction: column; }
.qz-today b { font-size: 16px; }
.qz-today span { font-size: 13px; color: var(--muted); }
.qz-prices { font-size: 13px; line-height: 1.3; color: var(--muted); text-align: right; }

.qz-what { display: flex; flex-direction: column; gap: 6px; }
.qz-what-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted); }
.qz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qz-chips span { font-size: 13px; padding: 6px 11px; border-radius: 14px; background: var(--fill); color: var(--text-2); }
.qz-wait { font-size: 14px; line-height: 1.35; padding: 10px 12px; border-radius: 14px; background: var(--warn-bg); color: var(--warn-ink); }
.qz-links { display: flex; gap: 8px; }
.qz-link { flex: 1 1 0; min-height: 54px; border: 0; border-radius: 14px; background: var(--card); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13px; padding: 6px 4px; cursor: pointer; }
.qz-link span { color: var(--muted); }

/* игра */
.qz-play-top { display: flex; align-items: center; gap: 10px; margin: -4px 0 6px -8px; }
.qz-x { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.qz-bar { flex-grow: 1; height: 14px; border-radius: 7px; background: rgba(var(--ink-rgb), 0.12); overflow: hidden; }
.qz-bar i { display: block; height: 100%; border-radius: 7px; background: var(--accent); transition: width var(--t-std) var(--ease-std); }
.qz-total { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 700; }
.qz-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 230px; }
.qz-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qz-tag { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 10px; background: var(--fill); color: var(--ink); }
@media (prefers-color-scheme: dark) { .qz-tag { color: var(--text-2); } }
.qz-tag.y { background: var(--accent-soft); color: var(--warn-ink); }
.qz-q { margin: 0; font-size: 25px; line-height: 1.22; font-weight: 700; }
.qz-sub { font-size: 15px; color: var(--muted); }
.qz-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.qz-opts.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qz-opt {
  min-height: 60px; border-radius: 16px; border: 2px solid var(--qz-edge); background: var(--card); color: var(--text);
  box-shadow: 0 4px 0 var(--qz-edge); display: flex; align-items: center; gap: 14px; padding: 8px 14px; text-align: left; font-size: 18px; cursor: pointer;
  transition: transform var(--t-press) ease;
}
.qz-opts.grid .qz-opt { min-height: 88px; justify-content: center; font-size: 24px; font-weight: 700; }
.qz-opt:active { transform: translateY(2px); }
.qz-key { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--qz-edge); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.qz-opt.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 4px 0 #d9b51a; }
.qz-opt.ok { border-color: var(--qz-ok); background: var(--qz-ok-bg); color: var(--qz-ok-ink); box-shadow: 0 4px 0 var(--qz-ok); }
.qz-opt.bad { border-color: var(--qz-bad); background: var(--qz-bad-bg); color: var(--qz-bad-ink); box-shadow: 0 4px 0 var(--qz-bad); }
.qz-opt.dim { opacity: 0.55; }
.qz-opt:disabled { cursor: default; }

.qz-tray { min-height: 110px; padding: 12px; border-radius: 18px; border: 2px dashed var(--qz-edge); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin-top: 6px; }
.qz-tray-empty { font-size: 14px; color: var(--faint); margin: auto; }
.qz-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.qz-word { height: 46px; padding: 0 15px; border-radius: 14px; border: 2px solid var(--qz-edge); background: var(--card); color: var(--text); box-shadow: 0 3px 0 var(--qz-edge); font-size: 16px; cursor: pointer; }
.qz-word.used { background: rgba(var(--ink-rgb), 0.12); border-color: transparent; box-shadow: none; color: transparent; }

.qz-num { height: 92px; border-radius: 18px; background: var(--card); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.qz-num b { font-size: 42px; }
.qz-num i { width: 3px; height: 38px; background: var(--accent); animation: qz-caret 1s steps(1) infinite; }
.qz-num span { font-size: 22px; color: var(--muted); }
.qz-num.ok { border-color: var(--qz-ok); background: var(--qz-ok-bg); }
.qz-num.bad { border-color: var(--qz-bad); background: var(--qz-bad-bg); }
.qz-num.ok i, .qz-num.bad i { display: none; }
@keyframes qz-caret { 50% { opacity: 0; } }
.qz-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.qz-key-btn { height: 56px; border: 0; border-radius: 12px; background: var(--card); color: var(--text); font-size: 24px; box-shadow: 0 2px 0 rgba(var(--ink-rgb), 0.18); cursor: pointer; }
.qz-key-btn.alt { background: var(--fill); }

.qz-match-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.qz-match-cols > div { display: flex; flex-direction: column; gap: 10px; }
.qz-match { min-height: 72px; border-radius: 16px; border: 2px solid var(--qz-edge); background: var(--card); color: var(--text); box-shadow: 0 4px 0 var(--qz-edge); font-size: 15px; line-height: 1.2; padding: 6px 10px; cursor: pointer; }
.qz-match.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 4px 0 #d9b51a; }
.qz-match.pair { box-shadow: none; }
.qz-match.p0 { border-color: #5e9a4a; background: rgba(94, 154, 74, 0.14); }
.qz-match.p1 { border-color: #4f86c6; background: rgba(79, 134, 198, 0.14); }
.qz-match.p2 { border-color: #c77a3a; background: rgba(199, 122, 58, 0.14); }
.qz-match.p3 { border-color: #8a5cc2; background: rgba(138, 92, 194, 0.14); }
.qz-match.p4 { border-color: #c4527a; background: rgba(196, 82, 122, 0.14); }
.qz-match.p5 { border-color: #2f9a96; background: rgba(47, 154, 150, 0.14); }

.qz-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 14px 16px max(18px, var(--safe-bottom)); background: var(--bg);
  border-top: 2px solid rgba(var(--ink-rgb), 0.08); display: flex; flex-direction: column; gap: 10px;
}
.qz-foot:has(.qz-fb) { padding: 0; border-top: 0; }
.qz-fb { padding: 16px 16px max(18px, var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; animation: qz-up var(--t-std) var(--ease-ios); }
.qz-fb.ok { background: var(--qz-ok-bg); }
.qz-fb.bad { background: var(--qz-bad-bg); }
.qz-fb-head { display: flex; align-items: center; gap: 12px; }
.qz-fb-head > div { display: flex; flex-direction: column; }
.qz-fb-head b { font-size: 20px; line-height: 1.2; }
.qz-fb-head span { font-size: 14px; }
.qz-fb.ok .qz-fb-head { color: var(--qz-ok-ink); }
.qz-fb.bad .qz-fb-head { color: var(--qz-bad-ink); }
.qz-fb-ic { width: 40px; height: 40px; border-radius: 20px; background: var(--card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qz-explain { white-space: pre-line; background: var(--card); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.qz-open { border: 0; background: none; padding: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--qz-bad-ink); cursor: pointer; }
@keyframes qz-up { from { transform: translateY(24px); opacity: 0; } }

.qz-state { padding: 40px 10px; text-align: center; font-size: 16px; line-height: 1.4; color: var(--muted); }

.qz-sum { display: flex; flex-direction: column; gap: 14px; padding: 20px 0 200px; }
.qz-sum-ic { align-self: center; width: 88px; height: 88px; border-radius: 30px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.qz-sum h1 { margin: 0; text-align: center; font-size: 28px; }
.qz-sum p { margin: -6px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.qz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qz-tiles > div { background: var(--card); border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.qz-tiles b { font-size: 22px; }
.qz-tiles b.g { color: var(--qz-ok-ink); }
.qz-tiles b.y { color: var(--warn-ink); }
.qz-tiles span { font-size: 12px; color: var(--muted); }
.qz-misses { background: var(--card); border-radius: 18px; overflow: hidden; }
.qz-miss { padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.qz-miss + .qz-miss { border-top: 1px solid var(--sep); }
.qz-miss b { font-size: 15px; }
.qz-miss span { font-size: 14px; color: var(--muted); }
.qz-miss i { font-style: normal; font-weight: 700; color: var(--qz-ok-ink); }

/* настройки */
.qz-set-cards { display: flex; flex-direction: column; gap: 8px; }
.qz-set-card { background: var(--card); border-radius: 16px; overflow: hidden; }
.qz-set-card .qz-set-row { background: none; }
.qz-set-card.off { opacity: 0.8; }
.qz-set-row { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 0; background: var(--card); color: var(--text); text-align: left; cursor: pointer; }
.qz-set-group .qz-set-row + .qz-set-row { border-top: 1px solid var(--sep); }
.qz-set-row > span:first-child { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; }
.qz-set-row b { font-size: 16px; font-weight: 400; }
.qz-set-card .qz-set-row b { font-weight: 700; font-size: 17px; }
.qz-set-row small { font-size: 13px; line-height: 1.3; color: var(--muted); }
.qz-sw { width: 50px; height: 30px; border-radius: 15px; background: rgba(var(--ink-rgb), 0.2); position: relative; flex-shrink: 0; transition: background var(--t-micro) ease; }
.qz-sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform var(--t-micro) var(--ease-std); }
.qz-sw.on { background: var(--accent); }
.qz-sw.on i { transform: translateX(20px); }
.qz-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(var(--ink-rgb), 0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--on-accent); }
.qz-box.on { background: var(--accent); border-color: var(--accent); }
.qz-gchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.qz-gchip { height: 34px; padding: 0 12px; border-radius: 17px; border: 2px solid var(--qz-edge); background: var(--card); color: var(--text); font-size: 14px; cursor: pointer; }
.qz-gchip.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.qz-seg { margin: 0; }
.qz-note { font-size: 13px; color: var(--muted); padding: 6px 4px 0; }

/* статистика */
.qz-heat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.qz-heat i { height: 30px; border-radius: 8px; background: rgba(var(--ink-rgb), 0.08); }
.qz-heat i.l1 { background: var(--accent-soft); }
.qz-heat i.l2 { background: var(--accent); }
.qz-heat i.l3 { background: #b99a12; }
.qz-barrow { display: flex; flex-direction: column; gap: 5px; }
.qz-barrow > div { display: flex; justify-content: space-between; font-size: 14px; }
.qz-barrow > div span:last-child { color: var(--muted); }
.qz-barrow b { color: var(--text); }
.qz-barrow i, .qz-hard i { display: block; height: 10px; border-radius: 5px; background: rgba(var(--ink-rgb), 0.09); overflow: hidden; }
.qz-barrow em, .qz-hard em { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.qz-barrow em.low, .qz-hard em { background: #d98a5f; }
.qz-weak { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; border-top: 1px solid var(--sep); }
.qz-weak b { color: var(--qz-bad-ink); font-size: 14px; white-space: nowrap; }
.qz-person { min-height: 56px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--sep); }
.qz-ava { width: 38px; height: 38px; border-radius: 19px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.qz-person.idle .qz-ava { background: var(--fill); }
.qz-person-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.qz-person-body b { font-size: 16px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-person-body small, .qz-person-score small { font-size: 13px; color: var(--muted); }
.qz-person.idle .qz-person-body small { color: var(--qz-bad-ink); }
.qz-person-score { display: flex; flex-direction: column; align-items: flex-end; }
.qz-person-score b { font-size: 16px; }
.qz-person-score small.low { color: var(--qz-bad-ink); }
.qz-hard { padding: 10px 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--sep); }
.qz-hard > div { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; line-height: 1.25; }
.qz-hard > div b { color: var(--qz-bad-ink); }
.qz-hard small { font-size: 13px; color: var(--muted); }

/* ---------- тренажёр VA388 (va388.js) — размеры и цвета из макета ---------- */
.va { display: flex; flex-direction: column; gap: 12px; font-family: Arimo, Arial, sans-serif; }
.va-top .seg { margin: 0; }
.va-tab-hl { box-shadow: 0 0 0 2px #e9c51d inset; border-radius: 8px; animation: va-pulse 1.2s ease-in-out infinite; }
@keyframes va-pulse { 50% { box-shadow: 0 0 0 3px #e9c51d inset, 0 0 0 4px rgba(233, 197, 29, .3); } }
.va-stage { width: 100%; max-width: 358px; align-self: center; }
.va-machine { box-sizing: border-box; background: #f19aa6; border-radius: 22px; padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 22px; box-shadow: inset 0 3px 0 #f8b8c1, inset 0 -4px 0 #d9808c; }
.va-frame { background: #f5a6b1; border-radius: 10px; padding: 12px; box-shadow: inset 0 -2px 0 #fbb8bf, inset 0 3px 6px rgba(150, 50, 60, .35); }
.va-screen { height: 182px; border-radius: 4px; border: 3px solid #2b2b33; overflow: hidden; display: flex; flex-direction: column; color: #fff; }
.va-black { flex-grow: 1; background: #0c0d12; }
.va-boot { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(#1b1e33, #2a2e4f); }
.va-boot span, .va-logo, .va-script { font-family: Yellowtail, "Brush Script MT", "Segoe Script", cursive; }
.va-boot span { font-size: 24px; }
.va-boot small { font-size: 10px; color: #b8bfe8; }
.va-head { height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; background: linear-gradient(#3a3f66, #1f2238); border-bottom: 1px solid #8f99d8; cursor: pointer; }
.va-logo { font-size: 14px; line-height: 14px; border-bottom: 1px solid #d6dbff; padding-bottom: 1px; }
.va-head-r { font-size: 11px; font-weight: 700; }
.va-home { flex-grow: 1; display: flex; flex-direction: column; align-items: center; background: linear-gradient(#1b1e33, #2a2e4f); padding-top: 5px; cursor: pointer; }
.va-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 176px; border-radius: 6px; }
.va-tile { height: 30px; border-radius: 5px; background: linear-gradient(#d3d9fb, #a6b1ec); border: 1px solid #e8ebff; box-sizing: border-box; position: relative; color: #262b52; }
.va-tile-head { display: flex; align-items: center; justify-content: center; }
.va-tile-c { position: absolute; left: 3px; top: 2px; display: flex; align-items: flex-start; gap: 1px; font-size: 7px; color: #3c4372; }
.va-tile-v { position: absolute; right: 4px; bottom: 2px; font-size: 13px; }
.va-tile-clock { position: absolute; left: 4px; top: 4px; }
.va-tile-w { font-size: 13px; font-weight: 700; color: #123a5c; }
.va-status { margin-top: auto; padding-bottom: 2px; font-size: 11px; font-weight: 700; }
.va-foot { height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 6px; background: linear-gradient(#d7dcfa, #b9c2f1); cursor: pointer; }
.va-foot.alt { height: 20px; justify-content: flex-start; padding: 0 4px; background: linear-gradient(#d7dcfa, #c3cbf4); border-top: 1px solid #9aa4dc; }
.va-foot.alt2 { height: 20px; padding: 0 4px; background: linear-gradient(#b9c2f1, #a6b1ec); border-top: 1px solid #8f99d8; }
.va-bar { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #1f2340; }
.va-sbtn { font-size: 11px; color: #fff; padding: 3px 8px; border-radius: 2px; background: linear-gradient(#5b82ef, #2a55d3); display: flex; align-items: center; gap: 4px; }
.va-menu { flex-grow: 1; background: linear-gradient(#cdd4f7, #e3e7fc); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); padding: 6px 4px 2px; gap: 2px; }
.va-mtile { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 4px; padding-top: 2px; }
.va-mic { width: 32px; height: 28px; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.va-mlabel, .va-slabel { font-size: 8.5px; line-height: 9px; color: #262a3f; text-align: center; white-space: pre-line; }
.va-sub { flex-grow: 1; background: linear-gradient(#c3ccf5, #aab5ee); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; padding: 8px 4px 0; gap: 2px; }
.va-stile { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.va-sic { width: 44px; height: 36px; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.va-slabel { line-height: 9.5px; color: #1f2340; }
.va-set { flex-grow: 1; background: linear-gradient(#cdd4f7, #e3e7fc); padding: 6px 10px 4px; }
.va-set-grid { display: grid; grid-template-columns: 52px repeat(3, minmax(0, 1fr)); gap: 3px; align-items: center; }
.va-set-g { height: 26px; border-radius: 4px; background: linear-gradient(#5b82ef, #2a55d3); display: flex; align-items: center; justify-content: center; }
.va-set-l { font-size: 9px; color: #262a3f; }
.va-set-v { font-size: 15px; font-weight: 700; color: #262b52; text-align: center; }
.va-set-i { font-size: 13px; color: #4a5180; text-align: center; }
.va-msg { flex-grow: 1; background: linear-gradient(#c3ccf5, #aab5ee); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #262a3f; font-size: 11px; text-align: center; padding: 0 8px; }
.va-msg b { font-size: 12px; margin-bottom: 4px; }
.va-msg em { font-style: normal; font-weight: 700; color: #b5432c; margin-top: 6px; }
.va-dose strong { font-size: 26px; font-weight: 800; margin: 4px 0; font-variant-numeric: tabular-nums; }
.va-edit { animation: va-edit 0.9s steps(2, start) infinite; }
@keyframes va-edit { 50% { opacity: 0.25; } }
.va-wash { flex-grow: 1; background: linear-gradient(#c3ccf5, #aab5ee); display: flex; flex-direction: column; align-items: center; padding-top: 8px; gap: 8px; color: #262a3f; }
.va-wash b { font-size: 12px; }
.va-wtiles { display: flex; gap: 14px; }
.va-wtile { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
.va-wic { width: 40px; height: 34px; border-radius: 3px; background: linear-gradient(#54597a, #1e2134); display: flex; align-items: center; justify-content: center; }
.va-wic i { width: 20px; height: 20px; border-radius: 10px; background: radial-gradient(circle at 40% 35%, #8e97c9, #2a2e4f 70%); }
.va-wcycle { font-size: 11px; }
.va-wprog { width: 70%; height: 8px; border-radius: 4px; background: rgba(38, 42, 63, .2); overflow: hidden; }
.va-wprog i { display: block; height: 100%; background: #2a55d3; transition: width .1s linear; }
.va-keys { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.va-key { width: 52px; height: 46px; border: 0; border-radius: 9px; background: #1c1c20; box-shadow: 0 4px 0 #b9636d, inset 0 1px 0 #3a3a40; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.va-key:active { transform: translateY(2px); box-shadow: 0 2px 0 #b9636d, inset 0 1px 0 #3a3a40; }
.va-blink { animation: va-blink 1s steps(2) infinite; }
@keyframes va-blink { 50% { color: #ffffff !important; background: #33333a; } }
.va-knob { width: 58px; height: 58px; margin-left: 6px; border: 0; border-radius: 29px; background: #121214; box-shadow: 4px 6px 6px rgba(120, 40, 50, .45), inset 0 0 0 6px #1d1d21; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.va-knob span { width: 34px; height: 34px; border-radius: 17px; background: #0b0b0d; box-shadow: inset 0 2px 0 #2a2a30; }
.va-turn { margin-left: auto; display: flex; gap: 6px; }
.va-arrow { width: 36px; height: 36px; border: 0; border-radius: 18px; background: rgba(28, 28, 32, .85); color: #f19aa6; font-size: 22px; line-height: 1; padding: 0 0 3px; cursor: pointer; }
.va-gchips { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.va-gchip { height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: rgba(78, 89, 89, .09); color: var(--text); font: inherit; font-size: 14px; }
.va-gchip.on { background: #f19aa6; color: #2f3636; font-weight: 700; }
.va-group { width: 100%; height: 330px; box-sizing: border-box; background: #f19aa6; border-radius: 22px; position: relative; overflow: hidden; box-shadow: inset 0 3px 0 #f8b8c1, inset 0 -4px 0 #d9808c; }
.va-gdisp { position: absolute; left: 74px; top: 18px; width: 210px; height: 40px; border: 0; padding: 0 14px; border-radius: 4px; background: linear-gradient(#26262c, #0d0d10); box-shadow: inset 0 2px 0 #44444c, 0 2px 0 #d9808c; display: flex; align-items: center; justify-content: space-between; font-family: Arimo, Arial, sans-serif; font-size: 18px; font-weight: 700; }
.va-cover { position: absolute; left: 49px; top: 76px; width: 260px; height: 190px; border-radius: 40px 40px 90px 90px; background: #f7adb8; box-shadow: inset 0 -6px 0 #df8995, inset 0 4px 0 #fbc6ce, 0 4px 0 #d97d8a; }
.va-script { position: absolute; left: 49px; top: 104px; width: 260px; text-align: center; font-size: 24px; color: #e08f9b; text-shadow: 0 1px 0 #fbc6ce; }
.va-niche { position: absolute; left: 59px; top: 140px; width: 240px; height: 107px; }
.va-niche svg { position: absolute; left: 0; top: 0; }
.va-b { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.va-b1 { left: 20px; top: 34px; width: 64px; height: 66px; }
.va-b2 { left: 90px; top: 20px; width: 64px; height: 82px; }
.va-b3 { left: 158px; top: 6px; width: 76px; height: 94px; }
.va-ring { position: absolute; left: 124px; top: 268px; width: 110px; height: 16px; border-radius: 0 0 12px 12px; background: linear-gradient(#e2e5e7, #9da3a8); }
.va-holder-hit { position: absolute; left: 124px; top: 284px; width: 110px; height: 46px; border: 0; padding: 0; background: transparent; display: flex; justify-content: center; border-radius: 10px; cursor: pointer; }
.va-holder { width: 38px; height: 60px; border-radius: 12px; background: linear-gradient(90deg, #2a2a30, #121215); }
.va-holder.blind { background: linear-gradient(90deg, #3a3a42, #1d1d22); box-shadow: inset 0 3px 0 #8fd3ff; }
.va-holder-ghost { margin-top: 10px; font-size: 13px; font-weight: 700; color: #8a3e4a; }
.va-stream { position: absolute; top: 286px; width: 4px; height: 50px; border-radius: 2px; animation: va-flow .5s linear infinite; }
@keyframes va-flow { 50% { opacity: .75; } }
.va-gname { position: absolute; left: 18px; top: 22px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #b5606d; }
.va-holder-cap { margin-top: 8px; text-align: center; font-size: 13px; color: var(--muted); font-family: var(--font, inherit); }
.va-toast { position: relative; min-height: 0; max-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s, max-height .2s; font-family: "PT Sans", -apple-system, sans-serif; font-size: 14px; line-height: 19px; color: #7d6509; background: #fbefc0; border-radius: 12px; padding: 0 12px; }
.va-toast.on { opacity: 1; max-height: 80px; padding: 8px 12px; }
.va-hint, .va-mission { background: var(--card, #fff); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-family: "PT Sans", -apple-system, sans-serif; color: var(--text); }
.va-htitle { font-size: 16px; }
.va-htext { margin: 0; font-size: 14px; line-height: 19px; color: var(--text-2, #3a4242); }
.va-hnote { margin: 0; font-size: 13px; line-height: 18px; color: #7d6509; }
.va-hlist { display: flex; flex-direction: column; gap: 8px; }
.va-hlist div { display: flex; gap: 10px; }
.va-hlist span { width: 22px; height: 22px; border-radius: 11px; flex-shrink: 0; background: #e9c51d; color: #2f3636; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.va-hlist p, .va-hkeys p, .va-hgrid p { margin: 0; font-size: 14px; line-height: 19px; }
.va-hkeys { display: flex; flex-direction: column; gap: 4px; }
.va-hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.va-hgrid p { font-size: 13px; line-height: 17px; }
.va-mhead { display: flex; justify-content: space-between; align-items: baseline; }
.va-mhead b { font-size: 16px; }
.va-mhead span { font-size: 13px; color: var(--muted); }
.va-mission.done { box-shadow: 0 0 0 2px var(--qz-ok, #3f9a5c) inset; }
.va-step { display: flex; gap: 10px; align-items: flex-start; }
.va-step span { width: 20px; height: 20px; border-radius: 10px; flex-shrink: 0; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: rgba(78, 89, 89, .12); color: #2f3636; }
.va-step p { margin: 0; font-size: 14px; line-height: 19px; display: flex; flex-direction: column; }
.va-step small { font-size: 12px; color: #7d6509; }
.va-step.now span { background: #e9c51d; }
.va-step.now p { font-weight: 700; }
.va-step.past span { background: #4e5959; color: #f7f3e7; }
.va-step.past p { color: var(--muted); text-decoration: line-through; }

/* ---------- тренажёр Quick Resto (qrsim.js): планшет 1092×820 ---------- */
.qr-overlay { position: fixed; inset: 0; z-index: 1000; background: #0f1a2a; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: manipulation; }
.qr-host { --qr-scale: .5; position: relative; transition: translate .25s cubic-bezier(.2,.8,.2,1); width: calc(1092px * var(--qr-scale)); height: calc(820px * var(--qr-scale)); }
.qr-host.rot { width: calc(820px * var(--qr-scale)); height: calc(1092px * var(--qr-scale)); }
.qr-fit { position: absolute; left: 0; top: 0; width: 1092px; height: 820px; transform-origin: 0 0; transform: scale(var(--qr-scale)); }
.qr-host.rot .qr-fit { transform: translateX(calc(820px * var(--qr-scale))) rotate(90deg) scale(var(--qr-scale)); }
.qr-stage { position: relative; width: 1092px; height: 820px; overflow: hidden; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; color: #1d2a36; -webkit-user-select: none; user-select: none; }
.qr-stage button { border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qr-stage .qr-hit:active { filter: brightness(.94); }
.qr-close { position: fixed; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 1001; width: 40px; height: 40px; border-radius: 20px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 18px; }
.qr-hint { position: absolute; z-index: 6; width: 340px; box-sizing: border-box; background: #fff; border-radius: 18px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 36px rgba(20, 30, 60, .32); font-family: "PT Sans", -apple-system, sans-serif; color: #2f3636; border-top: 4px solid #e9c51d; pointer-events: none; }
.qr-hint > div:first-child { display: flex; align-items: center; gap: 8px; }
.qr-hint-tag { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: #e9c51d; color: #2f3636; align-self: flex-start; }
.qr-hint-tag.ok { background: #3f9a5c; color: #fff; }
.qr-hint-sub { font-size: 12px; color: #5f6a6a; }
.qr-hint b { font-size: 19px; line-height: 24px; }
.qr-hint > span { font-size: 14px; line-height: 20px; color: #3a4242; }
.qr-dots { display: flex; gap: 4px; margin-top: 4px; }
.qr-dots i { flex: 1 1 0; height: 4px; border-radius: 2px; }
.qr-hint.qr-done { width: 400px; pointer-events: auto; border-top-color: #3f9a5c; }
.qr-hint-btn { margin-top: 6px; height: 52px; border-radius: 14px !important; background: #e9c51d !important; color: #2f3636 !important; font-size: 18px !important; font-weight: 700; box-shadow: 0 4px 0 #b99a12; }
.qr-toast { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 7; max-width: 640px; padding: 12px 20px; border-radius: 14px; background: rgba(29, 42, 54, .92); color: #fff; font-size: 17px; line-height: 22px; text-align: center; pointer-events: none; }
.qr-spin { animation: qr-spin 1s linear infinite; }
@keyframes qr-spin { to { transform: rotate(360deg); } }

/* ---------- Академия (academy.js) ---------- */
.qz-card:not(.dark) .qz-btn-ic { background: var(--fill); color: var(--text); }
.ac-chip { border: 0; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 10px; background: rgba(247, 243, 231, .12); color: #f7f3e7; cursor: pointer; }
.ac-lc-cur { display: flex; flex-direction: column; gap: 2px; }
.ac-lc-cur span { font-size: 14px; color: rgba(247, 243, 231, .7); }
.ac-lc-cur b { font-size: 23px; line-height: 27px; }
.ac-lc-bars, .ac-bars { display: flex; gap: 4px; }
.ac-lc-bars span, .ac-bars span { flex: 1 1 0; height: 6px; border-radius: 3px; }
.ac-lc-note { font-size: 13px; color: rgba(247, 243, 231, .7); margin-top: -4px; }
.ac-btn-ghost { height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(247, 243, 231, .12); color: #f7f3e7; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ac-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--card); color: var(--text); font: inherit; text-align: left; width: 100%; cursor: pointer; box-shadow: 0 1px 2px rgba(47, 54, 54, .06); }
.ac-row.big { padding: 14px; }
.ac-row-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-row-ic svg { width: 24px; height: 24px; }
.ac-row-body { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.ac-row-body b { font-size: 17px; }
.ac-row-body small { font-size: 14px; color: var(--muted); }
.ac-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #e8893a; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.ac-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.ac-head .large-title { font-size: 34px; }
.ac-step { border: 0; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 11px; border-radius: 12px; background: #2f3636; color: #f7f3e7; margin-bottom: 6px; cursor: pointer; }
.ac-path { display: flex; flex-direction: column; padding-bottom: 20px; }
.ac-banner { margin: 14px 0 10px; border: 0; border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font: inherit; text-align: left; cursor: pointer; }
.ac-banner > span { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.ac-banner small { font-size: 12px; font-weight: 700; letter-spacing: .6px; opacity: .8; }
.ac-banner b { font-size: 19px; line-height: 23px; }
.ac-banner em { font-style: normal; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .28); white-space: nowrap; }
.ac-node { height: 96px; position: relative; width: 358px; max-width: 100%; align-self: center; }
.ac-dot { position: absolute; top: 22px; width: 66px; height: 62px; border: 0; border-radius: 33px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ac-start { position: absolute; top: -6px; padding: 5px 12px; border-radius: 10px; background: #fff; border: 2px solid #e9c51d; font-size: 14px; font-weight: 700; color: #7d6509; white-space: nowrap; z-index: 1; }
.ac-cap { position: absolute; top: 32px; width: 130px; display: flex; flex-direction: column; }
.ac-cap b { font-size: 14px; line-height: 17px; }
.ac-cap small { font-size: 12px; }
.ac-draft { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #fbefc0; color: #7d6509; white-space: nowrap; }
.ac-part-head { background: #e9c51d; color: #2f3636; border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ac-part-head small { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #5a4a06; }
.ac-part-head h1 { margin: 0; font-size: 26px; line-height: 30px; }
.ac-part-head p { margin: 0; font-size: 14px; line-height: 19px; color: #4a3d05; }
.ac-part-head > span { font-size: 13px; color: #4a3d05; }
.ac-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-legend span { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border-radius: 12px; background: var(--card); color: var(--text-2); }
.ac-legend i { width: 10px; height: 10px; border-radius: 5px; }
.ac-chs { display: flex; flex-direction: column; gap: 10px; }
.ac-ch { background: var(--card); border-radius: 18px; padding: 14px; display: flex; gap: 12px; border: 2px solid transparent; color: var(--text); font: inherit; text-align: left; width: 100%; cursor: pointer; }
.ac-ch.cur { border-color: #e9c51d; }
.ac-ch.locked { opacity: .72; }
.ac-ch-num { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.ac-ch-body { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-ch-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-ch-meta b { font-size: 12px; }
.ac-ch-meta small { font-size: 12px; color: #a9b0b0; }
.ac-ch-title { font-size: 17px; line-height: 21px; font-weight: 700; }
.ac-ch-text { font-size: 14px; line-height: 19px; color: var(--muted); }
.ac-ch-cta { margin-top: 6px; align-self: flex-start; height: 38px; padding: 0 18px; border-radius: 12px; background: #e9c51d; color: #2f3636; font-size: 15px; font-weight: 700; display: flex; align-items: center; box-shadow: 0 3px 0 #b99a12; }
.ac-ch-end { flex-shrink: 0; padding-top: 2px; }
.ac-tag { background: #4e5959; color: #f7f3e7; }
.ac-hearts { display: flex; gap: 3px; flex-shrink: 0; }
.ac-card { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 22px; }
.ac-card p { margin: 0; }
.ac-card h3 { margin: 4px 0 0; font-size: 18px; }
.ac-card code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; background: var(--fill); padding: 1px 5px; border-radius: 5px; }
.ac-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ac-list > li { display: flex; gap: 10px; align-items: flex-start; }
.ac-list:not(.ol) > li::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #e9c51d; flex-shrink: 0; margin-top: 7px; }
.ac-n { width: 24px; height: 24px; border-radius: 12px; background: #e9c51d; color: #2f3636; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-list ul { margin: 6px 0 0; padding-left: 16px; color: var(--muted); font-size: 15px; }
.ac-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fbefc0; color: #4a3d05; }
.ac-note p { margin: 0; }
.ac-img { width: 100%; border-radius: 16px; }
.ac-table { overflow-x: auto; margin: 0 -2px; }
.ac-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 19px; }
.ac-table td, .ac-table th { padding: 8px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(78,89,89,.14); }
.ac-table th { font-weight: 700; background: var(--fill); }
.ac-table tr > :first-child { font-weight: 700; white-space: nowrap; }
.ac-chart { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 20px; background: #fff; box-shadow: 0 2px 0 rgba(78,89,89,.10); }
.ac-chart svg { width: 100%; height: auto; display: block; }
.ac-chart-ticks text { font-size: 10px; fill: #5f6a6a; }
.ac-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #5f6a6a; }
.ac-chart-legend span { display: flex; align-items: center; gap: 6px; }
.ac-chart-legend i { width: 10px; height: 10px; border-radius: 5px; }
.ac-chart-range { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #5f6a6a; }
.ac-chart-range input { width: 100%; height: 36px; accent-color: #e9c51d; touch-action: pan-y; }
.ac-chart-verdict { display: flex; flex-direction: column; gap: 2px; }
.ac-chart-verdict b { font-size: 17px; }
.ac-chart-verdict p { margin: 0; font-size: 14px; color: #5f6a6a; line-height: 19px; }
.ac-chart-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 4px; }
.ac-chart-bars div { display: flex; flex-direction: column; gap: 3px; }
.ac-chart-bars div > span { display: block; height: 6px; border-radius: 3px; min-width: 2px; }
.ac-chart-bars p { margin: 0; font-size: 13px; color: #5f6a6a; }
.ac-chart-bars b { color: #2f3636; }
.ac-todo { background: #fbe3cf; color: #9a4a12; border-radius: 4px; padding: 0 3px; }
.ac-foot-note { display: block; text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.ac-order { display: flex; flex-direction: column; gap: 10px; }
.ac-ord { min-height: 60px; border-radius: 16px; background: var(--card); border: 2px solid var(--qz-edge); box-shadow: 0 4px 0 var(--qz-edge); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; }
.ac-ord.ok { border-color: var(--qz-ok); background: var(--qz-ok-bg); }
.ac-ord.bad { border-color: var(--qz-bad); background: var(--qz-bad-bg); }
.ac-ord-n { width: 28px; height: 28px; border-radius: 14px; background: var(--fill); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; }
.ac-ord-t { flex-grow: 1; font-size: 16px; line-height: 20px; }
.ac-ord.drag { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; transition: transform .18s var(--ease-ios, ease); position: relative; padding-right: 14px; }
.ac-ord.drag.lift { transition: none; z-index: 2; cursor: grabbing; box-shadow: 0 12px 28px rgba(47, 54, 54, .18), 0 4px 0 var(--qz-edge); border-color: #e9c51d; }
.ac-ord-grip { display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; flex-shrink: 0; }
.ac-ord-grip i { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: var(--text-3, #a9b0b0); }
.ac-ord-btns { display: flex; flex-direction: column; gap: 4px; }
.ac-ord-btns button { width: 40px; height: 26px; border: 0; border-radius: 8px; background: var(--fill); color: var(--text); font-size: 12px; cursor: pointer; }
.ac-ord-btns button:disabled { opacity: .3; }
.ac-right { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--qz-ok-bg); color: var(--qz-ok-ink); display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 20px; }
.ac-sim { margin-top: 4px; }
.ac-warn { padding: 10px 12px; border-radius: 12px; background: var(--qz-bad-bg); color: var(--qz-bad-ink); font-size: 14px; margin-bottom: 10px; }
.ac-qr-preview { border-radius: 18px; overflow: hidden; margin: 6px 0 10px; box-shadow: 0 6px 20px rgba(20, 30, 60, .18); line-height: 0; }
.ac-prac { background: var(--card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; border: 2px solid #f6d6bc; }
.ac-prac h1 { margin: 0; font-size: 22px; line-height: 27px; }
.ac-prac-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-prac-top > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.ac-prac-text { margin: 0; font-size: 15px; line-height: 20px; color: var(--muted); }
.ac-pill { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 10px; background: #fbefc0; color: #7d6509; white-space: nowrap; }
.ac-pill.o { background: #fbe3cf; color: #9a4a12; }
.ac-checks { display: flex; flex-direction: column; gap: 8px; }
.ac-checks > small { font-size: 13px; color: var(--muted); }
.ac-check { display: flex; gap: 10px; align-items: flex-start; }
.ac-check span { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--qz-edge); box-sizing: border-box; flex-shrink: 0; margin-top: 1px; }
.ac-check p { margin: 0; font-size: 15px; line-height: 20px; }
.ac-btn-orange { width: 100%; height: 50px; border: 0; border-radius: 14px; background: #e8893a; color: #fff; font: inherit; font-size: 16px; font-weight: 700; box-shadow: 0 3px 0 #b5601f; cursor: pointer; }
.ac-btn-green { flex-grow: 1; height: 48px; border: 0; border-radius: 14px; background: var(--qz-ok); color: #fff; font: inherit; font-size: 16px; font-weight: 700; box-shadow: 0 3px 0 var(--qz-ok-sh); cursor: pointer; }
.ac-btn-line { height: 48px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--qz-edge); background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ac-hint { font-size: 13px; line-height: 18px; color: var(--muted); }
.ac-wait { padding: 12px 14px; border-radius: 14px; background: #fbe3cf; color: #7a3c0e; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 19px; }
.ac-done-line { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--qz-ok-bg); color: var(--qz-ok-ink); font-weight: 700; }
.ac-pqs { display: flex; flex-direction: column; gap: 10px; }
.ac-pq { background: var(--card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 6px; border: 2px solid #f6d6bc; color: var(--text); font: inherit; text-align: left; width: 100%; cursor: pointer; }
.ac-pq > b { font-size: 19px; line-height: 23px; }
.ac-pq > span:last-child { font-size: 14px; line-height: 19px; color: var(--muted); }
.ac-lockrow { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--sep); }
.ac-lockrow:first-child { border-top: 0; }
.ac-lockrow span { display: flex; flex-direction: column; }
.ac-lockrow b { font-size: 16px; font-weight: 400; }
.ac-lockrow small { font-size: 13px; color: var(--muted); }
.ac-lvs { display: flex; flex-direction: column; }
.ac-lv { display: flex; gap: 12px; }
.ac-lv-rail { display: flex; flex-direction: column; align-items: center; width: 48px; flex-shrink: 0; }
.ac-lv-medal { width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.ac-lv-rail i { flex-grow: 1; width: 3px; background: var(--qz-edge); margin-top: 8px; border-radius: 2px; }
.ac-lv:last-child .ac-lv-rail i { opacity: 0; }
.ac-lv-card { flex-grow: 1; background: var(--card); border-radius: 18px; padding: 12px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; border: 2px solid transparent; min-width: 0; }
.ac-lv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-lv-top b { font-size: 18px; }
.ac-lv-top span { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.ac-lv-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.ac-lv-parts span { font-size: 12px; padding: 4px 8px; border-radius: 9px; font-weight: 700; }
.ac-lv-gives { font-size: 14px; line-height: 19px; color: var(--text-2); }
.ac-lv-gives small { color: var(--muted); font-size: 14px; }
.ac-step.dark { cursor: default; }
.ac-mcard { background: var(--card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ac-mwho { display: flex; align-items: center; gap: 10px; }
.ac-mwho > span:last-child { display: flex; flex-direction: column; }
.ac-mwho b { font-size: 16px; }
.ac-mwho small, .ac-mwhat small { font-size: 13px; color: var(--muted); }
.ac-mwhat { display: flex; flex-direction: column; gap: 2px; }
.ac-mwhat small { font-weight: 700; letter-spacing: .5px; font-size: 12px; }
.ac-mwhat b { font-size: 18px; }
.ac-mchecks { display: flex; flex-direction: column; gap: 4px; }
.ac-mcheck { min-height: 40px; display: flex; gap: 12px; align-items: center; border: 0; background: none; color: var(--text); font: inherit; text-align: left; padding: 0; cursor: pointer; }
.ac-mcheck span { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--qz-edge); box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.ac-mcheck.on span { background: var(--qz-ok); border-color: var(--qz-ok); }
.ac-mcheck p { margin: 0; font-size: 15px; line-height: 20px; }
.ac-mbtns { display: flex; gap: 8px; }
.ac-mcard + .ac-mcard { margin-top: 12px; }
.ac-tr-head { display: flex; flex-direction: column; gap: 2px; }
.ac-tr-head small { font-size: 13px; font-weight: 700; letter-spacing: .6px; color: #7d6509; }
.ac-tr-head h1 { margin: 0; font-size: 32px; line-height: 38px; }
.ac-tr-head span { font-size: 15px; color: var(--muted); }
.ac-tms { background: var(--card); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ac-tm { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-top: 1px solid var(--sep); background: none; color: var(--text); font: inherit; text-align: left; min-height: 56px; cursor: pointer; }
.ac-tm:first-child { border-top: 0; }
.ac-tm.on { background: #fbefc0; color: #2f3636; }
.ac-tm > span:nth-child(2) { display: flex; flex-direction: column; flex-grow: 1; }
.ac-tm b { font-size: 16px; }
.ac-tm small { font-size: 13px; color: var(--muted); }
.ac-tm em { font-style: normal; font-size: 12px; font-weight: 700; color: #7d6509; }
.ac-tm-c { width: 26px; height: 26px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--qz-edge); box-sizing: border-box; color: #2f3636; }
.ac-tm-c.done { background: #e9c51d; border: 0; }

/* Академия: «Экран» — живая карточка приложения в рамке телефона */
.ac-phone-cap { margin: -6px 0 12px; color: var(--text-2, #5f6a6a); font-size: 14px; line-height: 1.4; }
.ac-phone { border-radius: 34px; padding: 8px; background: #2f3636; box-shadow: 0 10px 30px rgba(47, 54, 54, 0.22); margin-bottom: 14px; }
.ac-phone-in { position: relative; height: 520px; border-radius: 27px; overflow: hidden; background: var(--bg); transform: translateZ(0); }
.ac-phone-in > .loading-state { padding-top: 200px; }
.ac-phone-screen { --top-inset: 6px; --safe-bottom: 0px; transition: none; }
.ac-phone-screen .screen-inner { padding-bottom: 40px; }
.ac-phone-screen .compact { display: none; }
.ac-finds { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ac-find { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 rgba(47, 54, 54, 0.08); transition: background 0.2s; }
.ac-find > span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #f1ead6; color: #7d6509; font-weight: 800; font-size: 13px; }
.ac-find p { margin: 0; font-size: 14px; line-height: 1.3; }
.ac-find.ok { background: var(--qz-ok-bg, #dff0e3); }
.ac-find.ok > span { background: #3f9a5c; color: #fff; }
.ac-found { outline: 3px solid #3f9a5c; outline-offset: 2px; border-radius: 10px; animation: ac-found 0.5s ease; }
@keyframes ac-found { 0% { outline-color: rgba(63, 154, 92, 0); } 50% { outline-color: #3f9a5c; outline-offset: 5px; } }

/* Мини-игра «Положи на нужную витрину» (vitrina.js) */
.vt-head h1 { margin: 0; font-size: 26px; line-height: 30px; }
.vt-head p { margin: 4px 0 0; color: var(--text-2, #5f6a6a); font-size: 15px; }
.vt-slot { min-height: 76px; display: flex; justify-content: center; align-items: center; margin: 14px 0 6px; }
.vt-chip { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 2px solid #e9c51d; border-radius: 18px; background: var(--card); box-shadow: 0 6px 0 #e4ddc9; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; position: relative; z-index: 3; }
.vt-chip.lift { cursor: grabbing; box-shadow: 0 16px 30px rgba(47, 54, 54, .22); }
.vt-chip.back { transition: transform .25s var(--ease-ios, ease); }
.vt-chip-ic { color: #d4a90c; display: flex; }
.vt-chip-t { display: flex; flex-direction: column; }
.vt-chip-t b { font-size: 19px; line-height: 23px; }
.vt-chip-t small { font-size: 14px; color: var(--text-2, #5f6a6a); }
.vt-chip-grip { display: flex; flex-direction: column; gap: 4px; margin-left: 6px; }
.vt-chip-grip i { display: block; width: 16px; height: 2.5px; border-radius: 2px; background: #a9b0b0; }
.vt-fb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border-radius: 16px; text-align: center; }
.vt-fb b { font-size: 20px; }
.vt-fb.ok { background: var(--qz-ok-bg, #dff0e3); color: var(--qz-ok-ink, #22603a); }
.vt-fb.bad { background: var(--qz-bad-bg, #f8e0da); color: var(--qz-bad-ink, #9a3d2a); }
.vt-wrap { display: flex; flex-direction: column; gap: 8px; }
.vt-scene { position: relative; width: 100%; max-width: 358px; margin: 0 auto; aspect-ratio: 358 / 400; color: var(--text); }
.vt-svg { width: 100%; height: 100%; display: block; }
.vt-ic { stroke: #d4a90c; }
.vt-zone { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: transparent; border-radius: 16px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.vt-zone.vt-cold { left: 0; width: 45%; }
.vt-zone.vt-room { right: 0; width: 53%; }
.vt-zone.over { background: rgba(233, 197, 29, .16); box-shadow: inset 0 0 0 3px #e9c51d; }
.vt-zone.ok { background: rgba(63, 154, 92, .14); box-shadow: inset 0 0 0 3px #3f9a5c; }
.vt-zone.bad { background: rgba(200, 85, 61, .12); box-shadow: inset 0 0 0 3px #c8553d; }
.vt-zone:disabled { cursor: default; }
.vt-cols { display: grid; grid-template-columns: 45% 1fr; gap: 2%; max-width: 358px; width: 100%; margin: 0 auto; }
.vt-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vt-label { font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.vt-pill { border: 0; border-radius: 12px; padding: 5px 10px; font: inherit; font-size: 13px; line-height: 16px; background: var(--card); color: var(--text); box-shadow: 0 2px 0 #e4ddc9; cursor: pointer; text-align: center; }
.vt-pill.ok { background: var(--qz-ok-bg, #dff0e3); color: var(--qz-ok-ink, #22603a); }
.vt-pill.bad { background: var(--qz-bad-bg, #f8e0da); color: var(--qz-bad-ink, #9a3d2a); }
.vt-pill small { display: block; font-size: 11px; opacity: .85; }
.vt-done { color: var(--text-2, #5f6a6a); font-size: 15px; }
.vt-card-row { display: flex; gap: 12px; align-items: flex-start; }
.vt-card-row > div { flex: 1; min-width: 0; }
.vt-card-art { flex: none; width: 74px; height: 83px; color: var(--text); }
.vt-card-art svg { width: 100%; height: 100%; }
.vt-card-art .vt-ic { stroke: #d4a90c; }
.vt-wrap.vt-compact .vt-scene, .vt-wrap.vt-compact .vt-cols { max-width: 250px; }
.vt-wrap.vt-compact .vt-cols { max-width: 300px; }

/* витрины: клиповый темп */
.vt-slot { position: relative; }
.vt-slot .vt-chip.fly { position: absolute; transition: transform .2s cubic-bezier(.4, 0, .6, 1), opacity .2s; pointer-events: none; }
.vt-chip.pop-in { animation: vt-pop-in .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes vt-pop-in { from { transform: scale(.6); opacity: 0; } }
.vt-hint { height: 20px; margin: -2px 0 4px; text-align: center; font-size: 15px; font-weight: 700; color: var(--qz-bad-ink, #9a3d2a); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.vt-hint.on { opacity: 1; transform: none; }
.vt-pop { position: absolute; left: 50%; top: 34%; transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: 2px; padding: 4px 9px; border-radius: 12px; font-size: 15px; font-weight: 700; pointer-events: none; animation: vt-pop .85s ease-out forwards; }
.vt-pop.ok { background: #e9c51d; color: #2f3636; }
.vt-pop.bad { background: #c8553d; color: #fff; }
@keyframes vt-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -26px); } }
.vt-pop.ok:not(.big) { background: var(--card); color: #3f9a5c; box-shadow: 0 2px 0 #e4ddc9; }
.vt-pop.big { font-size: 18px; padding: 6px 12px; }
.ac-find.gone { opacity: .55; }
.ac-find.gone > span { background: var(--fill, #ece7da); color: var(--text-2, #5f6a6a); }
.ac-find small { display: block; font-size: 12px; color: var(--text-2, #5f6a6a); }
.vt-wrap { transition: opacity .2s; }
.vt-wrap.vt-dim { opacity: .3; pointer-events: none; }
.vt-pause { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px 16px; border-radius: 22px; background: var(--card); box-shadow: 0 6px 0 #e4ddc9; text-align: center; position: relative; z-index: 3; }
.vt-pause > b { font-size: 24px; line-height: 28px; }
.vt-pause > span { font-size: 15px; color: var(--text-2, #5f6a6a); }
.vt-pause-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 12px 0 14px; }
.vt-pause-stats span { display: flex; flex-direction: column; padding: 10px 4px; border-radius: 14px; background: var(--bg); }
.vt-pause-stats b { font-size: 22px; line-height: 26px; }
.vt-pause-stats small { font-size: 12px; color: var(--text-2, #5f6a6a); }
.vt-pause-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.vt-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vt-clock { flex: none; margin-top: 3px; padding: 3px 10px; border-radius: 12px; background: var(--card); box-shadow: 0 2px 0 #e4ddc9; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vt-pause-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vt-pause-stats b { font-size: 20px; font-variant-numeric: tabular-nums; }
.vt-pause-stats span.rec { background: #fbefc0; }
.vt-record { margin: -4px 0 12px; font-size: 15px; font-weight: 700; color: #7d6509; }
.vt-best { margin: -4px 0 12px; font-size: 13px; color: var(--text-2, #5f6a6a); }
.vt-top-head { align-self: flex-start; margin: 2px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2, #5f6a6a); }
.vt-top { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-bottom: 14px; }
.vt-top-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; text-align: left; }
.vt-top-row.me { background: #fbefc0; }
.vt-top-row .qz-medal { flex: none; }
.vt-top-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.vt-top-row b { font-variant-numeric: tabular-nums; font-size: 16px; }
.vt-top-empty { width: 100%; padding: 12px 0 16px; font-size: 14px; color: var(--text-2, #5f6a6a); }
/* учебная смена в рамке телефона */
.ac-phone-back { position: absolute; left: 10px; top: 10px; z-index: 6; width: 34px; height: 34px; border: 0; border-radius: 17px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(47, 54, 54, .18); display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; }
.ac-phone-back[hidden] { display: none; }
.ac-phone-badge { position: absolute; right: 10px; top: 12px; z-index: 6; padding: 3px 9px; border-radius: 10px; background: #2f3636; color: #f7f3e7; font-size: 11px; font-weight: 700; letter-spacing: .02em; pointer-events: none; }
.ac-phone-screen .navback { display: none; }
.ac-phone-screen.ac-sandbox { --top-inset: 34px; }
/* Quick Resto на странице, вертикально */
.qr-in { display: flex; flex-direction: column; gap: 10px; }
.qr-in-step { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: 0 3px 0 #e4ddc9; }
.qr-in-step[hidden] { display: none; }
.qr-in-step b { font-size: 16px; line-height: 21px; }
.qr-in-step small { font-size: 13px; color: var(--text-2, #5f6a6a); }
.qr-in-tag { align-self: flex-start; padding: 2px 9px; border-radius: 9px; background: #fbefc0; color: #7d6509; font-size: 12px; font-weight: 700; }
.qr-in-tag.ok { background: var(--qz-ok-bg, #dff0e3); color: var(--qz-ok-ink, #22603a); }
.qr-in-pan { position: relative; overflow: hidden; border-radius: 18px; background: #0f1a2a; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.qr-in-pan::-webkit-scrollbar { display: none; }
.qr-in-bar { display: grid; grid-template-columns: 1fr; }
.qr-in-btn { height: 44px; border: 0; border-radius: 14px; background: var(--card); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 3px 0 #e4ddc9; cursor: pointer; }
/* тест на кассе: что не так в оплаченном заказе */
.ac-mistakes { margin: 10px 0 14px; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 20px; color: var(--qz-bad-ink, #9e2a2b); }
.qr-in-tag.bad, .qr-hint-tag.bad { background: #e5383b; color: #fff; }
/* админка · ананасы вручную */
.pn-total { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }
.pn-in { width: 110px; letter-spacing: 1px; }
.pn-why { flex: 1 1 100%; padding: 9px 12px; border: 1px solid var(--sep); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; font-size: 15px; }
.pn-why:focus { outline: none; border-color: var(--accent); }
.pn-edit .wc-btns { flex-wrap: wrap; }
/* «Положи на витрину» — игра «60 секунд» */
.vt-timebar { flex: 1; }
.vt-timebar .vt-bar { transition: width .1s linear; }
.qz-play-top .vt-clock { position: relative; margin: 0; min-width: 46px; text-align: center; }
.vt-clock.low { background: #c8553d; color: #fff; box-shadow: 0 2px 0 #9a3d2a; }
.vt-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin-top: 4px; position: relative; transition: opacity .2s; }
.vt-hud.off { opacity: 0; }
.vt-score { display: flex; align-items: baseline; gap: 6px; }
.vt-score b { font-size: 30px; line-height: 34px; font-variant-numeric: tabular-nums; }
.vt-score small { font-size: 14px; color: var(--text-2, #5f6a6a); }
.vt-speed { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text-2, #5f6a6a); }
.vt-mult { font-size: 18px; font-weight: 800; padding: 3px 10px; border-radius: 12px; opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s; }
.vt-mult.on:not(:empty) { opacity: 1; transform: none; animation: vt-mult .35s cubic-bezier(.2, 1.4, .4, 1); }
.vt-mult.m2 { background: #fbefc0; color: #7d6509; }
.vt-mult.m3 { background: #e9c51d; color: #2f3636; }
@keyframes vt-mult { from { transform: scale(1.35); } }
.vt-lane { position: relative; height: 176px; margin: 6px 0 0; display: flex; justify-content: center; align-items: center; }
.vt-lane:has(.vt-pause) { height: auto; align-items: stretch; }
.vt-fall { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: vt-fall linear forwards; pointer-events: none; }
.vt-fall > * { pointer-events: auto; }
.vt-fall:has(.vt-chip.lift), .vt-fall:has(.vt-chip.lift) .vt-fuse { animation-play-state: paused; }
@keyframes vt-fall { from { transform: translateY(0); } to { transform: translateY(100px); } }
.vt-fuse { display: block; width: 120px; height: 5px; border-radius: 3px; background: #e9c51d; animation: vt-fuse linear forwards; transform-origin: left; pointer-events: none; }
@keyframes vt-fuse { 0% { transform: scaleX(1); } 60% { background: #e9c51d; } 100% { transform: scaleX(0); background: #c8553d; } }
.vt-fall.gone .vt-fuse { opacity: 0; }
.vt-fall .vt-chip.fly { transition: transform .2s cubic-bezier(.4, 0, .6, 1), opacity .2s; pointer-events: none; }
.vt-fall .vt-chip.fly.miss { transform: translateY(40px) scale(.8); border-color: #c8553d; }
.vt-count { font-size: 56px; font-weight: 800; line-height: 1; color: var(--text); }
.vt-play .vt-scene { max-width: 290px; }
.vt-play .vt-cols { max-width: 290px; }
.vt-pop.pen { left: 50%; top: 110%; font-size: 14px; animation-duration: 1.1s; z-index: 5; }
.vt-pop.m3 { background: #e9c51d; color: #2f3636; }
.vt-pop.m2 { background: #fbefc0; color: #7d6509; }
.vt-pop.lvl { top: 0; background: #2f3636; color: #fff; z-index: 5; }
.vt-rules { margin: 10px 0 12px; padding: 0; list-style: none; width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 15px; line-height: 20px; }
.vt-rules li { padding: 7px 10px; border-radius: 12px; background: var(--bg); }
.vt-rules .qz-pine { vertical-align: -2px; margin-right: 2px; }
.vt-rules b { font-weight: 700; }
.vt-gain { margin: -4px 0 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; color: #7d6509; }
.vt-pause > b.vt-rec-t { color: #7d6509; }
.vt-lane .vt-pause { margin-bottom: 8px; }
/* Комментарии к калибровкам */
.ej-comment-form { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.ej-comment-in { width: 100%; box-sizing: border-box; min-height: 44px; resize: none; overflow: hidden; padding: 11px 14px; border: 0; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line, rgba(78, 89, 89, .14)); font: inherit; font-size: 16px; line-height: 21px; color: var(--text); }
.ej-comment-in:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.ej-comments .ej-comment-in { background: var(--bg); }
.ej-cm { padding: 10px 0; border-bottom: 1px solid var(--line, rgba(78, 89, 89, .1)); }
.ej-cm.editing { opacity: .55; }
.ej-cm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ej-cm-head b { font-size: 15px; }
.ej-cm-head small { font-size: 13px; color: var(--text-2, #5f6a6a); }
.ej-cm-acts { margin-left: auto; display: flex; gap: 4px; }
.ej-cm-act { border: 0; background: none; padding: 2px 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2, #5f6a6a); cursor: pointer; }
.ej-cm-act.del { color: var(--danger, #c8553d); }
.ej-cm-text { margin-top: 3px; font-size: 15px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ej-cm-empty { padding: 4px 0 10px; font-size: 14px; }
.ej-cm-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ej-cm-btns { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ej-cm-send { border: 0; border-radius: 12px; padding: 9px 16px; background: var(--accent); color: #2f3636; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ej-cm-send:disabled { opacity: .5; }
.ej-cm-count { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: auto; margin-right: 8px; font-size: 14px; font-weight: 700; color: var(--text-2, #5f6a6a); }
.ej-cm-count.dark { color: inherit; opacity: .8; }
.ej-cm-count + .rcp-rating { margin-left: 0; }
.ej-cm.pending { opacity: .6; }
/* Академия: продолжили главу с места */
.ac-resume { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 9px 12px; border-radius: 14px; background: #fbefc0; color: #7d6509; font-size: 14px; font-weight: 600; }
.ac-resume > span { display: inline-flex; align-items: center; gap: 6px; }
.ac-resume-btn { flex: none; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 14px; font-weight: 700; color: #2f3636; text-decoration: underline; cursor: pointer; }
/* Админка → Академия */
.aa-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.aa-count { margin-left: auto; margin-right: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aa-gh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aa-reset { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--danger, #c8553d); cursor: pointer; text-transform: none; letter-spacing: 0; }
.aa-log p { margin: 0; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--sep); }
.aa-log p:last-child { border-bottom: 0; }
.aa-reset-all { margin-top: 18px; color: var(--danger, #c8553d); }
/* Бесконечный режим: где именно ошибка */
.qz-word.ok { border-color: #3f9a5c; box-shadow: 0 3px 0 #2f7a47; background: var(--qz-ok-bg, #dff0e3); color: var(--qz-ok-ink, #22603a); }
.qz-word.bad { border-color: #c8553d; box-shadow: 0 3px 0 #9a3d2a; background: var(--qz-bad-bg, #f8e0da); color: var(--qz-bad-ink, #9a3d2a); text-decoration: line-through; }
.qz-word.miss { border-color: #3f9a5c; border-style: dashed; color: var(--qz-ok-ink, #22603a); }
.qz-diff { display: block; color: var(--text); }
.qz-diff.bad b { color: var(--qz-bad-ink, #9a3d2a); }
.qz-diff.ok b, .qz-diff .okc { color: var(--qz-ok-ink, #22603a); }
/* Объявления: фото */
.an-photos { margin-top: 10px; }
.an-photos .sh-thumb, .ann-photos .sh-thumb { aspect-ratio: 1; }
.an-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--sep); background: none; color: var(--text-2, #5f6a6a); cursor: pointer; }
.an-add small { font-size: 13px; font-weight: 600; }
.an-up { display: flex; align-items: center; justify-content: center; }
.an-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(78, 89, 89, .2); border-top-color: var(--accent); animation: an-spin .8s linear infinite; }
@keyframes an-spin { to { transform: rotate(360deg); } }
.ann-photos { margin: 12px 0 4px; }
.ann-photos.one { grid-template-columns: 1fr; }
.ann-photos.one .sh-thumb { aspect-ratio: 4 / 3; }
.ann-photos img { cursor: zoom-in; }
.ann-photos.two { grid-template-columns: 1fr 1fr; }
/* Задачи: фото-пояснение от админа под задачей */
.sh-adm-item:has(.sh-task-pics) { flex-wrap: wrap; }
.sh-adm-item:has(.sh-task-pics) > .sh-row { flex: 1 1 0; min-width: 0; }
.sh-task-pics { flex: 1 1 100%; padding: 0 14px 12px 50px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sh-task-pics .sh-thumb { aspect-ratio: 1; }
.sh-task-pics img { cursor: zoom-in; }
/* Строки рецепта: длинное название переносится, граммовка не сжимается и не
 * обрезается (на Android «П/ф кардамоновый настой» + «›» + «···» резали «160 г») */
.kv:has(.roll) .kv-key { flex: 1 1 auto; flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; }
.kv:has(.roll) .kv-val { flex: 0 0 auto; white-space: nowrap; }
.kv:has(.roll) .chev, .kv:has(.roll) .low-dot { flex: 0 0 auto; }
/* ТТК заготовки: «Добавить акт приготовления» */
.prep-act { display: block; margin: 12px auto 0; padding: 4px 6px; border: 0; background: none; color: #b8920c; font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prep-act:disabled { opacity: .5; }

/* ===== бета: «Чеки закрытия» — касса дня ===== */
.ck-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: 18px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); }
.ck-card.on, .ck-card.warn { box-shadow: inset 0 0 0 2px var(--accent); }
.ck-card.warn { background: var(--warn-bg); }
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck-label { font-size: 15px; font-weight: 700; }
.ck-src { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--warn-ink); text-align: right; }
.ck-src.warn { background: #f3d9cf; color: #a4432f; }
.ck-sum { font-size: 40px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ck-hint { font-size: 13px; color: var(--muted); }
.ck-edit { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--accent); }
.ck-input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 40px; font-weight: 700; color: var(--text); padding: 0; font-variant-numeric: tabular-nums; }
.ck-cur { font-size: 26px; color: var(--muted); }
.ck-row { display: flex; gap: 8px; }
.ck-row > button { flex: 1; }
.ck-save, .ck-alt { flex: none; height: 46px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ck-save { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 #b99a12; }
.ck-alt { background: var(--fill); color: var(--text); }
.ck-link { align-self: flex-start; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--warn-ink); cursor: pointer; }
.ck-wait { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; color: var(--muted); }
.ck-wait .sh-spin { width: 22px; height: 22px; }
.ck-pct { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #4e5959; color: #f7f3e7; }
.ck-pct div { display: flex; flex-direction: column; }
.ck-pct span { font-size: 15px; }
.ck-pct small { font-size: 13px; color: #c3cbcb; }
.ck-pct b { font-size: 28px; color: var(--accent); white-space: nowrap; }
.ck-ocr { position: absolute; left: 6px; bottom: 6px; height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(47, 54, 54, .82); color: #f0d75c; font-size: 12px; font-weight: 700; display: flex; align-items: center; pointer-events: none; }
.ck-ocr.warn { color: #f3b39f; }
.ck-ocr.dim { color: #d6dcdc; }

/* ===== бета: админка «Зарплата бариста» ===== */
.pay-tabs { margin: 0 -16px 4px; }
.pay-card { display: flex; flex-direction: column; padding: 4px 14px 10px; }
.pay-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 0; border: 0; border-top: 1px solid var(--sep); background: none; font: inherit; color: var(--text); text-align: left; }
.pay-row:first-child { border-top: 0; }
.pay-row > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pay-row small { font-size: 12px; color: var(--muted); }
button.pay-row { cursor: pointer; }
.pay-row.on > span b { color: var(--warn-ink); }
.pay-val { flex: 0 0 96px; display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: 10px; background: var(--fill); }
.pay-val input { width: 100%; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; font-weight: 700; color: var(--text); text-align: right; }
.pay-val:has(input[type=time]) { flex-basis: 118px; }
.pay-val:has(input[type=date]) { flex-basis: 150px; }
.pay-val i { font-style: normal; color: var(--muted); font-size: 14px; }
.pay-save { margin-top: 8px; }
.pay-x { width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 15px; background: var(--fill); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pay-std { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; align-items: center; gap: 6px; min-height: 44px; border-top: 1px solid var(--sep); font-size: 15px; }
.pay-std.head { border-top: 0; min-height: 30px; font-size: 12px; color: var(--muted); }
.pay-std span { display: flex; align-items: center; gap: 2px; }
.pay-std-in { width: 100%; min-width: 0; border: 0; border-radius: 8px; background: var(--fill); padding: 6px 2px; font: inherit; font-size: 14px; color: var(--text); text-align: center; }
.pay-rate { font-size: 16px; white-space: nowrap; }
.pay-rate.none { color: var(--warn-ink); }
.pay-open { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 12px; }
.pay-hist { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pay-hist span { flex: 1; color: var(--muted); }
.pay-add { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr; gap: 6px; }
.pay-add input { min-width: 0; height: 40px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 8px; font: inherit; font-size: 15px; color: var(--text); }
.ck-wait > span:last-child { display: flex; flex-direction: column; }
.ck-wait small { font-size: 12px; color: var(--muted); }
.ck-dot { width: 7px; height: 7px; border-radius: 4px; margin-right: 5px; background: #f0d75c; animation: ck-blink 1s ease-in-out infinite; }
@keyframes ck-blink { 50% { opacity: .25; } }
.ck-toast.tap { pointer-events: auto; cursor: pointer; }
.ck-toast-go { margin-left: 8px; color: var(--accent); white-space: nowrap; }
.ck-toast { white-space: normal; height: auto; min-height: 46px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 18px; line-height: 1.25; }

/* ===== бета: личный кабинет ===== */
.cab-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 2px; }
.cab-ava { width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; box-shadow: 0 3px 0 #b99a12; }
.cab-head-t { display: flex; flex-direction: column; min-width: 0; }
.cab-head-t b { font-size: 21px; line-height: 1.15; }
.cab-head-t small { font-size: 14px; color: var(--muted); }
.cab-next { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: #4e5959; color: #f7f3e7; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.cab-next-top { display: flex; justify-content: space-between; align-items: center; }
.cab-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.cab-link-light { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; color: #d6dcdc; cursor: pointer; }
.cab-next-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cab-next-main b { font-size: 24px; }
.cab-next-main span { font-size: 16px; }
.cab-next-sub { font-size: 13px; color: #c3cbcb; }
.cab-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cab-day { height: 60px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #c3cbcb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; cursor: pointer; padding: 0; }
.cab-day small { font-size: 11px; opacity: .85; }
.cab-day b { font-size: 17px; }
.cab-day i { font-style: normal; font-size: 10px; font-weight: 700; }
.cab-day.work { background: #f7f3e7; color: #2f3636; }
.cab-day.today { background: var(--accent); color: #2f3636; }
.cab-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); border: 0; font: inherit; color: var(--text); text-align: left; width: 100%; box-sizing: border-box; }
.cab-money { cursor: pointer; }
.cab-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cab-more { font-size: 14px; color: var(--muted); }
.cab-big { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cab-big.xl { font-size: 40px; }
.cab-muted { font-size: 13px; color: var(--muted); }
.cab-warn { font-size: 13px; color: #b5432c; }
.cab-alert { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 18px; border: 2px solid var(--accent); background: var(--warn-bg); font: inherit; color: var(--text); text-align: left; cursor: pointer; box-sizing: border-box; }
.cab-alert-i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: #2f3636; }
.cab-alert-t { flex: 1; display: flex; flex-direction: column; }
.cab-alert-t small { font-size: 13px; color: var(--muted); }
.cab-feeds { display: flex; flex-direction: column; gap: 10px; }
.cab-feed { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); border-left: 6px solid #9aa3a3; }
.cab-feed.swap { border-left-color: #5c9a6b; }
.cab-feed.acad { border-left-color: #b99a12; }
.cab-feed-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-feed-t small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cab-feed-t b { font-size: 15px; }
.cab-feed-t span { font-size: 13px; color: var(--muted); }
.cab-fbtn { flex-shrink: 0; height: 36px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--fill); font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }
.cab-fbtn.green { background: #dcebdf; color: #2f5b3a; }
.cab-fbtn.yellow { background: var(--accent-soft); }
.cab-sheet-ov { position: fixed; inset: 0; z-index: 40; background: rgba(47, 54, 54, .45); display: flex; align-items: flex-end; animation: fade-in .2s ease both; }
.cab-sheet { width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box; padding: 10px 16px calc(22px + var(--safe-bottom)); border-radius: 26px 26px 0 0; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.cab-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb), .25); }
.cab-sheet-title { font-size: 20px; }
.cab-lbl { font-size: 14px; font-weight: 700; margin-top: 4px; }
.cab-lbl i { font-style: normal; font-weight: 400; color: var(--muted); }
.cab-seg { display: flex; gap: 8px; }
.cab-seg button { flex: 1; height: 42px; border-radius: 12px; border: 2px solid transparent; background: var(--fill); font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.cab-seg button.on { border-color: var(--text); font-weight: 700; }
.cab-ta { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; background: var(--fill); padding: 10px 12px; font: inherit; font-size: 15px; color: var(--text); resize: none; outline: none; }
.cab-info { font-size: 13px; color: var(--muted); background: var(--fill); border-radius: 14px; padding: 10px 12px; }
.cab-months { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cab-months button { width: 44px; height: 40px; border: 0; border-radius: 12px; background: var(--card); font: inherit; font-size: 20px; color: var(--text); cursor: pointer; }
.cab-months button:disabled { opacity: .35; }
.cab-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--fill); }
.cab-legend { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cab-legend > span { display: flex; align-items: center; gap: 8px; }
.cab-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cab-legend > span > span { flex: 1; }
.cab-total { border-top: 1px solid var(--sep); padding-top: 10px; font-size: 15px; }
.cab-shifts { gap: 0; padding: 4px 14px; }
.cab-shift { display: flex; align-items: center; gap: 10px; min-height: 56px; border-top: 1px solid var(--sep); }
.cab-shift:first-child { border-top: 0; }
.cab-shift.future { opacity: .55; }
.cab-shift-d { width: 34px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cab-shift-d b { font-size: 18px; }
.cab-shift-d small { font-size: 12px; color: var(--muted); }
.cab-shift-t { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.cab-shift-t small { font-size: 12px; color: var(--muted); }
.cab-shift-t small.bad { color: #b5432c; }
.cab-shift-s { font-size: 15px; white-space: nowrap; }
.cab-rules { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--fill); font-size: 13px; line-height: 18px; color: var(--muted); }
.cab-rules b { color: var(--text); font-size: 14px; }
.cab-stats { display: flex; gap: 8px; }
.cab-stat { flex: 1; display: flex; flex-direction: column; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); }
.cab-stat small { font-size: 13px; color: var(--muted); }
.cab-stat b { font-size: 22px; }
.cab-stat.dark { background: #4e5959; color: #f7f3e7; }
.cab-stat.dark small { color: #d6dcdc; }
.cab-stat em { font-style: normal; color: var(--accent); }
.cab-cal { padding: 12px 10px; gap: 6px; }
.cab-cal-h, .cab-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cab-cal-h span { text-align: center; font-size: 12px; color: var(--muted); }
.cab-cal-h span.we { color: #b5432c; }
.cab-cal-c { height: 46px; border: 0; border-radius: 12px; background: var(--fill); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font: inherit; color: var(--text); cursor: pointer; padding: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; box-sizing: border-box; line-height: 1.05; }
.cab-cal-c.empty { background: none; }
.cab-cal-c b { font-size: 16px; font-weight: 400; }
.cab-cal-c small { font-size: 9px; font-weight: 700; }
.cab-cal-c.off { background: var(--accent); box-shadow: 0 3px 0 #b99a12; color: #2f3636; }
.cab-cal-c.off b, .cab-cal-c.work b { font-weight: 700; }
.cab-cal-c.work { background: var(--card); border: 2px solid var(--ink); }
.cab-cal-c:disabled { opacity: .6; }
.cab-legend2 { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); padding: 0 4px; }
.cab-legend2 > span { display: flex; align-items: center; gap: 8px; }
.cab-legend2 i { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; box-sizing: border-box; }
.cab-legend2 i.off { background: var(--accent); }
.cab-legend2 i.work { background: var(--card); border: 2px solid var(--ink); }
.cab-legend2 b { color: var(--text); }
.cab-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cab-opt { min-height: 60px; border-radius: 14px; border: 2px solid transparent; background: var(--fill); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 8px 12px; font: inherit; color: var(--text); cursor: pointer; }
.cab-opt b { font-size: 16px; }
.cab-opt small { font-size: 13px; color: var(--muted); }
.cab-opt.on { border-color: var(--accent); background: var(--warn-bg); }
/* лента дней на месяц в кабинете */
.cab-strip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.cab-strip::-webkit-scrollbar { display: none; }
.cab-strip .cab-day { flex: 0 0 calc((100% - 30px) / 7); scroll-snap-align: start; }
/* мои смены: полоса на шкале дня */
.cab-schs { display: flex; flex-direction: column; gap: 10px; }
.cab-sch { display: flex; align-items: stretch; gap: 10px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.cab-sch-d { width: 46px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.cab-sch-d small { font-size: 12px; color: var(--muted); }
.cab-sch-d b { font-size: 24px; font-weight: 400; }
.cab-sch.today .cab-sch-d b { font-weight: 700; color: var(--warn-ink); }
.cab-sch-track { position: relative; flex: 1; min-height: 62px; border-radius: 12px; background: var(--fill); overflow: hidden; }
.cab-sch-bar { position: absolute; top: 0; bottom: 0; border-radius: 12px; background: #edc14a; }
.cab-sch-t { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; white-space: nowrap; color: #2f3636; }
.cab-sch-t b { font-size: 16px; }
.cab-sch-t small { font-size: 13px; }
.cab-sch.past { opacity: .5; }
.cab-sch.today .cab-sch-track { box-shadow: inset 0 0 0 2px var(--accent); }
.cab-sch-t.end { align-items: flex-end; text-align: right; }

/* ----- тренажёр «Взбей молоко» (milk.js) ----- */
.mk { display: flex; flex-direction: column; gap: 10px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); user-select: none; -webkit-user-select: none; }
.mk-top { display: flex; align-items: center; gap: 10px; }
.mk-top b { flex-grow: 1; font-size: 17px; }
.mk-top span { font-size: 13px; font-weight: 700; background: #fff; border-radius: 10px; padding: 6px 10px; }
.mk-x { width: 44px; height: 44px; border: 0; border-radius: 14px; background: #fff; color: #4e5959; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(78,89,89,.10); }
.mk-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-phases span { height: 38px; border-radius: 12px; background: #fff; color: #5f6a6a; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; transition: background .2s, color .2s; }
.mk-phases span.on { background: #4e5959; color: #fff; }
.mk-phases span.done { background: #e8efe9; color: #2f5a3a; }
.mk-phases span.done::after { content: " ✓"; }
.mk-scene { height: min(56vh, 470px); background: #fff; border-radius: 24px; box-shadow: 0 2px 0 rgba(78,89,89,.10); display: flex; gap: 8px; padding: 12px; overflow: hidden; touch-action: none; }
.mk-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-hint { border-radius: 14px; padding: 8px 12px; font-size: 14px; font-weight: 700; text-align: center; line-height: 18px; min-height: 36px; box-sizing: border-box; background: #f2efe4; color: #2f3636; }
.mk-hint[data-tone="ok"] { background: #e8efe9; color: #2f5a3a; }
.mk-hint[data-tone="warn"] { background: #fff3c4; color: #6b5200; }
.mk-hint[data-tone="bad"] { background: #fbe3df; color: #8a2f25; }
.mk-svg { flex-grow: 1; min-height: 0; width: 100%; cursor: grab; }
.mk-swirl { transition: opacity .25s; }
.mk-cap { font-size: 12px; color: #5f6a6a; text-align: center; }
.mk-rail { width: 70px; display: flex; flex-direction: column; gap: 4px; }
.mk-rail-cap { font-size: 12px; color: #5f6a6a; text-align: center; }
.mk-rail-in { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; position: relative; }
.mk-z { flex: 1; border-radius: 10px; background: #f2efe4; color: #5f6a6a; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; line-height: 13px; padding: 0 2px; }
.mk-z.on { background: #e9c51d; color: #2f3636; font-weight: 700; }
.mk-thumb { position: absolute; left: -7px; width: 5px; height: 26px; margin-top: -13px; border-radius: 3px; background: #2f3636; pointer-events: none; }
.mk-bar { background: #fff; border-radius: 18px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 0 rgba(78,89,89,.10); }
.mk-bar-l { display: flex; font-size: 13px; font-weight: 700; }
.mk-bl-air { width: 22%; }
.mk-bl-heat { flex-grow: 1; }
.mk-bar-l em { font-style: normal; font-weight: 400; color: #5f6a6a; }
.mk-bar-in { height: 26px; display: flex; gap: 4px; }
.mk-seg { position: relative; background: #f2efe4; overflow: hidden; }
.mk-seg.air { width: 22%; border-radius: 13px 4px 4px 13px; }
.mk-seg.heat { flex-grow: 1; border-radius: 4px 13px 13px 4px; }
.mk-goal { position: absolute; top: 0; bottom: 0; background: rgba(92,154,107,.32); }
.mk-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #4e5959; }
.mk-seg.heat .mk-fill { background: #e9a21d; }
.mk-fill.done { background: #5c9a6b; }
.mk-fill.over, .mk-seg.heat .mk-fill.hot { background: #d6453a; }
.mk-steam { height: 68px; border: 0; border-radius: 22px; background: #2f3636; color: #fff; font-family: inherit; font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 0 #1c2121; touch-action: none; transition: transform .08s, box-shadow .08s; }
.mk-steam span { width: 12px; height: 12px; border-radius: 50%; background: #7f8a8a; }
.mk-steam.on { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(0,0,0,.35); }
.mk-steam.on span { background: #e9c51d; }
.mk-goalcard { background: #4e5959; color: #fff; border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.mk-goalcard small { font-size: 13px; color: #e9c51d; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mk-goalcard div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-goalcard span { background: rgba(255,255,255,.10); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.mk-goalcard i { font-style: normal; font-size: 12px; color: #d6dcdc; }
.mk-goalcard b { font-size: 17px; }
.mk-vols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-vol { border: 2px solid transparent; border-radius: 18px; background: #fff; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font-family: inherit; color: #2f3636; box-shadow: 0 2px 0 rgba(78,89,89,.10); }
.mk-vol.on { border-color: #e9c51d; }
.mk-vol b { font-size: 17px; }
.mk-vol small { font-size: 13px; color: #5f6a6a; }
.mk-vol em { font-style: normal; font-size: 13px; font-weight: 700; color: #8a6a00; }
.mk-howto { margin: 12px 0; background: #fff6d6; border: 2px solid #e9c51d; border-radius: 18px; padding: 14px; }
.mk-howto b { font-size: 15px; }
.mk-howto p { margin: 6px 0 0; font-size: 14px; color: #5f6a6a; line-height: 19px; }
.mk-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.mk-btn { height: 56px; border: 0; border-radius: 18px; background: #e9c51d; box-shadow: 0 4px 0 #b99a12; font-family: inherit; font-size: 17px; font-weight: 700; color: #2f3636; }
.mk-btn.ghost { background: #fff; box-shadow: 0 2px 0 rgba(78,89,89,.12); font-size: 15px; }
.mk-res { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.mk-res-cap { text-align: center; font-size: 13px; color: #5f6a6a; text-transform: uppercase; letter-spacing: .05em; padding-top: 10px; }
.mk-res-title { text-align: center; font-size: 30px; }
.mk-stars { display: flex; justify-content: center; gap: 6px; }
.mk-rows { background: #fff; border-radius: 20px; box-shadow: 0 2px 0 rgba(78,89,89,.10); overflow: hidden; }
.mk-row { min-height: 58px; padding: 10px 14px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; }
.mk-row + .mk-row { border-top: 1px solid rgba(78,89,89,.12); }
.mk-mark { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.mk-mark.ok { background: #e8efe9; color: #3f7a4f; }
.mk-mark.meh { background: #fff3c4; color: #8a6a00; }
.mk-row-b { display: flex; flex-direction: column; flex-grow: 1; }
.mk-row-b b { font-size: 16px; }
.mk-row-b small { font-size: 13px; color: #5f6a6a; }
.mk-row em { font-style: normal; font-size: 16px; font-weight: 700; white-space: nowrap; }
.mk-tipbox { background: #fff6d6; border: 2px solid #e9c51d; border-radius: 18px; padding: 14px; }
.mk-tipbox b { font-size: 15px; }
.mk-tipbox p { margin: 4px 0 0; font-size: 14px; color: #5f6a6a; line-height: 19px; }

/* ===== Кабинет кондитера и две должности: лента с заливкой по типу смены ===== */
.cab-day.fx { position: relative; overflow: hidden; display: block; color: #c3cbcb; }
.cab-day.fx small, .cab-day.fx b { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
.cab-day.fx small { top: 3px; bottom: calc(50% + 3px); }
.cab-day.fx b { top: calc(50% + 3px); bottom: 3px; line-height: 1; }
.cab-day.fx .in { color: #2f3636; }
.cab-day.fx.today { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px #f7f3e7; }
.cab-day.fx.on.b { --sh: var(--accent); }
.cab-day.fx.on.k { --sh: #b9a7e8; }
.cab-day.fx.on { box-shadow: inset 0 0 0 1.5px var(--sh); }
.cab-day.fx.on.today { box-shadow: 0 0 0 2px #f7f3e7, inset 0 0 0 1.5px var(--sh); }
.cab-fill { position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; border-radius: 8px; background: var(--sh); }
.s-1 .cab-fill { bottom: calc(50% + 3px); }
.s-2 .cab-fill { top: calc(50% + 3px); }
.s-3 .cab-fill { top: 23px; bottom: 26px; border-radius: 4px; }
.s-x .cab-fill { left: calc(50% - 4px); right: calc(50% - 4px); top: 25px; bottom: 27px; border-radius: 50%; }
.cab-strip .cab-day.fx { margin: 2px 0; }
.cab-kinds { display: flex; gap: 14px; font-size: 13px; color: #c3cbcb; }
.cab-kinds.dark { color: var(--muted); }
.cab-kinds span { display: flex; align-items: center; gap: 6px; }
.cab-kinds i { width: 12px; height: 12px; border-radius: 4px; background: var(--accent); }
.cab-kinds i.k { background: #b9a7e8; }
.cab-sch-bar.k { background: #b9a7e8; }
.cab-sch-t.wrap { white-space: normal; line-height: 1.2; }

/* ===== Главная: кабинет справа, «Люди» во «Всё остальное» ===== */
.tg { background: #8fb59a; color: #fff; }
.home-me { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; }
.home-me span { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 #b99a12; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.home-me small { font-size: 11px; color: var(--muted); }
svg.up { transform: rotate(-90deg); }
svg.down { transform: rotate(90deg); }

/* ===== Смена кондитера ===== */
.kd { background: #ece6f7; color: #4e4466; }
.kd-widget { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 14px 16px; border: 0; border-radius: 20px; background: #4e4466; color: #fff; text-align: left; font: inherit; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); cursor: pointer; margin-bottom: 4px; }
.kd-widget b { font-size: 19px; }
.kd-widget small { font-size: 13px; color: #d8ccf5; }
.kd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #d8ccf5; }
.kd-light { font-size: 13px; color: #d8ccf5; }
.kd-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); }
.kd-card.dark { background: #4e4466; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); border-radius: 22px; }
.kd-plan .kd-eyebrow { color: #6a5a94; }
.kd-plan-v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kd-plan-v b { color: #3f7a4f; font-size: 15px; }
.kd-rate { color: #c9f0d2; font-size: 16px; }
.kd-bar { display: block; height: 10px; border-radius: 5px; background: #ece6f7; overflow: hidden; }
.kd-bar span { display: block; height: 100%; background: #4e4466; border-radius: 5px; }
.kd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kd-tile { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 16px; border: 0; border-radius: 22px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.kd-tile.low { aspect-ratio: auto; gap: 10px; padding: 14px; }
.kd-tile span:last-child { display: flex; flex-direction: column; gap: 3px; }
.kd-tile b { font-size: 17px; }
.kd-tile small { font-size: 13px; color: var(--muted); line-height: 1.25; }
.kd-ic { width: 50px; height: 50px; border-radius: 16px; background: #ece6f7; color: #4e4466; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kd-ic.soft { width: 42px; height: 42px; border-radius: 13px; }
.kd-prev { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: #2f3636; color: #fff; }
.kd-prev p { margin: 0; font-size: 15px; line-height: 20px; color: #e8ecec; }
.kd-prev small { font-size: 12px; color: #a9b3b3; }
.kd-line { display: flex; gap: 10px; align-items: flex-start; }
.kd-line i { font-style: normal; font-size: 12px; font-weight: 700; width: 44px; padding-top: 7px; flex-shrink: 0; }
.kd-line i.stop { color: #ff9d8a; }
.kd-line i.low { color: #f2d36b; }
.kd-line > span { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-chip { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.kd-marks { padding: 0; overflow: hidden; }
.kd-mark { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 14px; border-top: 1px solid var(--sep); }
.kd-mark:first-child { border-top: 0; }
.kd-badge { min-width: 48px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 7px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fbe3df; color: #8a2f25; }
.kd-badge.low { background: #fff0b8; color: #6b5300; }
.kd-mark-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kd-mark-t small { font-size: 12px; color: var(--muted); }
.kd-x { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.kd-hand { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 0; border-radius: 22px; background: #4e4466; color: #fff; text-align: left; font: inherit; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); cursor: pointer; margin-top: 4px; }
.kd-hand .kd-ic { background: rgba(255, 255, 255, .14); color: #fff; width: 44px; height: 44px; border-radius: 14px; }
.kd-hand > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.kd-hand b { font-size: 18px; }
.kd-hand small { font-size: 13px; color: #d8ccf5; }
.kd-hand .chev { color: #fff; }

.kr-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.kr-step { display: flex; flex-direction: column; gap: 4px; }
.kr-step span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.kr-step.done span { background: rgba(201, 240, 210, .55); }
.kr-step.cur span { background: #c9f0d2; }
.kr-step small { font-size: 11px; color: #bdb3d6; text-align: center; }
.kr-step.cur small, .kr-step.done small { color: #fff; }
.kr-list { padding: 0; overflow: hidden; }
.kr-head, .kr-row { display: grid; grid-template-columns: 1fr 92px 92px; gap: 8px; align-items: center; padding: 8px 12px; }
.kr-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: #f8f6fc; }
.kr-head span:not(:first-child) { text-align: center; }
.kr-row { border-top: 1px solid var(--sep); }
.kr-row.empty { background: #fcfbf7; }
.kr-name { display: flex; flex-direction: column; min-width: 0; }
.kr-name b { font-size: 15px; line-height: 18px; }
.kr-name small { font-size: 12px; color: var(--muted); }
.kr-box { height: 44px; border-radius: 12px; background: #f2efe4; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.kr-box.on { background: #ece6f7; }
.kr-box button { width: 28px; height: 38px; border: 0; background: none; font: inherit; font-size: 20px; font-weight: 700; color: #4e4466; cursor: pointer; }
.kr-box b { font-size: 18px; }
.kr-send-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(14px + var(--safe-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); display: flex; flex-direction: column; gap: 6px; align-items: stretch; max-width: 560px; margin: 0 auto; }
.kr-send-wrap small { font-size: 12px; color: var(--muted); text-align: center; }

.kl-row .row-sub.bad { color: #b3402f; }
.kl-row .row-sub.rep { color: #4e4466; font-weight: 700; }
.kl-ab { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: #ece6f7; color: #4e4466; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-left: 2px; }
.kl-ab i { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #b3402f; color: #fff; box-shadow: 0 0 0 2px var(--card); font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; }

.kc-head { gap: 12px; }
.kc-count { display: flex; align-items: center; gap: 12px; }
.kc-count button { width: 52px; height: 52px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 26px; font-weight: 700; cursor: pointer; }
.kc-count button.plus { background: #b9a7e8; color: #2f3636; }
.kc-count input { flex: 1; min-width: 0; height: 52px; border: 0; border-bottom: 2px dashed rgba(255, 255, 255, .35); background: transparent; color: #fff; font: inherit; font-size: 44px; font-weight: 700; text-align: center; outline: none; padding: 0; }
.kc-count span { font-size: 18px; color: #d8ccf5; margin-left: -8px; }
.kc-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kc-chips button { height: 38px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.kc-chips button.on { background: #b9a7e8; color: #2f3636; }
.kc-add { height: 52px; border: 0; border-radius: 16px; background: var(--accent); color: #2f3636; font: inherit; font-size: 16px; font-weight: 700; box-shadow: 0 3px 0 #b99a12; cursor: pointer; }
.kc-added { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .14); color: var(--accent); }
.kc-added span { flex: 1; display: flex; flex-direction: column; color: #fff; }
.kc-added small { font-size: 13px; color: #d8ccf5; }
.kc-added button { height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.kc-stop { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; background: #fbe3df; color: #6b2a20; font-size: 14px; }
.kc-stop b { width: 22px; height: 22px; border-radius: 50%; background: #b3402f; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kc-part { display: flex; flex-direction: column; gap: 8px; padding: 14px 8px 8px; border-radius: 20px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); }
.kc-part > .cab-row { padding: 0 6px; }
.kc-title { font-size: 19px; padding: 0 6px; }
.kc-tg { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 14px; background: #f3f0f9; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.kc-tg b { flex: 1; font-size: 15px; }
.kc-tg small { font-size: 13px; font-weight: 700; color: #4e4466; }
.kc-items, .kc-steps { display: flex; flex-direction: column; }
.kc-it { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 0 4px 6px; border-top: 1px solid var(--sep); }
.kc-it:first-child { border-top: 0; }
.kc-it-l { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.kc-it-l > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kc-it-l small { font-size: 12px; color: var(--muted); }
.kc-it.done b, .kc-it.done .kc-need { color: #8a9090; }
.kc-it.done b { text-decoration: line-through; }
.kc-need { min-width: 76px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 17px; font-weight: 700; color: var(--text); text-align: right; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; }
.kc-need.on { background: #ece6f7; }
.kc-limit { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 12px; background: #f8f6fc; border-radius: 12px; font-size: 13px; color: var(--muted); }
.kc-limit > div { display: flex; gap: 8px; }
.kc-limit label { flex: 1; height: 44px; border-radius: 12px; background: #fff; border: 2px solid #b9a7e8; display: flex; align-items: center; padding: 0 12px; gap: 6px; }
.kc-limit input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 18px; font-weight: 700; background: transparent; color: var(--text); }
.kc-limit i { font-style: normal; }
.kc-limit button { height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: #4e4466; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.kc-limit small { color: #4e4466; }
.kc-st { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; border: 0; border-top: 1px solid rgba(78, 89, 89, .08); background: none; font: inherit; font-size: 15px; line-height: 21px; color: var(--text); text-align: left; cursor: pointer; }
.kc-st:first-child { border-top: 0; }
.kc-st i { width: 26px; height: 26px; border-radius: 50%; background: #ece6f7; color: #4e4466; font-style: normal; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kc-st.on { color: #9aa0a0; }
.kc-st.on i { background: #4e4466; color: #fff; }
.kc-bake { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #4e4466; color: #fff; font-size: 15px; }
.kc-builds { gap: 0; padding: 12px 14px; }
.kc-build { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sep); font-size: 15px; }
.kc-build b { white-space: nowrap; }

.kp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kp-stats span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .10); }
.kp-stats small { font-size: 12px; color: #d8ccf5; }
.kp-stats b { font-size: 18px; }
.kp-day { border-radius: 18px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); overflow: hidden; }
.kp-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.kp-d { width: 40px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; line-height: 1.1; }
.kp-d b { font-size: 20px; }
.kp-d small { font-size: 12px; color: var(--muted); }
.kp-m { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kp-m > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.kp-m small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-m .kd-bar { height: 6px; }
.kp-h em { font-style: normal; font-size: 12px; font-weight: 700; color: #4e4466; background: #ece6f7; border-radius: 8px; padding: 3px 7px; }
.kp-h em.now { background: var(--accent); color: #2f3636; }
.kp-items { border-top: 1px solid var(--sep); }
.kp-it { display: grid; grid-template-columns: 1fr 56px 56px; gap: 6px; padding: 9px 14px; border-top: 1px solid rgba(78, 89, 89, .08); font-size: 15px; }
.kp-it b, .kp-it span:last-child { text-align: right; }
.kp-it.head { font-size: 11px; color: var(--muted); text-transform: uppercase; background: #f8f6fc; border-top: 0; }
.kp-it.head span:not(:first-child) { text-align: right; }
.kp-foot { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--sep); font-size: 13px; color: var(--muted); }
.kp-foot b { color: var(--text); }

/* ===== Вино ===== */
.wn-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.wn-week { display: flex; gap: 14px; align-items: center; width: 100%; padding: 16px; border: 0; border-radius: 22px; background: #8e2a3b; color: #fff; text-align: left; font: inherit; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); cursor: pointer; }
.wn-week > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wn-week small { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f3c9d0; }
.wn-week b { font-size: 20px; line-height: 1.15; }
.wn-week em { font-style: normal; font-size: 14px; color: #f3c9d0; }
.wn-week strong { font-size: 15px; }
.wn-low { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px; background: #fbe3df; border: 2px solid #e8a79b; }
.wn-low b { font-size: 15px; color: #6b2a20; }
.wn-low button { display: flex; justify-content: space-between; gap: 10px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 15px; color: var(--text); text-align: left; cursor: pointer; }
.wn-low em { font-style: normal; font-weight: 700; color: #b3402f; white-space: nowrap; }
.wn-low small { font-size: 12px; color: #8a4a40; }
.wn-panes em { font-style: normal; font-size: 12px; color: #8e2a3b; margin-left: 4px; }
.wn-swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; align-items: flex-start; }
.wn-swipe::-webkit-scrollbar { display: none; }
.wn-page { flex: 0 0 100%; box-sizing: border-box; padding: 0 16px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.wn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wn-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 8px 10px; border: 0; border-radius: 16px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); font: inherit; color: var(--text); cursor: pointer; min-width: 0; }
.wn-tile b { font-size: 13px; line-height: 16px; text-align: center; min-height: 32px; }
.wn-tile small { font-size: 11px; color: var(--muted); text-align: center; line-height: 14px; }
.wn-tile strong { font-size: 15px; color: #8e2a3b; }
.wn-pic { width: 100%; height: 96px; border-radius: 12px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; box-sizing: border-box; overflow: hidden; }
.wn-pic:has(img) { padding: 0; }
.wn-pic.sm { width: 40px; height: 52px; padding-bottom: 3px; border-radius: 10px; flex-shrink: 0; }
.wn-st { font-size: 11px; font-weight: 700; color: var(--muted); }
.wn-st.low { color: #b3402f; }
.wn-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.wn-tabs button { flex-shrink: 0; height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--card); font: inherit; font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.wn-tabs button.on { background: #2f3636; color: #fff; }
.wn-tabs i { width: 10px; height: 10px; border-radius: 50%; }
.wn-rows { display: flex; flex-direction: column; gap: 8px; }
.wn-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 0; border-radius: 16px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wn-row-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wn-row-t small { font-size: 12px; color: var(--muted); }
.wn-row > b { font-size: 15px; white-space: nowrap; }
.wn-count { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wn-count > span { flex: 1; display: flex; flex-direction: column; }
.wn-count small { font-size: 13px; color: var(--muted); }
.wn-faq { padding: 0; overflow: hidden; gap: 0; }
.wn-q { border-top: 1px solid var(--sep); }
.wn-q:first-child { border-top: 0; }
.wn-q button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wn-q button b { flex: 1; font-size: 16px; }
.wn-q p { margin: 0; padding: 0 14px 14px; font-size: 15px; line-height: 21px; white-space: pre-line; }
.wn-hero { display: flex; gap: 16px; align-items: flex-end; padding: 18px 16px; border-radius: 24px; }
.wn-hero-pic { flex-shrink: 0; width: 72px; height: 132px; display: flex; align-items: flex-end; justify-content: center; border-radius: 14px; overflow: hidden; }
.wn-hero-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wn-hero-t em { align-self: flex-start; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #8e2a3b; border-radius: 8px; padding: 3px 8px; }
.wn-hero-t small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wn-winery { font-size: 16px; color: #8e2a3b; margin-top: -3px; }
.wn-hero-t h1 { margin: 0; font-size: 28px; line-height: 1.05; overflow-wrap: anywhere; }
.wn-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wn-prices > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); }
.wn-prices > div.on { background: #8e2a3b; color: #fff; }
.wn-prices small { font-size: 12px; opacity: .75; }
.wn-prices b { font-size: 26px; }
.wn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wn-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: 0 2px 0 rgba(78, 89, 89, .10); }
.wn-fact.wide { grid-column: 1 / -1; }
.wn-fact small { font-size: 12px; color: var(--muted); }
.wn-fact b { font-size: 16px; line-height: 20px; }
.wn-sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; font-size: 11px; color: #9aa0a0; text-align: center; }
.wn-sw span { display: flex; flex-direction: column; gap: 4px; }
.wn-sw i { height: 8px; border-radius: 4px; background: #efe9dc; }
.wn-sw span.on { color: var(--text); }
.wn-sw span.on i { background: #8e2a3b; }
.wn-txt { gap: 6px; }
.wn-txt p { margin: 0; font-size: 15px; line-height: 21px; }
.wn-ours { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-ours + p { margin-top: 6px; }
.wn-ours button { min-height: 34px; padding: 7px 12px; line-height: 20px; text-align: left; border: 0; border-radius: 10px; background: #f6e3e6; color: #8e2a3b; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.wn-left { display: flex; align-items: baseline; gap: 8px; }
.wn-left.low { color: #b3402f; }
.wn-cnt { padding: 0; gap: 0; overflow: hidden; }
.wn-cnt-r { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-top: 1px solid var(--sep); }
.wn-cnt-r:first-child { border-top: 0; }
.wn-cnt-r input { width: 64px; height: 42px; border: 2px solid var(--sep); border-radius: 12px; text-align: center; font: inherit; font-size: 18px; font-weight: 700; color: var(--text); background: var(--bg); outline: none; }
.wn-page, .wn-page > * { min-width: 0; }
.wn-tabs { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }

/* выходные бариста: плашка на Главной и общий календарь в админке */
.home-wish { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin-bottom: 12px; border: 0; border-radius: 20px; background: var(--accent); color: #2f3636; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.home-wish > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-wish b { font-size: 16px; }
.home-wish small { font-size: 13px; opacity: .75; }
.aw-ask { margin-top: 4px; }
.aw-c.has { background: var(--accent); color: #2f3636; }
.aw-c.has b { font-weight: 700; }
.aw-c.pick { box-shadow: 0 0 0 2px var(--ink); }
.aw-day, .aw-notes { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; font-size: 14px; }
.aw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.aw-dot.off { background: var(--accent); }
.aw-dot.work { border: 2px solid var(--ink); box-sizing: border-box; }
.aw-tbl-w { overflow-x: auto; border-radius: 16px; background: var(--card); -webkit-overflow-scrolling: touch; }
.aw-tbl { border-collapse: collapse; font-size: 12px; }
.aw-tbl th, .aw-tbl td { min-width: 24px; height: 28px; padding: 0 2px; text-align: center; border-right: 1px solid var(--bg); border-bottom: 1px solid var(--bg); }
.aw-tbl thead th { color: var(--muted); font-weight: 600; }
.aw-tbl thead th.we, .aw-tbl td.we { background: rgba(181, 67, 44, .06); }
.aw-tbl tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; white-space: nowrap; padding: 0 10px; font-weight: 600; }
.aw-tbl td.off { background: var(--accent); color: #2f3636; font-weight: 700; }
.aw-tbl td.work { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
.aw-exp { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.aw-ord { display: flex; align-items: center; gap: 10px; }
.aw-ord em { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #2f3636; font-style: normal; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.aw-ord span { display: flex; flex-direction: column; }
.aw-ord small { color: var(--muted); font-size: 12px; }
.pp-sprout { color: #4f8a3c; margin-left: 4px; vertical-align: -1px; flex-shrink: 0; }
.ppc-tag .pp-sprout { color: currentColor; }
/* лента «Бермар / Витрина»: листается только вбок — своей вертикальной
   прокрутки нет, иначе плитки обрезались сверху и жест путался с обновлением */
.wn-swipe { overflow-y: hidden; overscroll-behavior-x: contain; }
.wn-tile b { overflow-wrap: anywhere; }
.wn-st.out { color: var(--muted); font-weight: 600; }
.wn-row.out { opacity: .55; }
.wn-gone { padding: 8px 4px 0; }
.wn-hero, .wn-hero-t b { min-width: 0; overflow-wrap: anywhere; }

/* смена кондитера в тёмной теме: светлые плашки были нечитаемы */
.kr-search { margin-bottom: 0; }
.kr-row[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  .kr-head, .kp-it.head, .kc-limit { background: #2f2a3d; }
  .kr-row.empty { background: transparent; }
  .kr-row.empty .kr-name b { opacity: .6; }
  .kr-box { background: #384043; color: var(--text); }
  .kr-box.on, .kc-need.on { background: #463d63; }
  .kr-box b { color: var(--text); }
  .kr-box button, .kc-tg small, .kc-limit small, .kl-row .row-sub.rep { color: #d4c8f5; }
  .kd, .kd-ic, .kl-ab, .kc-st i, .kp-h em, .kd-bar { background: #3a3450; color: #d4c8f5; }
  .kc-tg { background: #322d42; }
  .kc-limit label { background: var(--card); }
  .kd-plan-v b { color: #9fd8ae; }
  .kd-badge { background: #4a2a26; color: #f3b8ad; }
  .kd-badge.low { background: #4a3f12; color: #f5dc7a; }
  .kc-stop { background: #4a2a26; color: #f3c4ba; }
}
.ks-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.ks-open { font-size: 14px; font-weight: 700; color: var(--accent-ink, #8a6d00); }
.ks-mail { word-break: break-all; }
.ks-more { border-top: 1px solid var(--sep); padding-top: 8px; }
.ks-more summary { cursor: pointer; font-size: 14px; color: var(--muted); list-style: none; padding: 4px 0; }
.ks-more summary::-webkit-details-marker { display: none; }
.ks-more summary::before { content: "▸ "; }
.ks-more[open] summary::before { content: "▾ "; }
.ks-danger { color: #b3402f; }
.kr-box .kr-num { flex: 1; width: auto; min-width: 0; height: 38px; border: 0; background: none; font: inherit; font-size: 18px; font-weight: 700; color: var(--text); cursor: pointer; padding: 0; }
/* барабаны: видно 5 строк, середина — выбранное */
.kw-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kw-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kw-col small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kw-wheel { width: 100%; height: 200px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 80px 0; box-sizing: border-box; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.kw-wheel::-webkit-scrollbar { display: none; }
.kw-wheel span { display: block; height: 40px; line-height: 40px; text-align: center; font-size: 22px; color: var(--muted); scroll-snap-align: center; font-variant-numeric: tabular-nums; transition: color .12s, font-size .12s; }
.kw-wheel span.on { color: var(--text); font-size: 28px; font-weight: 700; }
.kw-wrap { position: relative; width: 100%; }
.kw-wheel { position: relative; }
.kw-band { position: absolute; left: 0; right: 0; top: 80px; height: 40px; border-radius: 12px; background: var(--fill); pointer-events: none; }
@media (prefers-color-scheme: dark) { .kr-box .kr-num { color: var(--text); } }
.ks-tools { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.ks-tools .ks-link { height: 44px; }
.ks-btn { width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--fill); font: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; }
.ks-btn.danger { background: none; box-shadow: inset 0 0 0 1.5px #d9a39a; color: #b3402f; }
@media (prefers-color-scheme: dark) { .ks-btn.danger { box-shadow: inset 0 0 0 1.5px #7a3a31; color: #f08a78; } }
.rc-sum { display: flex; flex-direction: column; gap: 4px; }
.rc-list { padding: 0; overflow: hidden; }
.rc-row { display: grid; grid-template-columns: 1fr 46px 46px 46px 58px; gap: 4px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-top: 1px solid var(--sep); background: none; font: inherit; font-size: 14px; color: var(--text); text-align: right; cursor: pointer; }
.rc-row.head { border-top: 0; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; cursor: default; }
.rc-row .rc-name, .rc-row.head span:first-child { text-align: left; overflow-wrap: anywhere; }
.rc-diff.bad { color: #b3402f; }
.rc-diff.minus { color: #3f7a4f; }
.rc-diff.ok { color: var(--muted); }
.rc-det { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 10px; font-size: 13px; color: var(--muted); }
@media (prefers-color-scheme: dark) { .rc-diff.bad { color: #f08a78; } .rc-diff.minus { color: #9fd8ae; } }

/* доп. часы «+N» из календаря */
.cab-day.fx .cab-xh { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-radius: 0; font-size: 9px; line-height: 13px; text-align: center; }
.cab-day.fx.xh b { bottom: 14px; top: calc(50% - 2px); }
.cab-day.fx.xh small { bottom: calc(50% + 2px); }
.cab-xh { font-style: normal; font-size: 10px; font-weight: 700; line-height: 14px; padding: 0 4px; border-radius: 7px; background: #ff9f43; color: #2f3636; }
.cab-xh.inline { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: 9px; vertical-align: 2px; margin-left: 4px; }
.cab-xh-list { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; color: inherit; }
.cab-xh-list > i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: #ff9f43; margin-top: 4px; }
.cab-xh-list span { display: flex; flex-direction: column; gap: 2px; }
.cab-xh-list small { opacity: .75; }
.cab-schs + .cab-xh-list { padding: 0 4px; color: var(--text); }

/* шкала кондитеров в «Зарплате сотрудников» */
.pay-step { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 8px; align-items: center; padding: 6px 0; }
.pay-step.head { font-size: 12px; color: var(--hint); padding-top: 0; }
.pay-step .pay-val { justify-content: flex-start; }
.pay-step .pay-in { width: 100%; min-width: 0; }
.pay-step .pay-in:disabled { opacity: .55; }
.pk-add { margin-top: 6px; }

/* вино недели: акция на плашке списка и в карточке */
.wn-promo { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; font-style: normal; font-size: 13px; font-weight: 700; }
.wn-weekcard { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 20px; background: #8e2a3b; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.wn-weekcard small { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f3c9d0; }
.wn-weekcard b { font-size: 18px; line-height: 1.25; }
.wn-weekcard span { font-size: 13px; color: #f3c9d0; }
.wn-searchbox { margin: 0; }

/* вино в тёмной теме: шапка карточки на светлой подложке цвета вина — текст
   на ней всегда тёмный; остальное — под тёмные карточки */
.wn-hero, .wn-hero-t h1 { color: #2f3636; }
.wn-hero-t small { color: #6f7777; }
@media (prefers-color-scheme: dark) {
  .wn-sw i { background: rgba(234, 230, 221, .14); }
  .wn-sw span.on i { background: #c0475c; }
  .wn-tile strong, .wn-panes em { color: #f1a9b3; }
  .wn-tabs button.on { background: var(--text); color: #21272a; }
  .wn-ours button { background: rgba(228, 138, 149, .18); color: #f3b8c1; }
  .wn-left.low, .wn-st.low { color: #f08a78; }
  .wn-pic { filter: saturate(.9) brightness(.92); }
}

/* две должности — аватар пополам: бариста (жёлтый) и кондитер (лавандовый) */
.cab-ava.duo, .home-me.duo span { background: linear-gradient(135deg, var(--accent) 0 50%, #b9a7e8 50% 100%); color: #2f3636; box-shadow: 0 3px 0 #9a8a6a; }
.cab-ava.k { background: #b9a7e8; color: #2f3636; box-shadow: 0 3px 0 #8a7bb8; }
.cab-shift.k .cab-shift-d b { color: #7a68b0; }
@media (prefers-color-scheme: dark) { .cab-shift.k .cab-shift-d b { color: #c9bbf0; } }