/* Вещи продукта на сайте (spec сайта §3): бронь, звонок, квитанция, билет,
   лист уборки, итог дня. Бумага, а не окна: белая карточка, тонкая граница,
   мягкая тень тоном страницы. Квитанция и билет вырезаны масками — тень от
   них падает по форме бумаги (drop-shadow), а не прямоугольником. */

.ar{
  position:relative;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-thing);
  box-shadow:0 1px 0 var(--line-2),0 26px 50px -28px var(--shadow),0 10px 22px -16px var(--shadow);
  font-size:15.5px;line-height:1.45;
  text-align:left;
}

/* ── бронь ─────────────────────────────────────────────────────── */
.ar-booking{width:min(360px,100%);padding:22px 24px 22px}
.ar-bk-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ar-bk-object{font-size:17px;font-weight:650;letter-spacing:-.01em}
.ar-status{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;white-space:nowrap}
.ar-status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ar-booking[data-tone="ok"] .ar-status{color:var(--ok)}
.ar-booking[data-tone="wait"] .ar-status{color:var(--wait)}
.ar-bk-when{margin-top:5px;font-size:14.5px;color:var(--ink-3)}
.ar-bk-main{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px}
.ar-unit{font-size:52px;line-height:1;font-weight:650;letter-spacing:-.035em;white-space:nowrap}
.ar-bk-sum{font-size:21px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ar-bk-extra{margin-top:14px;font-size:14.5px;color:var(--ink-2)}

/* Полоса времени: сутки подряд и отрезок брони. Отрезок едет и тянется,
   когда бронь меняется (сцена первого экрана): left и width одного
   элемента — дешёвая раскладка, а масштаб сплющил бы скруглённые концы. */
.ar-strip{position:relative;margin-top:16px}
.ar-strip-days{display:grid;grid-template-columns:repeat(var(--days),minmax(0,1fr));gap:3px}
.ar-strip-day{display:grid;gap:6px}
.ar-strip-day i{height:8px;border-radius:4px;background:var(--line)}
.ar-strip-day em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.ar-strip-bar{
  position:absolute;top:0;height:8px;border-radius:4px;background:var(--ink);
  left:calc(var(--from) * 100%);width:calc((var(--to) - var(--from)) * 100%);min-width:6px;
  transition:left 700ms var(--ease-in-out),width 700ms var(--ease-in-out);
}

/* ── звонок ────────────────────────────────────────────────────────
   Капсула разговора телефона: тёмная в обеих темах — это экран телефона,
   а не страница. */
.ar-call{
  display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 22px 0 8px;border-radius:999px;
  background:#15191A;color:#F2F4F3;box-shadow:0 18px 36px -18px rgb(0 0 0 / .5);
}
.ar-call-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#3E8A62;color:#fff}
.ar-call-ic svg{width:19px;height:19px}
.ar-call-word{font-size:15.5px;font-weight:500;color:rgb(242 244 243 / .66)}
.ar-call-time{font-size:18px;font-weight:650;min-width:3.2ch}

/* ── квитанция и продажа ───────────────────────────────────────── */
.ar-receipt{
  width:min(340px,100%);padding:24px 26px 84px;
  background:none;border:0;box-shadow:none;
  filter:drop-shadow(0 20px 22px var(--shadow)) drop-shadow(0 1px 1px var(--line));
}
.ar-receipt::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--card);border-radius:var(--r-thing) var(--r-thing) 0 0;
  -webkit-mask:conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/14px 100% repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat;
  mask:conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/14px 100% repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat;
}
.ar-receipt{isolation:isolate}
.ar-receipt header{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.ar-receipt header b{font-size:16.5px;font-weight:650}
.ar-receipt header span{font-size:14px;color:var(--ink-3)}
.ar-receipt ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ar-receipt li{display:flex;align-items:baseline;gap:8px;font-size:15.5px}
.ar-receipt li i{flex:1;border-bottom:1.5px dotted var(--line);transform:translateY(-4px)}
.ar-receipt li b{font-weight:600;white-space:nowrap}
/* Узкий телефон: строка квитанции не ломается («Аренда, 3 / часа»). */
@media (max-width:360px){.ar-receipt li{font-size:14.5px;gap:6px}.ar-receipt li span{white-space:nowrap}}
.ar-rc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:17.5px;font-weight:650}
.ar-stamp{
  position:absolute;right:26px;bottom:30px;padding:5px 12px 4px;border:2px solid currentColor;border-radius:7px;
  font-style:normal;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);transform:rotate(-8deg);opacity:.92;
}

/* ── билет гостя ───────────────────────────────────────────────── */
.ar-ticket{
  --cut:140px;
  width:min(340px,100%);background:none;border:0;box-shadow:none;isolation:isolate;
  filter:drop-shadow(0 22px 24px var(--shadow)) drop-shadow(0 1px 1px var(--line));
}
.ar-ticket::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--card);border-radius:var(--r-thing);
  -webkit-mask:radial-gradient(circle 10px at 0 var(--cut),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% var(--cut),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 10px at 0 var(--cut),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% var(--cut),#0000 97%,#000) right/51% 100% no-repeat;
}
.ar-tk-top{display:grid;gap:4px;height:var(--cut);align-content:center;padding:0 26px}
.ar-tk-head{font-size:14px;font-weight:600;color:var(--ok)}
.ar-tk-object{font-size:21px;font-weight:650;letter-spacing:-.015em}
.ar-tk-when{font-size:15px;color:var(--ink-2)}
.ar-tk-cut{position:absolute;left:14px;right:14px;top:var(--cut);border-top:1.5px dashed var(--line)}
.ar-tk-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:22px 26px 22px}
.ar-tk-bottom>div{display:grid;gap:4px}
.ar-tk-label{font-size:13.5px;color:var(--ink-3)}
.ar-code{font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;font-size:16px;font-weight:500;letter-spacing:.03em}
/* QR всегда чёрным по белому: светлый на тёмном читают не все камеры. */
.ar-ticket .qr{width:96px;height:96px;padding:4px;color:#151819;background:#FFFFFF;border-radius:6px}

/* ── лист уборки ───────────────────────────────────────────────── */
.ar-task{width:min(340px,100%);padding:20px 22px 18px}
.ar-task header{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.ar-task-title{font-size:13px;font-weight:600;color:var(--ink-3)}
.ar-task header b{font-size:19px;font-weight:650;letter-spacing:-.01em}
/* Срок уборки — главное на листе: чип хохолка, а не серая строка. */
.ar-task-due{justify-self:start;display:inline-flex;align-items:center;height:26px;margin-top:8px;padding:0 10px;border-radius:999px;background:var(--tint-bg);color:var(--tint-ink);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.ar-task ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.ar-check{display:flex;align-items:center;gap:12px;font-size:16px}
.ar-check i{position:relative;width:22px;height:22px;border-radius:7px;border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);flex:none}
.ar-check[data-done="true"]{color:var(--ink-3)}
.ar-check[data-done="true"] span{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-3) 60%,transparent);text-decoration-thickness:1.5px}
.ar-check[data-done="true"] i{background:var(--ok);border-color:var(--ok)}
.ar-check{position:relative}
.ar-check[data-done="true"]::before{content:'';position:absolute;inset:-4px -8px;border-radius:8px;background:color-mix(in srgb,var(--ok) 13%,transparent);transform-origin:left;opacity:0;pointer-events:none}
.ar-check[data-done="true"] i::after{
  content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* ── итог дня ──────────────────────────────────────────────────── */
.ar-summary{width:min(310px,100%);padding:18px 20px 8px}
.ar-summary header{font-size:13.5px;font-weight:600;color:var(--ink-3)}
.ar-summary dl{margin:8px 0 0;display:grid}
.ar-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-2)}
.ar-sum-row:first-child{border-top:0}
.ar-sum-row dt{font-size:14px;color:var(--ink-2)}
.ar-sum-row dd{margin:0;font-size:21px;font-weight:650;letter-spacing:-.02em;white-space:nowrap}

/* ── экраны Tukelo в натуральную величину (site/ui-bits.mjs) ────────
   Показ продукта языком сайта, но не уменьшенным: строки, кнопки и
   подписи такого размера, каким их видит администратор. Цвет — только
   смысл: оплачено — графит, ждёт предоплату — красный контур, уборка —
   штриховка, «сейчас» — красная черта. */
.ui{
  position:relative;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-thing);
  font-size:15.5px;line-height:1.4;text-align:left;
}

.ui-week{padding:22px 26px 26px;width:1180px;max-width:none;background:var(--card)}
.ui-week-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.ui-week-head b{font-size:19px;font-weight:700;letter-spacing:-.015em}
.ui-week-head span{font-size:15px;color:var(--ink-3)}
.ui-week-legend{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.ui-week-legend i{width:10px;height:10px;border-radius:3px;margin-left:10px}
.ui-week-legend i:first-child{margin-left:0}
.ui-week-legend i[data-tone="paid"]{background:#E4EFE8;box-shadow:inset 2px 0 0 #2F6B4F}
.ui-week-legend i[data-tone="hold"]{background:#FBF0DC;box-shadow:inset 2px 0 0 #B8790C}
.ui-week-legend i[data-tone="clean"]{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 4px)}
.ui-week-grid{--name:186px}
.ui-week-days{display:grid;grid-template-columns:var(--name) 1fr;align-items:end}
.ui-days{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr))}
.ui-day{font-size:14.5px;font-weight:700;color:var(--ink);padding:5px 10px;border-radius:9px;width:fit-content}
.ui-day.is-today{background:var(--crest);color:#fff}
.ui-week-hours{display:grid;grid-template-columns:var(--name) 1fr;margin:4px 0 8px}
.ui-ticks{position:relative;height:14px;border-left:1px solid var(--line);font-size:10.5px;color:var(--ink-3)}
.ui-ticks i{position:absolute;top:0;font-style:normal;transform:translateX(-50%)}
.ui-ticks i:first-child{left:50%}
.ui-ticks i:last-child{left:75%}
.ui-week-body{position:relative;display:grid;gap:6px}
.ui-row{display:grid;grid-template-columns:var(--name) 1fr;align-items:center}
.ui-row-name{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:14px}
.ui-row-ic{width:17px;height:17px;flex:none;color:var(--ink-3)}
.ui-row-track{
  position:relative;height:52px;border-radius:10px;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--n,7) / 4 - 1px),var(--line-2) calc(100% / var(--n,7) / 4 - 1px) calc(100% / var(--n,7) / 4)),
    repeating-linear-gradient(90deg,var(--fill) 0 calc(100% / var(--n,7) - 3px),var(--card) calc(100% / var(--n,7) - 3px) calc(100% / var(--n,7)));
}
/* Бронь как в системе: цветная плашка с полосой состояния слева, гость и
   сумма. Часовая — узкая, с одним часом. */
.ui-bk{
  position:absolute;top:4px;bottom:4px;border-radius:8px;display:flex;align-items:center;overflow:hidden;
  font-style:normal;min-width:8px;background:#E4EFE8;color:#17181A;box-shadow:inset 3px 0 0 #2F6B4F,0 0 0 1px #BED4C9;
}
.ui-bk-text{display:grid;padding:0 10px 0 13px;line-height:1.2;white-space:nowrap}
.ui-bk-text b{font-size:13.5px;font-weight:700}
.ui-bk-text em{font-style:normal;font-size:12.5px;color:var(--ink-2)}
.ui-bk-text b+em{margin-top:2px}
.ui-bk:not(:has(b)) .ui-bk-text em{font-size:13.5px;font-weight:700;color:#17181A}
.ui-bk[data-tone="hold"]{background:#FBF0DC;box-shadow:inset 3px 0 0 #B8790C,0 0 0 1px #E6D2A3}
.ui-bk[data-tone="clean"]{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 8px);box-shadow:none;color:transparent}
.ui-week-now{position:absolute;top:-6px;bottom:-6px;left:var(--name);right:0;pointer-events:none}
.ui-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--crest);border-radius:1px}
.ui-now::before{content:'';position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--crest)}
.ui-bk-ring{position:absolute;z-index:2;top:4px;bottom:4px;border-radius:11px;box-shadow:0 0 0 3px rgb(255 255 255 / .55);opacity:0;pointer-events:none}

/* ── неделя первого экрана в двух видах ──────────────────────────────
   (spec сайта §6.1, владелец 21.10: «переходила с линейного вида на
   вертикальный, как у нас в настройках»; «сделай смену более красивой»).
   Утоплена в красное поле: линии и брони белым на просвет, сегодня —
   белой плашкой, «сейчас» — белой чертой; выделенная бронь — единственная
   белая, за ней следит глаз. Оба вида лежат в одной плоскости: дорожки
   ленты и колонки дней, полосы ленты и карточки «По дням»; виден тот, что
   выбран классом is-days. Смена — волна от сегодняшнего дня в обе
   стороны: полоса подаётся к своим карточкам и гаснет, колонки дня
   опускаются из-под дат, карточки прилетают со стороны своих полос
   (--hx, --hy из site/ui-bits.mjs — часть пути, без растяжения: углы и
   слова не искажаются), слова в карточке встают следом, строка за
   строкой; обратно — тем же путём. Летят только сдвиг, масштаб и
   прозрачность, раскладка стоит. */
/* «По дням» крупнее ленты (владелец 21.10: «слишком мелкое», лента —
   «идеально»): в этом виде неделя приближается — --wv-zoom вокруг
   --wv-focus, у верхнего края дорожек. Лента — в своём прежнем размере. */
.wv{--wv-zoom:1;--wv-focus:100% 40px;color:#fff;transform-origin:var(--wv-focus)}
.wv.is-days{transform:scale(var(--wv-zoom))}
.wv-days{margin-bottom:10px}
.wv .ui-day{color:rgb(255 255 255 / .8);font-size:15px;line-height:20px}
.wv .ui-day.is-today{background:#fff;color:var(--crest)}
.wv-plane{position:relative;height:var(--wv-h)}
.wv-plane>i{position:absolute;font-style:normal}
.wv-row{left:0;right:0;height:48px;border-radius:12px;background:
  linear-gradient(90deg,rgb(255 255 255 / .07),rgb(255 255 255 / .07)) 0 0/100% 100%,
  repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--n,7) - 1px),rgb(255 255 255 / .16) calc(100% / var(--n,7) - 1px) calc(100% / var(--n,7)))}
/* Колонка дня «По дням»: та же ткань, что дорожка ленты, только стоя.
   Наверху — шкала занятости дня, как в программе: светлым — занятые часы
   с 8 до 24 по всему комплексу; забитый день читается сплошной чертой. */
.wv-col{top:0;height:100%;border-radius:12px;background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07)}
.wv-col.is-today{background:rgb(255 255 255 / .13)}
.wv-load{position:absolute;left:10px;right:10px;top:6px;height:3px;border-radius:2px;background:rgb(255 255 255 / .16);overflow:hidden}
.wv-load i{position:absolute;top:0;bottom:0;border-radius:2px;background:rgb(255 255 255 / .82)}
.wv-now{top:-6px;width:2px;margin-left:-1px;border-radius:1px;background:#fff}
.wv-now::before{content:'';position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:#fff}
.wv-bar,.wv-card{display:flex;overflow:hidden;border-radius:9px;color:#fff;
  background:rgb(255 255 255 / .24);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 3px 0 0 rgb(255 255 255 / .75)}
.wv-bar{align-items:center;min-width:8px}
.wv-bar[data-tone="hold"],.wv-card[data-tone="hold"]{background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .55)}
.wv-bar[data-tone="clean"],.wv-card[data-tone="clean"]{background:repeating-linear-gradient(135deg,rgb(255 255 255 / .3) 0 2px,transparent 2px 6px);box-shadow:none}
.wv-bar.is-focus,.wv-card.is-focus{z-index:2;background:#fff;color:#17181A;box-shadow:inset 3px 0 0 #2F6B4F,0 0 0 3px rgb(255 255 255 / .3),0 10px 24px rgb(40 12 6 / .3)}
.wv-text{display:grid;padding:0 10px 0 13px;line-height:1.2;white-space:nowrap}
.wv-text b{font-size:13px;font-weight:700}
.wv-text em{font-style:normal;font-size:12px;color:rgb(255 255 255 / .78)}
.wv-text b+em{margin-top:2px}
.wv-bar:not(:has(b)) .wv-text em{font-size:13px;font-weight:700;color:#fff}
/* Карточка «По дням»: время цифрами одной ширины, стрелка тише цифр; ниже
   объект со своим значком; в середине суток внизу — гость и срок. */
.wv-card .wv-text{display:flex;flex-direction:column;gap:2px;min-width:0;height:100%;padding:6px 10px 7px 12px}
.wv-card .wv-text b{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wv-arr{font-style:normal;font-weight:500;opacity:.6}
.wv-card .wv-text em{display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis}
.wv-ic{width:12px;height:12px;flex:none;opacity:.85}
.wv-card .wv-text small{margin-top:auto;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:rgb(255 255 255 / .7)}
.wv-card[data-tone="clean"] .wv-text em{color:#fff}
.is-focus .wv-text em,.is-focus .wv-text small{color:rgb(23 24 26 / .58)}
/* Лента: карточек нет — каждая ждёт чуть в стороне своей полосы. «По
   дням»: полоса ушла к своим карточкам, дорожки погасли. */
.wv-card{opacity:0;transform:translate(var(--hx),var(--hy)) scale(.94)}
.wv-card .wv-text>*{opacity:0;transform:translateY(4px)}
.wv-col{opacity:0;transform:translateY(-10px)}
.wv.is-days .wv-card,.wv.is-days .wv-card .wv-text>*,.wv.is-days .wv-col{opacity:1;transform:none}
.wv.is-days .wv-bar{opacity:0;transform:translate(var(--hx),var(--hy)) scale(.94)}
.wv.is-days .wv-row,.wv.is-days .wv-now{opacity:0}

/* Ход: неделя наполняется бронями волной слева направо, как идёт время
   (--t — начало брони на неделе), строка за строкой; падает черта
   «сейчас». Дальше вид меняется сам (scripts/week-morph.mjs): волна от
   сегодня через 70 мс на день (--r — дней до сегодня, --s — место
   карточки в колонке), всё на одной сильной кривой выхода (motion-design:
   один почерк; входу и уходу — ease-out), целиком около секунды. */
@media (prefers-reduced-motion:no-preference){
  @keyframes wv-fade{from{opacity:0}}
  @keyframes wv-in{from{opacity:0;transform:translateX(-10px)}}
  @keyframes wv-drop{from{opacity:0;transform:scaleY(0)}}
  .wv-days{animation:wv-fade 600ms ease 220ms backwards}
  .wv{transition:transform 900ms var(--ease-in-out) 60ms}
  .wv-bar{--bx:calc(var(--r) * 70ms)}
  .wv-card{--cd:calc(140ms + var(--r) * 70ms + var(--s) * 30ms);--cx:calc(var(--r) * 45ms + var(--s) * 20ms)}
  /* Обратно в ленту: карточки уходят к своим полосам, колонки поднимаются
     под даты, полосы возвращаются со стороны карточек, дорожки — следом. */
  .wv-row{animation:wv-fade 700ms ease calc(240ms + var(--k) * 40ms) backwards;transition:opacity 480ms ease calc(var(--k) * 30ms + 100ms)}
  .wv-bar{animation:wv-in 520ms var(--ease-out) calc(320ms + var(--t) * 520ms + var(--k) * 26ms) backwards;
    transition:transform 620ms var(--ease-out) calc(var(--bx) + 90ms),opacity 360ms ease calc(var(--bx) + 90ms)}
  .wv-now{animation:wv-drop 560ms var(--ease-out) 1040ms backwards;transform-origin:top;transition:opacity 320ms ease 700ms}
  .wv-col{transition:transform 360ms var(--ease-out) calc(var(--r) * 45ms + 120ms),opacity 300ms ease calc(var(--r) * 45ms + 120ms)}
  .wv-card{transition:transform 360ms var(--ease-out) var(--cx),opacity 220ms ease var(--cx)}
  .wv-card .wv-text>*{transition:transform 160ms ease,opacity 140ms ease}
  /* В «По дням»: полоса подаётся к своим карточкам и гаснет; колонки
     опускаются из-под дат; карточки прилетают со стороны полос; слова
     встают вслед за карточкой: время, объект, гость. */
  .wv.is-days .wv-bar{transition:transform 420ms var(--ease-out) var(--bx),opacity 200ms ease var(--bx)}
  .wv.is-days .wv-row{transition:opacity 420ms ease calc(var(--k) * 30ms + 80ms)}
  .wv.is-days .wv-now{transition:opacity 200ms ease}
  .wv.is-days .wv-col{transition:transform 560ms var(--ease-out) calc(60ms + var(--r) * 70ms),opacity 420ms ease calc(60ms + var(--r) * 70ms)}
  .wv.is-days .wv-card{transition:transform 640ms var(--ease-out) var(--cd),opacity 320ms ease var(--cd)}
  .wv.is-days .wv-card .wv-text>*{transition:transform 420ms var(--ease-out) calc(var(--cd) + 150ms),opacity 320ms ease calc(var(--cd) + 150ms)}
  .wv.is-days .wv-card .wv-text>em{transition-delay:calc(var(--cd) + 200ms)}
  .wv.is-days .wv-card .wv-text>small{transition-delay:calc(var(--cd) + 250ms)}
}
/* ── конец недели первого экрана ─────────────────────────────────── */

/* ── карточки первого экрана ──────────────────────────────────────
   Общее: белая поверхность, радиус 22, внутренние блоки — на тон темнее
   (--bg-2), значки тонкой линией, состояния — свои тона, числа плотные. */
.uc-ic{width:16px;height:16px;flex:none}
.ui-pop,.ui-draft,.ui-daycard{border:0;border-radius:22px;font-size:14.5px;line-height:1.35}
:root{--hold-bg:#FBF0DC;--hold-ink:#8A5406;--hold-bar:#D89A2B;--ok-bg:#E4EFE8;--ok-ink:#1E5540;--tint-bg:var(--rose);--tint-ink:var(--crest-2)}
[data-theme="dark"]{--hold-bg:rgb(227 178 94 / .16);--hold-ink:#E9BE73;--hold-bar:#E3B25E;--ok-bg:rgb(143 203 169 / .14);--ok-ink:#9BD3B3;--tint-bg:rgb(232 128 95 / .16);--tint-ink:var(--accent)}

/* Окно брони. */
.ui-pop{width:340px;padding:16px}
.ui-pop::before{content:'';position:absolute;right:24px;top:-7px;width:16px;height:16px;background:var(--card);transform:rotate(45deg);border-radius:3px 0 0 0}
.up-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 11px}
.up-face{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font-size:14px;font-weight:750;letter-spacing:-.01em}
.up-face[data-tone="hold"]{background:var(--hold-bg);color:var(--hold-ink)}
.up-who{display:grid;gap:1px;min-width:0}
.up-who b{font-size:16px;font-weight:750;letter-spacing:-.015em}
.up-who span{font-size:12.5px;color:var(--ink-3)}
.up-state{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;font-size:12px;font-weight:650}
.up-state .uc-ic{width:13px;height:13px}
.up-state[data-tone="hold"]{background:var(--hold-bg);color:var(--hold-ink)}
.up-head{grid-template-rows:auto auto}
.up-head .up-who{grid-column:2;grid-row:1}
.up-what{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;margin-top:14px;padding:11px 12px;border-radius:14px;background:var(--fill)}
.up-tile{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--card);color:var(--crest);box-shadow:0 1px 2px var(--line)}
.up-tile .uc-ic{width:18px;height:18px}
.up-obj,.up-when{display:grid;gap:1px}
.up-obj b,.up-when b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.up-obj span,.up-when span{font-size:12.5px;color:var(--ink-3)}
.up-when{justify-items:end}
.up-due{margin-top:14px}
.up-due-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.up-due-top span{font-size:13px;font-weight:600;color:var(--hold-ink)}
.up-due-top b{font-size:22px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.up-bar{height:6px;margin-top:9px;border-radius:3px;background:var(--fill);overflow:hidden}
.up-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--hold-bar),color-mix(in srgb,var(--hold-bar),var(--crest) 45%))}
.up-due-foot{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--ink-3)}
.up-acts{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:14px}
.up-main{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;background:var(--ink);color:var(--on-ink);font-size:14.5px;font-weight:650}
.up-quiet{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--fill);color:var(--ink-2)}
.up-quiet .uc-ic{width:17px;height:17px}

/* Бланк новой брони. */
.ui-draft{width:360px;padding:16px}
.ud-head{display:flex;align-items:center;gap:8px}
.ud-head b{font-size:16px;font-weight:750;letter-spacing:-.015em}
.ud-badge{height:22px;padding:0 8px;border-radius:999px;background:var(--fill);font-size:11.5px;font-weight:600;color:var(--ink-3);display:inline-flex;align-items:center}
.ud-x{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:var(--ink-3)}
.ud-guest{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.ud-face{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--ok-bg);color:var(--ok-ink);font-size:13px;font-weight:750;flex:none}
.ud-who{display:grid;gap:1px;min-width:0;flex:1}
.ud-who b{font-size:14.5px;font-weight:700}
.ud-who span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ud-tag{height:22px;padding:0 8px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font-size:11.5px;font-weight:650;display:inline-flex;align-items:center;flex:none}
.ud-sect{margin-top:14px}
.ud-lab{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:8px}
.ud-lab .uc-ic{width:14px;height:14px}
.ud-chips{display:flex;flex-wrap:wrap;gap:6px}
.ud-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:10px;background:var(--fill);font-size:13.5px;font-weight:550;color:var(--ink-2)}
.ud-chip.is-on{background:var(--ink);color:var(--on-ink)}
.ud-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ud-slot{display:grid;place-items:center;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:650}
.ud-slot.is-busy{box-shadow:none;background:repeating-linear-gradient(135deg,var(--fill) 0 4px,transparent 4px 8px);color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
.ud-slot.is-on{background:var(--crest);color:#fff;box-shadow:none}
.ud-line{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.ud-line .ud-lab{margin:0}
.ud-step{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:11px;background:var(--fill)}
.ud-step i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--card);color:var(--ink-2);box-shadow:0 1px 2px var(--line)}
.ud-step i .uc-ic{width:14px;height:14px}
.ud-step b{min-width:26px;text-align:center;font-size:14.5px;font-weight:750}
.ud-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.ud-foot div{display:grid;gap:1px}
.ud-foot span{font-size:13px;font-weight:600;color:var(--ink-2)}
.ud-foot em{font-style:normal;font-size:12px;color:var(--ink-3)}
.ud-foot b{font-size:24px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.ud-btn{display:flex;align-items:center;justify-content:center;height:44px;margin-top:12px;border-radius:12px;background:var(--ink);color:var(--on-ink);font-size:14.5px;font-weight:650}

/* Итог дня. */
.ui-daycard{width:300px;padding:16px 16px 14px}
.dc-head{display:flex;align-items:baseline;gap:8px}
.dc-head b{font-size:15px;font-weight:750}
.dc-head span{font-size:12.5px;color:var(--ink-3)}
.dc-live{margin-left:auto;align-self:center;width:8px;height:8px;border-radius:50%;background:#2F6B4F;box-shadow:0 0 0 4px var(--ok-bg)}
.dc-sum{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.dc-sum b{font-size:32px;line-height:1;font-weight:800;letter-spacing:-.04em}
.dc-sum span{font-size:12.5px;color:var(--ok-ink);font-weight:600}
.dc-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:74px;margin-top:14px}
.dc-bar{display:grid;grid-template-rows:1fr auto;gap:5px;height:100%;justify-items:stretch}
.dc-bar i{align-self:end;height:var(--h);min-height:4px;border-radius:5px 5px 3px 3px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-2)}
.dc-bar.is-today i{background:linear-gradient(180deg,color-mix(in srgb,var(--crest),#fff 12%),var(--crest));box-shadow:none}
.dc-bar em{font-style:normal;font-size:10.5px;text-align:center;color:var(--ink-3)}
.dc-bar.is-today em{color:var(--crest);font-weight:700}
.dc-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.dc-stat{display:grid;gap:2px}
.dc-stat b{display:flex;align-items:center;gap:6px;font-size:20px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.dc-stat b .uc-ic{width:15px;height:15px;color:var(--ink-3)}
.dc-stat b[data-tone="ok"] .uc-ic{color:#2F6B4F}
.dc-stat b[data-tone="hold"] .uc-ic{color:var(--hold-ink)}
.dc-stat span{font-size:12px;color:var(--ink-3);white-space:nowrap}


.ui-form{width:min(380px,100%);padding:24px 26px 26px}
.ui-form-head b{font-size:18px;font-weight:700}
.ui-form dl{margin:16px 0 0;display:grid;gap:12px}
.ui-form dl div{display:grid;gap:2px}
.ui-form dt{font-size:13.5px;color:var(--ink-3)}
.ui-form dd{margin:0;font-size:16px;font-weight:500}
.ui-form-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}
.ui-form-total span{font-size:14px;color:var(--ink-3)}
.ui-form-total b{font-size:26px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.ui-form-note{margin-top:10px;font-size:14px;color:var(--wait)}
.ui-form-btn{display:flex;align-items:center;justify-content:center;height:48px;margin-top:16px;border-radius:14px;background:var(--ink);color:var(--on-ink);font-size:15.5px;font-weight:600}

/* Телефон: тонкий корпус с бликом по кромке и вырезом камеры, как у
   настоящего; экран светлее корпуса. */
.ui-phone{position:relative;width:340px;padding:9px;border-radius:50px;background:linear-gradient(160deg,#3A3C41,#141517 40%,#1E1F22);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1),inset 0 0 0 3px #0E0F10,0 40px 70px -34px var(--shadow),0 12px 24px -16px var(--shadow)}
.ui-phone::before{content:'';position:absolute;z-index:2;top:20px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:14px;background:#0B0C0D}
.ui-phone-screen{border-radius:41px;overflow:hidden;background:var(--bg-2);padding:58px 14px 18px}
.ui-phone .ar{width:100%;box-shadow:none}

.ui-channels{width:min(460px,100%);padding:22px 24px}
.ui-channels header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui-channels header b{font-size:18px;font-weight:700}
.ui-ch-sync{width:18px;height:18px;flex:none;color:var(--ink-3)}
.ui-channels ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ui-channels li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 12px 12px 16px;border-radius:14px;background:var(--fill)}
/* Строка со знаком площадки: знак, имя с пояснением, сверка справа. */
.ui-channels li.has-logo{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px}
.ui-ch-logo{display:block;width:32px;height:32px;border-radius:50%;box-shadow:0 1px 2px rgb(23 24 26 / .12)}
.ui-ch-ical{border-radius:9px}
/* Знак без своего круга — на белом кружке, как значок приложения. */
.ui-ch-logo.is-chip{display:grid;place-items:center;padding:6px;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgb(23 24 26 / .08),0 1px 2px rgb(23 24 26 / .1)}
.ui-ch-logo img{display:block;width:100%;height:100%;object-fit:contain}
.ui-ch-logo:has(img){padding:0;overflow:hidden}
.ui-ch-logo svg,.ui-ch-badge svg{display:block;width:100%;height:100%}
.ui-ch-text{display:grid;gap:1px;min-width:0}
.ui-ch-name{font-weight:600}
.ui-ch-sub{font-size:13px;line-height:1.3;color:var(--ink-3)}
/* Отметка в шапке: как связаны с площадками — знак iCal и слово. */
.ui-ch-badge{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 5px;border-radius:999px;background:var(--fill);font-size:13.5px;font-weight:750;letter-spacing:-.005em;color:var(--ink)}
.ui-ch-badge{flex:none}
.ui-ch-badge svg{flex:none;width:20px;height:20px}
.ui-ch-said{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font-size:13px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-ch-foot{margin-top:14px;font-size:14px;color:var(--ink-3)}

/* Неделя с календарями площадок: имя дома слева, дни сверху, полосы —
   свои брони зелёные (как в «Кому подойдёт»), даты площадок — белые
   «Занято» со знаком площадки. Выбранная обведена, под календарём её
   строка с кнопкой. */
.ui-chweek{--name:96px;width:100%;padding:20px 22px 18px}
.ui-chweek header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ui-chweek header b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.ui-chweek .ui-ch-badge{font-weight:650;color:var(--ok-ink);background:var(--ok-bg)}
.cw-days{display:grid;grid-template-columns:var(--name) repeat(7,minmax(0,1fr));margin-bottom:6px}
.cw-days span{display:grid;justify-items:center;gap:1px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.cw-days b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:13px;font-size:14px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
/* Сегодня — число в кружке хохолка, как в календаре телефона; линия
   «сейчас» того же цвета стоит на времени сверки. Это всё красное здесь. */
.cw-days .is-today{color:var(--crest)}
.cw-days .is-today b{background:var(--crest);color:#FFFFFF}
.cw-rows{position:relative}
.cw-now{position:absolute;z-index:2;top:-4px;bottom:-2px;left:calc(var(--name) + (100% - var(--name)) * var(--now));width:2px;margin-left:-1px;border-radius:1px;background:var(--crest);pointer-events:none}
.cw-now::before{content:"";position:absolute;top:-3px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--crest);box-shadow:0 0 0 2px var(--card)}
.cw-row{display:grid;grid-template-columns:var(--name) minmax(0,1fr);align-items:center}
.cw-row+.cw-row{margin-top:8px}
.cw-name{font-size:13.5px;font-weight:650;line-height:1.2;color:var(--ink-2);padding-right:10px}
.cw-track{position:relative;height:44px;border-radius:12px;background:var(--fill);
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:calc(100% / 7) 100%}
.cw-bk{container-type:inline-size;position:absolute;top:5px;bottom:5px;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;padding:0 8px;border-radius:9px;font-style:normal}
.cw-bk b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-bk.is-own{background:#E4EFE8;box-shadow:inset 3px 0 0 #2F6B4F,0 0 0 1px #BED4C9}
.cw-bk.is-own b{color:#17181A;padding-left:2px}
.cw-bk.is-ch{padding-left:4px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 2px 6px -3px var(--shadow)}
.cw-bk.is-ch b{color:var(--ink-2);font-weight:650}
.cw-bk.is-picked{box-shadow:0 0 0 2px var(--ink),0 6px 14px -8px var(--shadow)}
.cw-logo{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgb(23 24 26 / .08)}
.cw-logo svg,.cw-logo img{display:block;width:72%;height:72%;object-fit:contain}
.cw-logo:has(img){overflow:hidden}
.cw-logo:has(img) img{width:100%;height:100%}
.cw-logo:has(svg [fill="#7F5FFF"]) svg{width:100%;height:100%}
.cw-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:8px 8px 8px 14px;border-radius:14px;background:var(--fill);font-size:14px;font-weight:600}
.cw-btn{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:13.5px;font-weight:650}
.cw-note{margin-top:10px;font-size:13px;color:var(--ink-3)}
/* Короткая полоса площадки — только знак: слово «Занято» не режется. */
@container (max-width:84px){.cw-bk.is-ch b{display:none}.cw-bk.is-ch .cw-logo{margin-inline:auto}}
@media (max-width:767px){
  /* Телефон: имя дома над дорожкой — дорожке вся ширина; в полосах
     площадок остаётся знак, слово «Занято» — в строке под календарём. */
  .ui-chweek{padding:16px 14px 14px}
  .cw-days{grid-template-columns:repeat(7,minmax(0,1fr))}
  /* Имя дома встаёт над дорожкой — линия «сейчас» прошла бы по словам;
     на телефоне сегодняшний день отмечает кружок. */
  .cw-now{display:none}
  .cw-days>span:first-child{display:none}
  .cw-row{grid-template-columns:minmax(0,1fr);row-gap:5px}
  .cw-row+.cw-row{margin-top:10px}
  .cw-name{padding:0 0 0 2px;font-size:13px}
  .cw-track{height:40px}
  .cw-bk.is-ch{justify-content:center;padding:0 4px}
  .cw-bk.is-ch b{display:none}
  .cw-bk{padding:0 5px}
  .cw-bk b{font-size:11.5px}
  .cw-bk.is-own b{padding-left:1px}
  .cw-pick{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .cw-btn{justify-content:center;height:40px}
  .ui-chweek header{flex-wrap:wrap}
}
[data-theme="dark"] .cw-bk.is-own{background:rgb(98 205 145 / .3);box-shadow:inset 3px 0 0 #6FD39C,inset 0 0 0 1px rgb(111 211 156 / .28)}
[data-theme="dark"] .cw-bk.is-own b{color:#EAF7EF}
[data-theme="dark"] .cw-bk.is-picked{box-shadow:0 0 0 2px var(--ink)}

/* Картотека гостя: одна мысль — гость и его баллы. Стопка карточек
   краями, отметка загрузки из таблицы — в свободном углу плитки. Светлая
   сторона — гость, в неё вставлена тёмная карта баллов (двойная кромка:
   радиус карты = радиус карточки минус поле). Текста мало и он крупный:
   остальное говорит фраза плитки (владелец 3.10: «слишком много элементов
   и текста»). У накопления нет своего цвета (SPEC §8.5): карта — графит
   с тёплым отсветом хохолка; оплаченное — зелёным, как в журнале. */
.gc{position:static}
.gc-deck{position:relative;padding-top:20px}
/* Позади — ещё две карточки картотеки: видны верхние края, каждая тоном
   глубже предыдущей, без обводки — стопка, а не линии. */
.gc-ghost{position:absolute;left:calc(var(--g) * 18px);right:calc(var(--g) * 18px);top:calc((2 - var(--g)) * 10px);height:48px;border-radius:26px;
  background:color-mix(in srgb,var(--card) 82%,var(--fill));box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 0 0 1px var(--line-2),0 -6px 16px -10px var(--shadow)}
.gc-ghost[style*="--g:2"]{background:color-mix(in srgb,var(--card) 50%,var(--fill))}
.ui-gcard{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;padding:7px;border:0;border-radius:27px}
.ft-tile .ui-gcard{box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),0 0 0 1px var(--line-2),0 2px 4px -2px rgb(23 24 26 / .06),0 28px 52px -30px var(--shadow)}
.gc-main{display:grid;align-content:start;gap:16px;padding:14px 16px 14px 14px}
.gc-head{display:flex;align-items:center;gap:13px}
.gc-face{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(150deg,var(--rose),color-mix(in srgb,var(--rose),var(--crest) 24%));color:var(--tint-ink);font-size:15.5px;font-weight:750;letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 0 0 1px rgb(23 24 26 / .04)}
.gc-head div{display:grid;gap:3px;min-width:0}
.gc-head b{font-size:18px;line-height:1.2;font-weight:750;letter-spacing:-.022em;white-space:nowrap}
.gc-bday{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-3);white-space:nowrap}
.gc-bday svg{width:16px;height:16px;margin-top:-2px;color:var(--crest)}
.gc-tags{display:flex;flex-wrap:wrap;gap:6px}
.gc-tags i{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:var(--fill);font-style:normal;font-size:13px;font-weight:600;color:var(--ink-2)}
/* Что считается само: число крупно, подпись под ним; разделяет воздух. */
.gc-stats{display:flex;gap:30px;margin:0;padding-left:2px}
.gc-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.gc-stats dt{font-size:13px;font-weight:600;color:var(--ink-3)}
.gc-stats dd{margin:0;font-size:24px;line-height:1.1;font-weight:750;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.gc-stats dd.is-ok{color:var(--ok-ink)}
/* Карта лояльности, которую заведение выдаёт гостю (владелец 4.10: «это
   карта лояльности, и она должна быть красивая»). Пластик ID-1 (85,6 × 54 мм):
   тёмный графит прежнего тона (владелец 4.10: «когда карточка была чёрной,
   было лучше», «ну не полностью чёрной»), с гильошем,
   как у настоящих карт: тонкие кольца из правого верхнего угла гаснут
   к середине, текст лежит на чистом поле; светлая кромка по верху и тёплый
   отсвет хохолка из нижнего угла. Сверху знак и имя заведения, посередине баланс, внизу —
   тонкая гравированная шкала ставки. Ползунка нет: это вещь, а не
   настройка. Имени держателя нет: оно уже на карточке гостя рядом, а слов
   в сцене не больше четырнадцати (владелец 3.10). Под указателем карта выпрямляется и по ней проходит блик. */
.gc-pass{--pass-on:#F4F2EF;--pass-2:rgb(244 242 239 / .62);--pass-3:rgb(244 242 239 / .4);
  --pass-lines:rgb(255 255 255 / .07);--pass-body:linear-gradient(160deg,#3A3C41,#26272B 70%);--pass-hi:rgb(255 255 255 / .12);--pass-glow:24%;--pass-ring:#26272B;
  position:relative;isolation:isolate;align-self:center;justify-self:end;width:100%;max-width:340px;aspect-ratio:85.6 / 54;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:16px 18px 15px;border-radius:17px;overflow:hidden;color:var(--pass-on);
  rotate:-2deg;transition:rotate .55s cubic-bezier(.23,1,.32,1),translate .55s cubic-bezier(.23,1,.32,1);
  background:
    radial-gradient(85% 80% at 106% 116%,color-mix(in srgb,var(--crest) var(--pass-glow),transparent),transparent 68%),
    radial-gradient(70% 60% at 0% 0%,var(--pass-hi),transparent 68%),
    var(--pass-body);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),inset 0 -1px 0 rgb(0 0 0 / .35),inset 0 0 0 1px rgb(255 255 255 / .07),
    0 2px 4px -2px rgb(23 24 26 / .35),0 10px 18px -10px rgb(23 24 26 / .45),0 30px 44px -26px rgb(23 24 26 / .6)}
/* Гильош: одна сетка колец из угла, маской гаснет к середине карты. */
.gc-pass::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 104% -6%,var(--pass-lines) 0 .9px,transparent 1.3px 5.5px);
  -webkit-mask-image:radial-gradient(85% 120% at 100% 0%,#000 8%,transparent 78%);mask-image:radial-gradient(85% 120% at 100% 0%,#000 8%,transparent 78%)}
/* Блик: узкая светлая полоса, пробегает один раз под указателем. */
.gc-pass::after{content:"";position:absolute;inset:-20% -40%;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,transparent 42%,rgb(255 255 255 / .13) 49%,rgb(255 255 255 / .05) 53%,transparent 60%);
  transform:translateX(-62%);opacity:0;transition:transform 0s .5s,opacity .3s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ft-guests:hover .gc-pass{rotate:0deg;translate:0 -4px}
  .ft-guests:hover .gc-pass::after{opacity:1;transform:translateX(62%);transition:transform 1.1s cubic-bezier(.23,1,.32,1),opacity .2s}
}
.gc-issuer{display:flex;align-items:center;gap:10px;margin:0}
.gc-mark{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--crest),#fff 16%),var(--crest-2));font-style:normal;font-size:14px;font-weight:800;color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 1px 2px rgb(0 0 0 / .35)}
.gc-issuer span{font-size:14.5px;font-weight:700;letter-spacing:-.012em;white-space:nowrap}
.gc-earn{margin-left:auto;padding:4px 9px;border-radius:999px;background:rgb(255 255 255 / .09);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08);
  font-style:normal;font-size:12.5px;font-weight:700;color:var(--pass-on);white-space:nowrap;font-variant-numeric:tabular-nums}
.gc-bal{display:flex;align-items:baseline;gap:8px;align-self:center;margin:0}
.gc-bal>b{font-size:clamp(40px,3.5vw,50px);line-height:1;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgb(0 0 0 / .35)}
.gc-bal>span{font-size:15px;font-weight:650;color:var(--pass-2)}
/* Низ: шкала ставки гравировкой во всю ширину — от нынешней к следующей. */
.gc-ladder{display:flex;align-items:center;gap:10px;margin:0}
.gc-ladder>i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--pass-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.gc-ladder>i.is-now{color:var(--pass-on)}
.gc-track{position:relative;flex:1;height:10px}
.gc-track::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:radial-gradient(circle,rgb(255 255 255 / .3) .8px,transparent 1px) 0 50% / 5px 2px repeat-x}
.gc-run{position:absolute;left:0;right:0;top:4px;height:2px;border-radius:1px;overflow:hidden}
.gc-run i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgb(255 255 255 / .45),color-mix(in srgb,var(--crest),#fff 42%));transform:translateX(calc(var(--p) - 100%))}
.gc-knob{position:absolute;inset:0;transform:translateX(var(--p))}
.gc-knob::before{content:"";position:absolute;top:50%;left:-3.5px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:color-mix(in srgb,var(--crest),#fff 42%);box-shadow:0 0 0 2px var(--pass-ring)}
[data-theme="dark"] .gc-ghost{box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 0 0 1px var(--line-2),0 -6px 16px -10px rgb(0 0 0 / .6)}
[data-theme="dark"] .ft-tile .ui-gcard{box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 0 0 1px var(--line-2),0 28px 52px -30px var(--shadow)}
/* Тёмная тема: тот тон, что владелец назвал чёрным (снимок 4.10), кромка ярче — карта отделяется от поля. */
[data-theme="dark"] .gc-pass{--pass-lines:rgb(255 255 255 / .06);--pass-body:linear-gradient(160deg,#2A2C31,#1C1D20 70%);--pass-hi:rgb(255 255 255 / .08);--pass-glow:20%;--pass-ring:#1C1D20;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),inset 0 -1px 0 rgb(0 0 0 / .4),inset 0 0 0 1px rgb(255 255 255 / .09),0 18px 34px -18px rgb(0 0 0 / .8)}
@media (max-width:767px){
  /* Телефон: карта баллов под гостем. */
  .ft-guests .ft-scene{order:2}
  .gc-ghost{left:calc(var(--g) * 12px);right:calc(var(--g) * 12px)}
  .ui-gcard{grid-template-columns:minmax(0,1fr);gap:8px}
  .gc-main{padding:12px 12px 8px}
  .gc-pass{rotate:-1.5deg;margin:4px 2px 2px}
}
@media (max-width:380px){
  .gc-stats{gap:22px}
  .gc-stats dd{font-size:21px}
  .gc-bal>b{font-size:40px}
}

.ui-guest{display:flex;gap:14px;align-items:center;padding:16px 20px;width:min(380px,100%)}
.ui-guest-face{display:grid;place-items:center;width:48px;height:48px;border-radius:27%;background:#3E4761;color:#fff;font-weight:700;font-size:16px;flex:none}
.ui-guest b{display:block;font-size:16.5px}
.ui-guest span{font-size:14px;color:var(--ink-3)}
.ui-guest p{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.ui-guest i{white-space:nowrap;font-style:normal;font-size:13px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--t-pine);color:var(--ok)}

/* Страница гостя: строка адреса заведения, что и когда, свободное время.
   Выбранное — чернилами, как в бланке брони. */
.ui-gp{width:min(360px,100%);overflow:hidden;padding:0}
.ui-gp-bar{display:flex;align-items:center;justify-content:center;gap:7px;height:46px;padding:0 16px;background:var(--fill);border-bottom:1px solid var(--line-2);font-size:14px;font-weight:500;color:var(--ink-2)}
.ui-gp-bar .ic{width:14px;height:14px;color:var(--ok)}
.ui-gp-body{display:grid;gap:4px;padding:22px 24px 24px}
.ui-gp-body>b{font-size:19px;font-weight:700;letter-spacing:-.01em}
.ui-gp-day{font-size:14.5px;color:var(--ink-3)}
.ui-gp-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}
.ui-slot{position:relative;display:grid;place-items:center;height:44px;border-radius:12px;border:1px solid var(--line-2);background:var(--card);box-shadow:0 1px 2px rgb(23 24 26 / .05);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums}
/* Круг от касания выбранного времени (плитка «Гости бронируют сами»). */
.ui-slot.is-picked::after{content:'';position:absolute;inset:-3px;border-radius:14px;border:2px solid var(--crest);opacity:0;pointer-events:none}
.ui-slot.is-picked{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.ui-gp-btn{display:flex;align-items:center;justify-content:center;height:50px;margin-top:16px;border-radius:14px;background:var(--crest);color:#fff;font-size:16px;font-weight:650;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 10px 20px -12px color-mix(in srgb,var(--crest) 70%,transparent)}

/* Лист оплаты и лист заказа (плитки «Гость платит онлайн» и «Гость
   докупает на сайте») — компактные листы телефона (владелец 10.10:
   «карточка онлайн-оплаты слишком большая»): встают от нижнего края
   плитки, скругление только сверху, ручка, тень вверх. Строки списком с
   тонкими линиями, одна главная кнопка графитом. Это итог истории; завязку
   ставит взведённая сцена (sections.css). Шкала шрифта листа — четыре
   ступени: подпись 12,5, текст 14, выделение 15,5, сумма 26; скругления
   внутри листа — 12 (кнопки, миниатюры, значки), 8 у знака заведения. */
.py-stage,.sh-stage{position:relative;display:grid}
.py-sheet,.sh-sheet{display:grid;align-content:start;min-height:304px;padding:7px 20px 22px;border-bottom:0;border-radius:24px 24px 0 0;font-size:14.5px;
  box-shadow:0 -1px 0 var(--line-2),0 -26px 50px -32px var(--shadow),0 -6px 18px -12px var(--shadow)}
.py-grab{justify-self:center;width:34px;height:5px;margin-bottom:12px;border-radius:3px;background:var(--line-2)}
.py-merchant{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.py-merchant b{font-size:14px;font-weight:700}
.py-merchant em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--ink-3)}
.py-mark{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;font-style:normal;font-size:12.5px;font-weight:800;color:#FFFFFF;
  background:linear-gradient(150deg,color-mix(in srgb,var(--crest),#fff 16%),var(--crest-2));box-shadow:inset 0 1px 0 rgb(255 255 255 / .28)}
.py-item{display:flex;align-items:center;gap:12px;margin:0;padding:11px 0}
.py-thumb{flex:none;width:46px;height:46px;padding:3px;border-radius:12px;background:var(--fill);object-fit:contain}
.py-item>span{display:grid;min-width:0;line-height:1.3}
.py-item b{font-size:15.5px;font-weight:700}
.py-item em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.py-sum{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px;padding-top:11px;border-top:1px solid var(--line)}
.py-sum span{font-size:14px;color:var(--ink-2)}
.py-sum b{font-size:26px;line-height:1;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* Кнопка в несколько состояний: подписи в одной ячейке, видна одна;
   заливка итога под ними, касание пальца сверху. */
.py-btn{position:relative;isolation:isolate;display:grid;place-items:center;height:46px;border-radius:12px;overflow:hidden;background:var(--ink);color:var(--on-ink);font-size:15.5px;font-weight:650}
.py-fill{position:absolute;inset:0;z-index:-1;background:var(--ok)}
.py-label{display:grid;place-items:center}
.py-label>span{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.py-label>.is-a,.py-label>.is-b{opacity:0}
.py-label .ic{width:17px;height:17px}
.py-tick{flex:none;width:17px;height:17px}
.py-spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.85}
.py-tap{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgb(255 255 255 / .4);box-shadow:0 0 0 1px rgb(255 255 255 / .3);opacity:0;pointer-events:none}
[data-theme="dark"] .py-tap{background:rgb(23 24 26 / .22);box-shadow:0 0 0 1px rgb(23 24 26 / .2)}
.py-alt{justify-self:center;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink-2);opacity:.5}
.py-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.py-note .ic{width:12px;height:12px;color:var(--ok)}
/* Уведомление над листом — письмо гостю, как уведомление на телефоне:
   значок почты, тема письма и от кого. Наезжает на верх листа. */
.py-toast{position:absolute;z-index:3;top:-30px;left:-56px;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% + 40px);margin:0;padding:9px 16px 9px 9px;border-radius:18px;background:var(--card);
  box-shadow:0 0 0 1px var(--line),0 20px 38px -20px var(--shadow),0 5px 14px -8px var(--shadow)}
.py-toast-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--ink);color:var(--on-ink);font-style:normal}
.py-toast-ic .ic{width:17px;height:17px}
.py-toast>span{display:grid;line-height:1.25}
.py-toast b{font-size:14px;font-weight:700}
.py-toast em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
/* Касса: в уведомлении — знак «Честного ЗНАКа» своей плашкой (брендбук: знак допускается отдельно). */
.tl-toast-ic{display:block;flex:none;width:32px;height:32px;border-radius:8px}
/* Лист заказа: шапка со счётчиком, строки со значком, итог барабанами. */
.sh-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sh-head b{font-size:15.5px;font-weight:750;letter-spacing:-.01em}
.sh-count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--crest);color:#FFFFFF;font-size:12.5px;font-weight:800}
.sh-lines{display:grid;margin:0;padding:0;list-style:none}
.sh-line{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.sh-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--crest) 11%,var(--card));color:var(--crest);font-style:normal}
.sh-ic .ic{width:19px;height:19px}
/* Строка брони на листе кассы: предмет объекта в той же клетке, что значок товара. */
.sh-thumb{display:block;width:38px;height:38px;padding:2px;border-radius:12px;background:var(--fill);object-fit:contain}
.sh-line>span{display:grid;min-width:0;line-height:1.3}
.sh-line b{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-line em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.sh-line strong{font-size:14px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.sh-total{display:flex;align-items:baseline;justify-content:space-between;margin:11px 0 3px}
.sh-total>span{font-size:14px;color:var(--ink-2)}
.rl{display:block;font-size:26px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rl-num{display:flex;align-items:baseline}
.rl-dg{display:block;height:1em;overflow:visible clip}
.rl-strip{display:block;margin-top:-.15em;transform:translateY(var(--end))}
.rl-strip>span{display:block;height:1.3em;line-height:1.3}
.rl-gap{width:.16em}
.rl-rub{margin-left:.14em;font-size:.74em;font-weight:650;letter-spacing:0}
.sh-to{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:12.5px;color:var(--ink-3)}
.sh-to .ic{flex:none;width:13px;height:13px;color:var(--crest)}


/* Поиск гостя по номеру (плитка «Бронь, пока гость на линии»; владелец
   10.10: «особенно карточку переделай»). Поле с номером и справа — что
   делает система: ищет, думает, нашла. Ячейка гостя и строка цены видны
   сразу пустыми заготовками; в них проявляются найденный гость и цена,
   которая доезжает барабанами. Внизу «Записать бронь». Телефонии в
   продукте нет: звонит предмет рядом, не карточка. При «уменьшить
   движение» — сразу итог (scripts/play.mjs ставит классы). */
.ui-lookup{--skel:color-mix(in srgb,var(--ink) 9%,transparent);width:380px;padding:16px;border:0;border-radius:22px}
.ul-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:6px}
/* Поле в фокусе, как в продукте: обводка и мягкий ореол хохолка, а не
   чёрная рамка. */
.ul-field{display:flex;align-items:center;height:50px;padding:0 13px 0 15px;border-radius:14px;background:var(--card);
  box-shadow:inset 0 0 0 1.5px var(--crest),0 0 0 4px color-mix(in srgb,var(--crest) 14%,transparent)}
.ul-num{font-size:17px;font-weight:650;letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ul-caret{width:2px;height:20px;margin-left:2px;border-radius:1px;background:var(--crest)}
/* Что делает система: в покое — нашла (зелёная галочка). */
.ul-state{display:grid;flex:none;width:24px;height:24px;margin-left:auto}
.ul-state>*{grid-area:1/1;display:grid;place-items:center}
.ul-find{color:var(--ink-3);opacity:0}
.ul-find svg{width:19px;height:19px}
.ul-spin{width:17px;height:17px;margin:auto;border-radius:50%;border:2px solid var(--crest);border-right-color:transparent;opacity:0}
.ul-ok{border-radius:50%;background:var(--ok);color:#fff;box-shadow:0 3px 8px -3px color-mix(in srgb,var(--ok) 70%,transparent)}
.ul-ok svg{width:14px;height:14px}
.ul-hit{position:relative;display:flex;align-items:center;gap:11px;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--fill)}
.ul-face{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--tint-bg);color:var(--tint-ink);font-size:13.5px;font-weight:750;flex:none}
/* Круг узнавания: расходится от букв гостя, когда его нашли. */
.ul-face::after{content:'';position:absolute;inset:-3px;border-radius:14px;border:2px solid var(--ok);opacity:0;pointer-events:none}
.ul-who{display:grid;gap:1px;flex:1;min-width:0}
.ul-who b{font-size:14.5px;font-weight:700}
.ul-who span{font-size:12.5px;color:var(--ink-3)}
.ul-tag{height:24px;padding:0 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font-size:11.5px;font-weight:650;display:inline-flex;align-items:center;flex:none}
.ul-price{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.ul-price div{display:grid;gap:1px}
.ul-price>div>span{font-size:13px;font-weight:600;color:var(--ink-2)}
.ul-price em{font-style:normal;font-size:12px;color:var(--ink-3)}
.ul-price .rl{font-size:26px}
.ui-lookup .py-btn{margin-top:14px}
/* Заготовки: ячейка гостя и строка цены, пока их не заполнили. В покое
   не видны. */
.ul-hit::before,.ul-hit::after,.ul-price::before,.ul-price::after{content:'';position:absolute;border-radius:6px;background:var(--skel);opacity:0;pointer-events:none}
.ul-hit::before{left:12px;top:10px;width:38px;height:38px;border-radius:12px}
.ul-hit::after{left:61px;top:15px;width:42%;height:11px;box-shadow:0 18px 0 -1px var(--skel)}
.ul-price::before{left:0;top:15px;width:44%;height:11px;box-shadow:0 18px 0 -2px var(--skel)}
.ul-price::after{right:0;bottom:1px;width:28%;height:24px;border-radius:8px}
@media (prefers-reduced-motion:no-preference){
  /* Завязка — только у взведённой сцены. */
  [data-play].is-armed:not(.is-in) .ul-num{clip-path:inset(0 100% 0 0)}
  [data-play].is-armed:not(.is-in) :is(.ul-hit>*,.ul-price>*,.ul-ok){opacity:0}
  [data-play].is-armed:not(.is-in) .ul-find,[data-play].is-armed:not(.is-in) :is(.ul-hit,.ul-price)::before,[data-play].is-armed:not(.is-in) :is(.ul-hit,.ul-price)::after{opacity:1}
  /* Ход: номер набирается по цифре; лупа уступает колесу, колесо —
     галочке «нашли»; заготовка гостя гаснет, буквы гостя вспыхивают с
     кругом, имя встаёт, «Постоянная» щёлкает; потом гаснет заготовка
     цены, строка встаёт, сумма доезжает барабанами; палец жмёт «Записать
     бронь» — зелёный разливается, «Бронь записана». */
  @keyframes ul-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes ul-out{from{opacity:1}to{opacity:0}}
  @keyframes ul-spin-life{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
  @keyframes ul-turn{to{rotate:360deg}}
  @keyframes ul-pop{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:none}}
  @keyframes ul-ring{0%{opacity:.75;transform:scale(.92)}100%{opacity:0;transform:scale(1.5)}}
  @keyframes ul-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes ul-roll{from{transform:translateY(0)}}
  [data-play].is-in .ul-num{animation:ul-type 1100ms steps(16,end) 900ms both}
  [data-play].is-in .ul-find{animation:ul-out 160ms ease-out var(--typed,2000ms) both}
  [data-play].is-in .ul-spin{animation:ul-spin-life 450ms linear var(--typed,2000ms) both,ul-turn 450ms linear var(--typed,2000ms)}
  [data-play].is-in .ul-ok{animation:ul-pop 460ms cubic-bezier(.34,1.56,.64,1) var(--found,2450ms) both}
  [data-play].is-in .ul-hit::before,[data-play].is-in .ul-hit::after{animation:ul-out 240ms ease-out var(--found,2450ms) both}
  [data-play].is-in .ul-face{animation:ul-pop 560ms cubic-bezier(.34,1.36,.64,1) calc(var(--found,2450ms) + 60ms) both}
  [data-play].is-in .ul-face::after{animation:ul-ring 780ms var(--ease-out) calc(var(--found,2450ms) + 260ms)}
  [data-play].is-in .ul-who{animation:ul-rise 440ms var(--ease-out) calc(var(--found,2450ms) + 130ms) both}
  [data-play].is-in .ul-tag{animation:ul-pop 480ms cubic-bezier(.34,1.36,.64,1) calc(var(--found,2450ms) + 330ms) both}
  [data-play].is-in .ul-price::before,[data-play].is-in .ul-price::after{animation:ul-out 240ms ease-out var(--priced,2950ms) both}
  [data-play].is-in .ul-price>div{animation:ul-rise 440ms var(--ease-out) var(--priced,2950ms) both}
  [data-play].is-in .ul-price>.rl{animation:ul-rise 440ms var(--ease-out) calc(var(--priced,2950ms) + 60ms) both}
  [data-play].is-in .ul-price .rl-strip{animation:ul-roll 1050ms cubic-bezier(.16,1,.3,1) calc(var(--priced,2950ms) + 140ms + var(--i,0) * 70ms) backwards}
  [data-play] .ul-caret{animation:ul-blink 1s steps(2,start) infinite}
  [data-play].is-off .ul-caret{animation-play-state:paused}
  @keyframes ul-blink{to{opacity:0}}
}

/* Сертификат: полоса хохолка с видом и тем, что он даёт; остаток частями,
   срок, QR и код. */
.ui-cert{width:min(340px,100%);overflow:hidden;padding:0;border:0;border-radius:22px}
.uc-band{display:grid;gap:2px;padding:18px 20px 16px;background:var(--crest-field);color:#fff}
.uc-band span{font-size:12.5px;font-weight:650;color:rgb(255 255 255 / .82)}
.uc-band b{font-size:20px;font-weight:750;letter-spacing:-.02em}
.uc-band em{font-style:normal;font-size:13.5px;color:rgb(255 255 255 / .86)}
.uc-body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 6px}
.uc-left{display:grid;gap:2px}
.uc-left>span{font-size:12.5px;color:var(--ink-3)}
.uc-left b{display:flex;align-items:baseline;gap:10px;font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.uc-left b>:first-child{white-space:nowrap}
.uc-spent{font-style:normal;font-size:13px;font-weight:700;letter-spacing:0;color:var(--crest);opacity:0}
.uc-left em{font-style:normal;font-size:13px;color:var(--ink-2)}
.ui-cert .qr{width:84px;height:84px;padding:4px;color:#151819;background:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2)}
/* Обёртка кода: по ней на плитке «Что умеет» проходит линия сканера —
   тонкая черта цвета хохолка с мягким краем, не отблеск. */
.uc-qr{position:relative;display:block;flex:none;line-height:0;--scan-to:80px}
.uc-qr::after{content:'';position:absolute;left:2px;right:2px;top:2px;height:2px;border-radius:2px;background:var(--crest);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--crest) 25%,transparent),0 3px 8px color-mix(in srgb,var(--crest) 45%,transparent);opacity:0;pointer-events:none}
.uc-code{padding:4px 20px 16px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13.5px;letter-spacing:.04em;color:var(--ink-2)}

/* Картотека гостя: лицо, визиты, уровень и баллы, метки, последние брони. */
.ui-profile{width:min(380px,100%);padding:16px;border:0;border-radius:22px}
.gp-head{display:flex;align-items:center;gap:12px}
.gp-face{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tint-bg);color:var(--tint-ink);font-size:15px;font-weight:750;flex:none}
.gp-who{display:grid;gap:1px}
.gp-who b{font-size:16.5px;font-weight:750;letter-spacing:-.01em}
.gp-who span{font-size:12.5px;color:var(--ink-3)}
.gp-tier{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--fill)}
.gp-level{font-size:13px;font-weight:600;color:var(--ink-2)}
.gp-tier b{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}
.gp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gp-tags i{display:inline-flex;align-items:center;height:24px;padding:0 10px;font-style:normal;font-size:12px;font-weight:650;border-radius:999px;background:var(--fill);color:var(--ink-2)}
.gp-tags i:first-child{background:var(--ok-bg);color:var(--ok-ink)}
/* Последние брони: строки без линий под каждой, раздел — один отступ и
   одна черта сверху (taste: не линовать каждую строку). */
.gp-list{display:grid;gap:2px;margin-top:14px;padding-top:8px;border-top:1px solid var(--line-2)}
.gp-row{display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:8px;padding:6px 0;font-size:13.5px}
.gp-row span{color:var(--ink-3);font-size:12.5px}
.gp-row b{font-weight:600}
.gp-row em{font-style:normal;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Перелистываемое значение (ui-bits.mjs, flip): было и стало в одной
   клетке; в покое видно «стало», движение — в styles/sections.css. */
.flip{display:inline-grid;overflow:hidden;vertical-align:bottom}
.flip>span{grid-area:1/1}
.flip>span:first-child{opacity:0;transform:translateY(-100%)}

/* Телефон: в строке канала имя, под ним чип сверки — в узкой карточке
   рядом они не помещаются. */
@media (max-width:767px){
  .ui-channels li{flex-direction:column;align-items:flex-start;gap:8px}
  /* Телефон: плашке сверки рядом с именем тесно — знак слева на две
     строки, имя, под ним сверка зелёной строкой. */
  .ui-channels li.has-logo{grid-template-columns:32px minmax(0,1fr);column-gap:12px;row-gap:1px;padding:10px 12px}
  .ui-channels li.has-logo .ui-ch-logo{grid-row:1/3;align-self:center}
  .ui-channels li.has-logo .ui-ch-said{grid-column:2;justify-self:start;height:auto;padding:0;background:none;font-size:12.5px}
}

/* Окно «Сообщения» (ui-bits.mjs, chatsWindow; плитка сообщений, spec сайта
   §6.3) — окно мессенджера, которое все знают: слева ящик, справа открытый
   разговор. Ящик на белом листе; выбранная строка — той же бумаги, что
   разговор (вставной лист, как в продукте). Знак человека — тоном, на его
   углу знак службы в своих цветах на белой подложке. Шапка разговора: знак
   человека, имя, под ним знак Max и имя службы, справа «Решено». Лента на
   бумаге: «Сегодня», гость — белым листом с тенью, наши — чернилами (в
   тёмной теме — серым на ступень светлее). Внизу поле «Ответ гостю»:
   «Из системы» и стрелка отправки. */
.ui-inbox{
  --opened:1150ms;--asked:1400ms;--drafted:2000ms;--answered:2650ms;--typing:3050ms;--taken:3600ms;--booked:4200ms;--resolved:4650ms;
  display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);width:min(640px,100%);min-height:446px;padding:0;overflow:hidden;border:0;border-radius:22px;
  background:var(--card);font-size:13px;line-height:1.35}
.ix-side{display:grid;grid-template-rows:auto 1fr auto;min-width:0;border-right:1px solid var(--line-2)}
.ix-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:16px 16px 10px}
.ix-head>b{font-size:16px;font-weight:750;letter-spacing:-.015em}
.ix-count{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.ix-count b{margin-left:3px;font-weight:800;color:var(--crest);font-variant-numeric:tabular-nums}
.ix-list{display:grid;align-content:start;gap:2px;margin:0;padding:0 8px 10px;list-style:none}
/* Строка ящика — кнопка: наведение светлит бумагу, нажатие чуть сжимает,
   выбранная — бумагой разговора. */
.ix-list li{position:relative}
.ix-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;width:100%;padding:10px 10px;border:0;border-radius:15px;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 120ms var(--ease-out)}
.ix-row::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--fill);opacity:0;transition:opacity 160ms ease}
.ix-row.is-on::before{opacity:1}
.ix-row>*{position:relative}
.ix-row:active{transform:scale(.985)}
.ix-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.ix-row:not(.is-on):hover::before{opacity:.55}}
.ix-list li+li::after{content:'';position:absolute;top:-1px;left:61px;right:10px;height:1px;background:var(--line-2);pointer-events:none}
.ix-list li:has(.is-on)::after,.ix-list li:has(.is-on)+li::after{opacity:0}
.ix-hint{display:flex;align-items:center;gap:6px;margin:0;padding:8px 18px 14px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.ix-hint svg{width:15px;height:15px;flex:none}
.ix-face{position:relative;flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--rose);color:var(--ink-2);font-size:13px;font-weight:750;letter-spacing:.01em}
.ix-face[data-tone="2"]{background:var(--pine)}
.ix-face[data-tone="3"]{background:var(--sky)}
.ix-face[data-tone="4"]{background:var(--sand)}
.ix-badge{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:20px;height:20px;padding:3px;border-radius:7px;background:#FFFFFF;
  box-shadow:0 0 0 1.5px var(--card),0 2px 5px -1px rgb(23 24 26 / .22)}
.ix-badge svg{display:block;width:100%;height:100%}
.ix-row.is-on .ix-badge{box-shadow:0 0 0 1.5px var(--fill),0 2px 5px -1px rgb(23 24 26 / .22)}
.ix-main{display:grid;gap:3px;min-width:0}
.ix-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.ix-top b{min-width:0;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-top time{flex:none;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ix-sub{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.ix-prev{min-width:0;font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-prev .flip{display:grid;max-width:100%}
.ix-prev .flip>span{overflow:hidden;text-overflow:ellipsis}
.ix-tail{flex:none;font-style:normal;font-size:11px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.ix-tail.is-wait{color:var(--crest)}
.ix-tail .flip>span:last-child{color:var(--ink-3)}
.ix-talk{display:grid;min-width:0;background:var(--fill)}
.ix-thread{display:grid;grid-template-rows:auto 1fr;min-width:0}
.ix-thread[hidden]{display:none}
.ix-talk-head{display:flex;align-items:center;gap:10px;padding:12px 14px 11px;background:color-mix(in srgb,var(--card) 55%,var(--fill));border-bottom:1px solid var(--line-2)}
.ix-face.is-sm{width:34px;height:34px;font-size:11.5px}
.ix-face.is-sm .ix-badge{display:none}
.ix-who{display:grid;flex:1;min-width:0;gap:1px}
.ix-who b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-via{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.ix-via-mark{display:block;width:13px;height:13px}
.ix-via-mark svg{display:block;width:100%;height:100%}
.ix-done{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 8px;border-radius:15px;font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;
  background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 2px 6px -3px var(--shadow)}
.ix-done i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff}
.ix-done:not(.is-on) i,[data-theme="dark"] .ix-done:not(.is-on) i{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 22%,transparent);color:transparent}
[data-theme="dark"] .ix-done i{color:#17181A}
.ix-done svg{width:11px;height:11px}
.ix-feed{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px 14px 12px;min-width:0}
.ix-day{align-self:center;margin:0 0 4px;font-size:11px;font-weight:650;color:var(--ink-3)}
.ix-msg{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 10px;max-width:90%;margin:0;padding:8px 12px 7px;border-radius:17px;font-size:13px;line-height:1.42}
.ix-msg.is-guest{align-self:flex-start;border-bottom-left-radius:6px;background:var(--card);box-shadow:0 1px 0 var(--line-2),0 8px 16px -12px var(--shadow);transform-origin:0 100%}
.ix-msg.is-ours{align-self:flex-end;border-bottom-right-radius:6px;background:#1E2023;color:#F1F2F3;transform-origin:100% 100%}
[data-theme="dark"] .ix-msg.is-ours{background:#55585E}
.ix-msg time{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:10.5px;opacity:.62;font-variant-numeric:tabular-nums}
.ix-ticks{display:inline-grid}
.ix-ticks svg{width:13px;height:13px}
/* Гость печатает и его ответ — в одной клетке: точки сменяются словами без
   сдвига ленты. */
.ix-slot{display:grid;justify-items:start}
.ix-slot>*{grid-area:1/1}
.ix-typing{display:flex;gap:4px;align-self:end;margin:0;padding:11px 13px;border-radius:17px;border-bottom-left-radius:6px;background:var(--card);
  box-shadow:0 1px 0 var(--line-2),0 8px 16px -12px var(--shadow);opacity:0}
.ix-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.ix-booked{align-self:center;display:inline-flex;align-items:center;gap:7px;margin:2px 0 0;font-size:12px;font-weight:650;color:var(--ok)}
.ix-booked i{display:inline-grid;flex:none}
.ix-booked svg{width:15px;height:15px}
.ix-compose{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px 12px}
.ix-field{flex:1;min-width:0;display:grid;align-items:center;height:36px;padding:0 13px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2)}
.ix-field em{grid-area:1/1;font-style:normal;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-field .ix-draft{color:var(--ink);opacity:0}
.ix-field .ix-draft.is-on{opacity:1}
.ix-field:has(.ix-draft.is-on) em:first-child{opacity:0}
/* Готовый текст в поле — целиком, в две строки; «Из системы» — знаком. */
.ix-field:has(.ix-draft.is-on){height:auto;min-height:36px;padding:8px 13px}
.ix-field .ix-draft.is-on{white-space:normal;line-height:1.35}
.ix-compose:has(.ix-draft.is-on) .ix-sys span{display:none}
.ix-compose:has(.ix-draft.is-on) .ix-sys{padding:0 6px}
/* Объявление Авито над разговором и откуда текст в поле ответа. */
.ix-topic{display:flex;align-items:center;gap:10px;align-self:stretch;margin:0 0 4px;padding:7px 10px 7px 7px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 6px 14px -12px var(--shadow)}
.ix-topic img{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--sand)}
.ix-topic span{display:grid;gap:1px;min-width:0}
.ix-topic em{font-style:normal;font-size:10.5px;font-weight:650;color:var(--ink-3)}
.ix-topic b{font-size:13px;font-weight:700}
.ix-from{display:flex;align-items:center;gap:6px;margin:0;padding:0 16px;font-size:11px;font-weight:650;color:var(--ink-3)}
.ix-from svg{width:13px;height:13px}
.ix-sys{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 10px;border-radius:18px;font-size:12px;font-weight:650;color:var(--ink-2);white-space:nowrap}
.ix-sys svg{width:16px;height:16px}
.ix-send{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--on-ink)}
.ix-send svg{width:16px;height:16px}

/* Телефон: ящик сжат в ряд знаков людей над разговором; выбранный — в
   кружке той же бумаги, что разговор. «Из системы» — одним знаком. */
@media (max-width:767px){
  .ui-inbox{grid-template-columns:minmax(0,1fr);min-height:0}
  .ix-side{border-right:0;border-bottom:1px solid var(--line-2)}
  .ix-head{padding:14px 14px 8px}
  .ix-list{display:flex;gap:4px;padding:0 10px 4px}
  .ix-hint{padding:4px 14px 10px}
  .ix-list li+li::after{display:none}
  .ix-row{grid-template-columns:auto;padding:5px;border-radius:50%}
  .ix-main{display:none}
  .ix-feed{padding:12px 12px 10px}
  .ix-msg{max-width:92%}
  .ix-sys span{display:none}
  .ix-sys{padding:0 6px}
}

@media (prefers-reduced-motion:no-preference){
  /* Завязка — только у взведённой сцены. */
  [data-play].is-armed:not(.is-in) :is(.ix-row,[data-thread="0"] :is(.ix-talk-head,.ix-day,.ix-msg,.ix-booked)){opacity:0}
  [data-play].is-armed:not(.is-in) .ix-row.is-on::before{opacity:0}
  [data-play].is-armed:not(.is-in) [data-thread="0"] .ix-done i{opacity:0;transform:scale(.6)}
  /* Ход (motion-design: главное — разговор; второе — люди и поле ответа;
     фон — точки «печатает»). Люди приходят сверху по одному, старые
     первыми; верхний разговор открывается; гость спрашивает про субботу;
     в поле «Ответ гостю» встаёт свободное время из системы, стрелка
     щёлкает, ответ уходит чернилами, поле пустеет; гость печатает и берёт
     время; в ленте строка брони, у строки ящика предпросмотр — бронь;
     «Решено» ставит галочку, «ждёт» перелистывается в «решено», ждущих
     одним меньше. */
  @keyframes ix-arrive{from{opacity:0;transform:translateY(-10px) scale(.98)}}
  @keyframes ix-fade{from{opacity:0}}
  @keyframes ix-rise{from{opacity:0;transform:translateY(8px)}}
  @keyframes ix-bubble{from{opacity:0;transform:translateY(10px) scale(.94)}}
  @keyframes ix-pop{0%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
  @keyframes ix-draft{0%{opacity:0;transform:translateY(4px)}14%,86%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes ix-hush{0%,100%{opacity:1}12%,88%{opacity:0}}
  @keyframes ix-tap{0%,100%{transform:none}45%{transform:scale(.86)}}
  @keyframes ix-type-life{0%{opacity:0;transform:translateY(6px)}18%,82%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes ix-hop{0%,60%,100%{transform:none}30%{transform:translateY(-3px)}}
  [data-play].is-in .ix-row{animation:ix-arrive 460ms var(--ease-out) calc(260ms + (3 - var(--n)) * 140ms) backwards}
  [data-play].is-in .ix-row.is-on::before{animation:ix-fade 320ms ease-out var(--opened) backwards}
  [data-play].is-in [data-thread="0"] .ix-talk-head{animation:ix-rise 420ms var(--ease-out) calc(var(--opened) + 60ms) backwards}
  [data-play].is-in [data-thread="0"] .ix-day{animation:ix-fade 360ms ease-out calc(var(--opened) + 140ms) backwards}
  [data-play].is-in .ix-msg[style="--n:0"]{animation:ix-bubble 460ms var(--ease-out) var(--asked) backwards}
  [data-play].is-in [data-thread="0"] .ix-draft{animation:ix-draft calc(var(--answered) - var(--drafted)) linear var(--drafted) both}
  [data-play].is-in [data-thread="0"] .ix-field em:first-child{animation:ix-hush calc(var(--answered) - var(--drafted)) linear var(--drafted) both}
  [data-play].is-in [data-thread="0"] .ix-send{animation:ix-tap 240ms var(--ease-in-out) calc(var(--answered) - 200ms)}
  [data-play].is-in .ix-msg[style="--n:1"]{animation:ix-bubble 460ms var(--ease-out) var(--answered) backwards}
  [data-play].is-in .ix-typing{animation:ix-type-life calc(var(--taken) - var(--typing)) linear var(--typing) both}
  [data-play].is-in .ix-typing i{animation:ix-hop 600ms var(--ease-in-out) var(--typing) 1}
  [data-play].is-in .ix-typing i:nth-child(2){animation-delay:calc(var(--typing) + 110ms)}
  [data-play].is-in .ix-typing i:nth-child(3){animation-delay:calc(var(--typing) + 220ms)}
  [data-play].is-in .ix-msg[style="--n:2"]{animation:ix-bubble 460ms var(--ease-out) var(--taken) backwards}
  [data-play].is-in .ix-booked{animation:ix-pop 520ms cubic-bezier(.34,1.36,.64,1) var(--booked) backwards}
  [data-play].is-in [data-thread="0"] .ix-done i{animation:ix-pop 480ms cubic-bezier(.34,1.56,.64,1) var(--resolved) both}
  /* Открыли другой разговор — он мягко встаёт; история первого сразу в
     итоге (.is-touched ставит scripts/chats.mjs): она не доигрывает за
     кадром. Подсказка «Нажмите на разговор» дважды кивает, когда история
     кончилась. */
  @keyframes ix-thread-in{from{opacity:0;transform:translateY(6px)}}
  @keyframes ix-tap-hint{0%,100%{transform:none}30%{transform:translate(1px,1px) scale(.86)}}
  .ix-thread.is-enter{animation:ix-thread-in 240ms var(--ease-out)}
  [data-play].is-touched :is(.ix-row,.ix-row *,.ix-count *,[data-thread="0"] *){animation:none !important}
  [data-play].is-touched .ix-row::before{animation:none !important}
  [data-play].is-in:not(.is-touched) .ix-hint svg{animation:ix-tap-hint 520ms var(--ease-in-out) calc(var(--resolved) + 700ms) 2}
  .ix-prev{--flip-at:calc(var(--booked) + 120ms)}
  .ix-tail{--flip-at:calc(var(--resolved) + 120ms)}
  .ix-count{--flip-at:calc(var(--resolved) + 280ms)}
}