/* ═══════════════════════════════════════════════════════════════════
   NEXO — НОВОЕ клиентское приложение (тариф Business).
   Классическое (client.css) живёт рядом и НЕ ТРОГАЕТСЯ: пока у бизнеса
   не включена новая версия, клиенты видят ровно то же, что видели.
   Собрано из обкатанной лаборатории lab/: фоны-меши, движение,
   главный экран, каталог.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   ФОНЫ-МЕШИ. Общий файл для всех экранов лабы.

   Снято с референса (правый телефон, «Create widgets…»):
     • меш занимает ВЕСЬ экран, до самых краёв, включая зону статус-бара;
     • в центре — почти белое раскалённое ядро, а не просто светлое пятно;
     • цвет набирает силу к краям, по самому периметру уходит темнее;
     • ни одной различимой границы: пятна огромные и сильно размыты;
     • на самом краю — тонкий более яркий ободок.

   Как это сделано: слои radial-gradient рисуются на элементе, который
   вылезает за экран на 25%, и уже потом всё это размывается. Размытие
   БЕЗ выхода за края даёт светлую кайму по периметру — самая частая
   ошибка, из-за которой меш выглядит как наклейка, а не как фон.
   Поверх — слабое зерно: без него на больших плавных переходах
   вылезают ступеньки (бандинг), особенно на дешёвых экранах.
   ═══════════════════════════════════════════════════════════════════════ */

/* Меш задаётся ПЕРЕМЕННОЙ, а не отдельным правилом на каждую тему.
   Причина не в красоте: правила вида [data-wall=x] .wall::before у всех тем
   одинаковой специфичности, и во вложенном контейнере (образец на экране
   настройки) побеждает не ближайший предок, а тот, что ниже по файлу —
   все образцы окрашивались в одну тему. Переменные наследуются от
   БЛИЖАЙШЕГО предка, поэтому вложенность работает сама собой. */
.wall{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:var(--wall-bg,transparent);
  transition:opacity .32s cubic-bezier(.2,.9,.25,1)}
/* Пока оформление бизнеса неизвестно (приложение открыли ссылкой, и адрес
   салона лежит внутри подписи Telegram), показывать чужой цвет нельзя: это
   первый кадр витрины, и он должен быть либо своим, либо никаким. Гасим фон
   до ответа сервера и проявляем его вместе с настоящей темой.

   Класс снимает client_new.js сразу после bootstrap; на случай, если ответ
   не придёт вовсе, страховка — фон проявится сам через полторы секунды. */
html.boot .wall{opacity:0;animation:wall-rescue 0s linear 1.5s forwards}
@keyframes wall-rescue{to{opacity:1}}
.wall::before{
  content:'';position:absolute;inset:var(--mesh-inset,-25%);
  background:var(--mesh,none);
  filter:var(--mesh-filter,blur(56px) saturate(1.18));
}
/* Тёмный ободок по периметру. Без него меш читается ровной заливкой,
   как только его центр закрыт карточками. */
.wall > i{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 88% at 50% 42%,transparent 44%,rgb(0 0 0 / .30) 100%)}
/* Зерно поверх меша — лекарство от ступенек на плавных переходах. */
.wall::after{
  content:'';position:absolute;inset:0;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 1. Лайм — как на фото: белое ядро, лаймовые края, тёплый низ ──── */
[data-wall="lime"]{
  --mesh:
    radial-gradient(30% 20% at 52% 22%, #ffffff, transparent 70%),
    radial-gradient(44% 30% at 48% 30%, #f2ffc4, transparent 74%),
    radial-gradient(52% 40% at 12% 12%, #c8e83c, transparent 74%),
    radial-gradient(50% 38% at 92% 16%, #e9f04a, transparent 72%),
    radial-gradient(58% 42% at 54% 96%, #a9d21c, transparent 76%),
    radial-gradient(70% 56% at 50% 116%, #6d8f10, transparent 78%),
    linear-gradient(168deg,#d6e93f,#b8d626 62%,#8fb515);
  --h:268;--cta:82 62% 11%;--cta2:82 55% 20%;--cta-ink:#f4ffd9;--ink:#0d1206;--soft:#5c6b3e;--glass:255 255 255;--fade:#dbe86a}

/* ── 2. Аква — циан с зелёным верхом и синим низом ─────────────────── */
[data-wall="aqua"]{
  --mesh:
    radial-gradient(28% 19% at 48% 22%, #ffffff, transparent 70%),
    radial-gradient(44% 30% at 42% 30%, #ccfff4, transparent 74%),
    radial-gradient(54% 40% at 88% 14%, #63e8c8, transparent 74%),
    radial-gradient(50% 38% at 8% 24%,  #4fd6ea, transparent 72%),
    radial-gradient(60% 44% at 56% 98%, #2e9de0, transparent 76%),
    radial-gradient(72% 58% at 50% 118%,#1b5fae, transparent 78%),
    linear-gradient(168deg,#7fe3e0,#4fc4dd 60%,#2f8fc9);
  --h:14;--cta:196 70% 12%;--cta2:196 60% 21%;--cta-ink:#e6fbff;--ink:#04161c;--soft:#41707e;--glass:255 255 255;--fade:#a6e6ee}

/* ── 3. Рассвет — розово-сиреневый с персиковым низом ──────────────── */
[data-wall="blush"]{
  --mesh:
    radial-gradient(28% 19% at 54% 22%, #ffffff, transparent 70%),
    radial-gradient(44% 30% at 46% 30%, #ffecf5, transparent 74%),
    radial-gradient(52% 40% at 10% 14%, #d9a8ff, transparent 74%),
    radial-gradient(50% 38% at 92% 18%, #ffb3c8, transparent 72%),
    radial-gradient(58% 42% at 50% 96%, #ff9d86, transparent 76%),
    radial-gradient(72% 56% at 50% 118%,#c85f77, transparent 78%),
    linear-gradient(168deg,#f7c6dd,#eeaac6 60%,#d98a9e);
  --h:196;--cta:336 52% 14%;--cta2:336 44% 24%;--cta-ink:#fff0f6;--ink:#1c0812;--soft:#8a5c72;--glass:255 255 255;--fade:#f6cadd}

/* ── 4. Уголь — тёплый тёмный, как карточка Moon ───────────────────── */
[data-wall="ember"]{
  --mesh:
    radial-gradient(28% 19% at 50% 22%, #ffe6c8, transparent 70%),
    radial-gradient(44% 30% at 46% 30%, #e8955a, transparent 74%),
    radial-gradient(52% 40% at 88% 16%, #b4532a, transparent 74%),
    radial-gradient(50% 38% at 10% 20%, #8c3a22, transparent 72%),
    radial-gradient(60% 44% at 52% 98%, #4a1c12, transparent 78%),
    linear-gradient(168deg,#6d2c1a,#43180f 62%,#250d08);
  --h:188;--cta:34 92% 92%;--cta2:28 72% 78%;--cta-ink:#2a1006;--ink:#fff6ef;--soft:#c9a48f;--glass:22 12 8;--fade:#3a1e12}

/* ── 5. Ирис — сиренево-синий, самый «ночной» из светлых ───────────── */
[data-wall="iris"]{
  --mesh:
    radial-gradient(28% 19% at 50% 22%, #ffffff, transparent 70%),
    radial-gradient(44% 30% at 44% 30%, #eae3ff, transparent 74%),
    radial-gradient(52% 40% at 88% 14%, #9d7bff, transparent 74%),
    radial-gradient(50% 38% at 8% 20%,  #6f8cff, transparent 72%),
    radial-gradient(58% 42% at 54% 96%, #7a52e0, transparent 76%),
    radial-gradient(72% 56% at 50% 118%,#3d2a99, transparent 78%),
    linear-gradient(168deg,#cfc4fb,#a891f2 60%,#7b63d8);
  --h:42;--cta:258 60% 15%;--cta2:258 52% 26%;--cta-ink:#f0ecff;--ink:#0a0620;--soft:#5b5486;--glass:255 255 255;--fade:#c9c0f5}

/* ── 6. Своё фото владельца ────────────────────────────────────────── */
[data-wall="photo"]{
  --mesh-inset:0; --mesh-filter:none; --wall-bg:#0d0d12;
  /* Пока фото не загружено, показываем мрамор-заглушку, а не пустоту. */
  --mesh:url(/static/wallpapers/marble.jpg) center/cover;
  --h:268;--cta:0 0% 96%;--cta2:0 0% 82%;--cta-ink:#0d0d12;--ink:#ffffff;--soft:#cfcdd8;--glass:14 14 20;--fade:#101018}
[data-wall="photo"] .wall::after{opacity:1;mix-blend-mode:normal;
  background:linear-gradient(rgb(6 6 12 / .42),rgb(6 6 12 / .62))}

/* ═══════════════════════════════════════════════════════════════════════
   ОБЛОЖКА 16:9 — первое, что видит клиент. Общая для обоих мини-аппов.

   Приём снят с rondesignlab: карточка с фото парит над УВЕЛИЧЕННОЙ
   размытой копией самой себя. Копия вылезает за габариты и даёт цветной
   ореол — именно от него появляется глубина, которой не даёт ни тень,
   ни рамка. Поверх фото — растяжка снизу, иначе название бизнеса тонет
   на светлом кадре.
   ═══════════════════════════════════════════════════════════════════════ */

.cover{position:relative;margin:0 0 14px;isolation:isolate}
.cover .frame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;
  box-shadow:0 22px 50px -22px rgb(0 0 0 / .55),
             inset 0 0 0 1px rgb(255 255 255 / .16)}
.cover .frame img{width:100%;height:100%;object-fit:cover;display:block}
/* Ореол: та же картинка, крупнее, размыта и уведена под карточку. */
.cover .halo{position:absolute;inset:6% -4% -14%;z-index:-1;border-radius:28px;
  filter:blur(34px) saturate(1.35);opacity:.85;transform:scale(1.02)}
.cover .halo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:28px}
/* Растяжка под подпись — снизу, чтобы не глушить сам кадр. */
.cover .frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 42%,rgb(0 0 0 / .58))}
.cover .on-cover{position:absolute;left:16px;right:16px;bottom:13px;z-index:2;
  color:#fff;text-align:left}
.cover .on-cover h1{font-size:26px;font-weight:700;letter-spacing:-.035em;
  line-height:1.05;text-shadow:0 2px 18px rgb(0 0 0 / .45)}
.cover .on-cover p{margin-top:4px;font-size:12.5px;opacity:.86;
  display:flex;align-items:center;gap:6px}
/* Стеклянная пилюля в углу кадра — статус или категория. */
.cover .chip{position:absolute;top:12px;left:12px;z-index:2;
  padding:6px 11px;border-radius:99px;font-size:11.5px;font-weight:500;
  color:#fff;background:rgb(0 0 0 / .34);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22)}
.cover .edit{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;
  border:none;border-radius:50%;cursor:pointer;font-size:14px;color:#fff;
  background:rgb(0 0 0 / .34);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22)}

/* Пустое состояние: владелец ещё не загрузил обложку. */
.cover.empty .frame{background:rgb(var(--glass) / .30);backdrop-filter:blur(16px);
  border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);
  box-shadow:none;display:grid;place-items:center;text-align:center;color:var(--ink)}
.cover.empty .frame::after{display:none}
.cover.empty .halo{display:none}
.cover.empty .plus{width:40px;height:40px;border-radius:50%;margin:0 auto 8px;
  display:grid;place-items:center;font-size:20px;
  background:rgb(var(--glass) / .5)}
.cover.empty b{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em}
.cover.empty span{display:block;font-size:12px;opacity:.6;margin-top:2px}

/* ═══════════════════════════════════════════════════════════════════════
   ДВИЖЕНИЕ. Общий файл для обоих экранов лабы.

   Рамка: клиентское мобильное приложение. Значит — полировка, а не
   аттракцион. Каждая анимация обязана отвечать на вопрос «зачем»:
   обратная связь, ориентация или преемственность. Украшательства нет.

   Правила, которые тут соблюдены:
     • появление = прозрачность + сдвиг 10px + размытие 5px→0. Размытие
       даёт эффект «материализации»: элемент наводится на резкость, а не
       просто проявляется. Одной прозрачностью так не получается;
     • никаких bare ease/ease-in-out — только свои кривые;
     • нажатие быстрое (120мс), отпускание медленное (340мс). Наоборот —
       и кнопка ощущается ватной;
     • fill-mode backwards обязателен для задержек, иначе элемент моргнёт
       на полной непрозрачности до старта своей анимации;
     • ничего не пульсирует и не дышит в цикле;
     • анимируем только transform/opacity/filter — никаких width/top.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Кривая снята с сайтов Apple: у них она одна на всё — и на наведение,
     и на появление, и на шторки. Отсюда ощущение единой системы, а не
     набора отдельных эффектов. */
  --in:  cubic-bezier(.4, 0, .6, 1);
  /* Отклик на палец оставляем чуть живее: это единственное место, где
     нужна физика, а не плавность. */
  --tap: cubic-bezier(.2,.9,.25,1);
}

/* Вход по системе Apple: почти только прозрачность, сдвиг 8px, никакого
   размытия и масштаба. Размытие на входе — тяжёлый приём, из-за него
   экран «мешал»: каждый элемент требовал внимания вместо того, чтобы
   спокойно проступить. */
@keyframes rise{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:none}
}
@keyframes riseDock{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}
@keyframes pop{
  from{opacity:0;transform:scale(.6)}
  to  {opacity:1;transform:none}
}
@keyframes bump{
  50%{transform:translateY(-2px) scale(1.04)}
}

/* ── Появление экрана: обложка, затем карточки лесенкой ─────────────── */
.cover,.tag{animation:rise .4s var(--in) backwards}
.card,.tile{animation:rise .32s var(--in) backwards}

/* Лесенка 45мс. Больше — экран собирается заметно долго, меньше —
   пропадает сам эффект последовательности. */
.page .card:nth-child(1),.mosaic .tile:nth-child(1){animation-delay:0.08s}
.page .card:nth-child(2),.mosaic .tile:nth-child(2){animation-delay:0.14s}
.page .card:nth-child(3),.mosaic .tile:nth-child(3){animation-delay:0.20s}
.page .card:nth-child(4),.mosaic .tile:nth-child(4){animation-delay:0.26s}
.page .card:nth-child(5),.mosaic .tile:nth-child(5){animation-delay:0.32s}
.page .card:nth-child(6),.mosaic .tile:nth-child(6){animation-delay:0.38s}
.mosaic .tile:nth-child(7){animation-delay:0.44s}
.mosaic .tile:nth-child(8){animation-delay:0.50s}

/* Вступление играет ОДИН раз. Владелец перебирает окошки в настройках
   десятки раз подряд — переигрывать лесенку на каждый тап значит мешать
   ему работать. Частое действие не анимируют. */
/* :not(.leaving) обязателен — иначе это правило перебивает по весу уход
   карточки в свой экран, и переход становится мгновенным. */
.pages[data-intro="done"] .card:not(.leaving){animation:none}

/* Док приходит последним и без размытия: он служебный, ему незачем
   привлекать внимание раньше содержимого. */
.dock{animation:riseDock .46s var(--in) .30s backwards}
.ruler{animation:rise .46s var(--in) .26s backwards}

/* ── Отклик на нажатие ──────────────────────────────────────────────── */
.card,.tile,.rnd,.sq,.pill,.tb,.cover .edit{
  transition:transform .34s var(--tap),box-shadow .34s var(--tap)}
.card:active,.tile:active,.rnd:active,.sq:active,.pill:active,
.tb:active,.cover .edit:active{transition-duration:.12s}

/* ── Выбор позиции в каталоге ───────────────────────────────────────── */
.tile.on .badge{animation:pop .34s var(--in)}
/* Пилюля дёргается, когда сумма изменилась: это ОБРАТНАЯ СВЯЗЬ на
   действие, а не привлечение внимания. Класс снимается по окончании. */
.pill.bump{animation:bump .34s var(--in)}

/* ── Уход карточки в свой экран ─────────────────────────────────────── */
/* Карточка не просто исчезает — она уезжает вперёд, «в» открываемый
   экран. Так переход читается как продолжение, а не как новая страница. */
@keyframes zoomOut{
  to{opacity:0;transform:scale(1.06);filter:blur(6px)}
}
.card.leaving{animation:zoomOut .26s var(--in) forwards}
.leaving-screen{animation:zoomOut .26s var(--in) forwards}

/* ── Уважение к настройке «меньше движения» ─────────────────────────── */
/* Не опция и не «потом»: крупные сдвиги и размытия вызывают у части
   людей настоящее укачивание. Оставляем только проявление. */
@media (prefers-reduced-motion: reduce){
  .cover,.tag,.card,.tile,.dock,.ruler{
    animation:none;opacity:1;transform:none;filter:none}
  .tile.on .badge,.pill.bump,.card.leaving,.leaving-screen{animation:none}
  .card,.tile,.rnd,.sq,.pill,.tb,.cover .edit{transition-duration:.01s}
  html{scroll-behavior:auto}
}


/* ═══════════════════════════════════════════════════════════════════════
   ПЕСОЧНИЦА. Боевой клиентский мини-апп (static/client.*) НЕ ТРОГАЕМ.

   Замеры сняты с референса (экран «Watch»):
     • поле — чистое белое, БЕЗ точек. Точечная сетка есть только внутри цифр;
     • сетка 2 колонки, зазор 8, скругление 20 — не «капля», а спокойный угол;
     • два ряда квадратов + ряд низких карточек (0.55 высоты квадрата);
     • цифра — по центру карточки, заголовок в углу, подпись мельче и тише;
     • у каждой карточки свой «прибор»: волна, кольцо, эквалайзер, россыпь
       точек с перекрестием, шкала с треугольным бегунком, ряд точек;
     • внизу — ручка свайпа с точками страниц, затем круг · пилюля · круг.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Шрифт как в референсе — системный Apple (SF Pro Display/Text). */
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',
       system-ui,'Helvetica Neue',sans-serif;
  /* --h, --ink, --cta* приходят из wall.css: цвет задаёт выбранный фон */
  --ink-soft:var(--soft);
  --r:20px;
  --gap:8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sf);background:var(--fade);color:var(--ink);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
}

.app{position:relative;z-index:1;max-width:460px;margin:0 auto;
  padding:16px 14px calc(112px + env(safe-area-inset-bottom))}

/* ── Шапка: одно крупное слово, как «Watch» ───────────────────────── */
.mast{display:flex;align-items:center;gap:12px;padding:12px 4px 16px}
.mast h1{font-size:32px;line-height:1.05;font-weight:700;letter-spacing:-.04em}
.mast .status{margin-top:5px;font-size:13px;color:var(--ink-soft);
  letter-spacing:-.01em;display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:#2fbf5f}
.mast .chev{margin-left:auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);opacity:.55;font-size:15px}

/* ── Свайп-страницы карточек ──────────────────────────────────────── */
.pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pages::-webkit-scrollbar{display:none}
.page{flex:0 0 100%;scroll-snap-align:center;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}

/* ── Карточка ─────────────────────────────────────────────────────── */
.card{
  --c:var(--h);
  position:relative;overflow:hidden;border-radius:var(--r);
  padding:13px 14px;color:#fff;isolation:isolate;
  display:flex;flex-direction:column;aspect-ratio:1/1.04;
  border:none;text-align:left;font:inherit;-webkit-tap-highlight-color:transparent;
  transition:transform .34s cubic-bezier(.2,.9,.25,1);
}
.card:active{transform:scale(.975)}
.card.low{aspect-ratio:1/.56}

/* Меш: светящееся ядро + два тона + мягко затемнённый низ. В референсе
   углы НЕ чёрные — цвет остаётся насыщенным до самого края. */
.card::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(56% 42% at 50% 48%,  hsl(var(--c1) 98% 62% / .95), transparent 74%),
    radial-gradient(74% 58% at 14% 8%,   hsl(var(--c2) 96% 56% / .88), transparent 70%),
    radial-gradient(78% 60% at 92% 16%,  hsl(var(--c3) 94% 52% / .82), transparent 68%),
    radial-gradient(120% 92% at 52% 112%,hsl(var(--c4) 90% 26%), transparent 78%),
    linear-gradient(158deg,hsl(var(--c) 88% 46%),hsl(var(--c4) 86% 28%));
}
/* Скрим только под заголовком: белый текст обязан читаться на любом
   акценте, но душить цвет виньеткой по всей карточке нельзя. */
.card::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgb(0 0 0 / .26),rgb(0 0 0 / .04) 30%,transparent 42%);
}

.card .ttl{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.card .sub{font-size:12px;font-weight:400;opacity:.6;margin-top:0;letter-spacing:-.01em}

/* Цифра — по центру карточки, перфорирована точечной сеткой. Точки почти
   смыкаются: разреженные красивы только на макете, в руках нечитаемы. */
.card .big{margin:auto 0 0;padding:6px 0 2px;text-align:center;
  font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:radial-gradient(circle,#fff 0 60%,transparent 66%);
  background-size:3.6px 3.6px;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 10px rgb(0 0 0 / .34));
}
.card .big small{font-size:14px;font-weight:500;margin-left:2px;letter-spacing:-.01em;
  -webkit-text-fill-color:rgb(255 255 255 / .8);color:rgb(255 255 255 / .8)}
.card .foot{margin-top:auto;display:flex;justify-content:space-between;
  align-items:flex-end;gap:8px;font-size:10.5px;opacity:.72;letter-spacing:-.005em;
  min-width:0}
/* Подпись плитки — одна строка. Текст «О нас» пишет владелец, и его длину
   нельзя предсказать: без обрезки он вылезал за карточку и наезжал на
   соседнюю, из-за чего весь экран выглядел сломанным. Стрелка при этом
   остаётся на месте — она не сжимается. */
.card .foot > :first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.card .foot > :last-child{flex:none}
.low .big{font-size:26px;margin:auto 0;padding:0}
.low .foot{font-size:10px}

/* ── «Приборы»: абстрактная графика, как в референсе ───────────────── */
.viz{position:relative;height:26px;margin:2px 0 4px;flex:none}

/* волна с треугольным бегунком (карточка Balance). Синусоиду честно рисует
   SVG: CSS-градиентами получается пунктир, а не линия. */
.viz.wave svg{width:100%;height:100%;display:block;overflow:visible}
.viz.wave path{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;
  stroke-dasharray:2.5 3;opacity:.85}
.viz.wave::after{content:'';position:absolute;right:12%;top:2px;
  border:5px solid transparent;border-top-color:#ffe14d}

/* эквалайзер с одной яркой линией (карточка Enhance) */
.viz.bars::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgb(255 255 255 / .85) 0 1px,transparent 1px 6px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 64%,rgb(0 0 0 / .2) 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 64%,rgb(0 0 0 / .2) 82%,transparent)}
.viz.bars::after{content:'';position:absolute;left:52%;top:-4px;bottom:-4px;width:2px;
  background:#ffe14d;border-radius:2px}

/* кольцо с дугой (карточка Sleep). В референсе цифра стоит ВНУТРИ кольца,
   поэтому это фон карточки, а не элемент в потоке. */
.ring-bg{position:absolute;left:50%;top:54%;width:96px;height:96px;z-index:-1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgb(255 255 255 / .40)}
.ring-bg::after{content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1.5px solid transparent;border-top-color:rgb(255 255 255 / .8);
  transform:rotate(-32deg)}

/* россыпь точек с перекрестием (карточка Skin Damage) */
.viz.scatter{height:34px;margin-top:8px}
.viz.scatter::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,#fff 0 2px,transparent 2.5px),
    radial-gradient(circle at 36% 66%,#fff 0 3px,transparent 3.5px),
    radial-gradient(circle at 54% 26%,#fff 0 2.5px,transparent 3px),
    radial-gradient(circle at 70% 60%,#fff 0 4px,transparent 4.5px),
    radial-gradient(circle at 84% 36%,#fff 0 1.8px,transparent 2.3px),
    radial-gradient(circle at 46% 48%,#fff 0 5px,transparent 5.5px);
  opacity:.9}
.viz.scatter::after{content:'';position:absolute;inset:0 6%;
  background:
    linear-gradient(rgb(255 255 255 / .26),rgb(255 255 255 / .26)) 0 50%/100% 1px no-repeat,
    linear-gradient(rgb(255 255 255 / .26),rgb(255 255 255 / .26)) 50% 0/1px 100% no-repeat}

/* шкала с треугольным бегунком (карточка Red Light) */
.viz.meter{height:6px;margin:auto 0 6px;border-radius:99px;
  background:linear-gradient(90deg,rgb(255 255 255 / .3),#fff)}
.viz.meter::after{content:'';position:absolute;left:74%;top:-9px;
  border:5px solid transparent;border-top-color:#ffe14d}

/* ряд точек (карточка Increases) */
.viz.dots{height:7px;margin:auto 0 6px;
  background:radial-gradient(circle,#fff 0 42%,transparent 46%) 0 50%/13px 7px repeat-x;
  -webkit-mask-image:linear-gradient(90deg,#000 58%,rgb(0 0 0 / .18));
          mask-image:linear-gradient(90deg,#000 58%,rgb(0 0 0 / .18))}

/* ── Ручка свайпа + точки страниц (как под карточками в референсе) ── */
.swipe{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 0 12px}
.grab{width:34px;height:5px;border-radius:99px;background:var(--ink);opacity:.75}
.pgdot{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.22;
  transition:background .25s}
.pgdot.on{opacity:.85}

/* ── Док: круг · пилюля · круг ─────────────────────────────────────── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--fade) 62%,transparent);
  pointer-events:none}
.dock > *{pointer-events:auto}
.dockrow{display:flex;align-items:center;justify-content:center;gap:12px}
.rnd{width:52px;height:52px;border-radius:50%;flex:none;border:none;font-size:19px;
  background:rgb(var(--glass) / .82);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 8px 22px -8px rgb(10 10 20 / .34), inset 0 0 0 1px rgb(var(--glass) / .4);
  transition:transform .3s cubic-bezier(.2,.9,.25,1)}
.rnd:active{transform:scale(.9)}
.pill{height:52px;padding:0 22px;border:none;border-radius:99px;cursor:pointer;
  color:#fff;font:inherit;font-size:16px;font-weight:600;letter-spacing:-.02em;
  position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.9,.25,1)}
/* Пилюля темнее карточек: белая надпись обязана читаться и на зелёном. */
.pill::before{content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(85% 170% at 14% -12%, hsl(var(--cta2)), transparent 70%),
    linear-gradient(120deg,hsl(var(--cta2)),hsl(var(--cta)))}
.pill:active{transform:scale(.955)}
.pill span{opacity:.7;font-weight:400;font-size:12.5px;margin-left:6px}

/* ── Верхняя панель ───────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 2px 14px;color:var(--ink)}
.tb{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;font-size:15px;color:var(--ink);
  background:rgb(var(--glass) / .55);backdrop-filter:blur(16px)}
.tb.mark{background:rgb(var(--glass) / .7);font-size:16px}
.topbar h1{font-size:26px;font-weight:700;letter-spacing:-.035em}

/* Ярлык категории — белая пилюля поверх сетки, как «Stones in nature». */
.tag{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px 2px;
  padding:7px 13px;border-radius:99px;font-size:13.5px;font-weight:500;
  letter-spacing:-.015em;color:var(--ink);
  background:rgb(var(--glass) / .74);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 8px 22px -12px rgb(10 10 20 / .45),
             inset 0 0 0 1px rgb(var(--glass) / .5)}
.tag i{width:7px;height:7px;border-radius:50%;background:hsl(var(--cta2))}

/* ── Мозаика ──────────────────────────────────────────────────────── */
/* Кладка колонками, а не grid со span-ами: при разной высоте плиток grid
   неизбежно оставляет дыры, а колонки укладывают плотно всегда. */
.mosaic{columns:2;column-gap:8px}
.tile{position:relative;overflow:hidden;border-radius:var(--r);border:none;
  padding:0;cursor:pointer;background:rgb(var(--glass) / .22);color:#fff;width:100%;
  display:block;break-inside:avoid;margin:0 0 8px;
  -webkit-tap-highlight-color:transparent;
  transition:transform .32s cubic-bezier(.2,.9,.25,1)}
.tile:active{transform:scale(.975)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(calc(1 - var(--dim)))}
/* Подпись читается на любом фото — за счёт растяжки, а не заливки. */
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  text-align:left;
  background:linear-gradient(transparent,rgb(0 0 0 / .62))}
.tile .nm{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .pr{display:block;font-size:12px;opacity:.82;margin-top:1px}
.tile .old{opacity:.6;text-decoration:line-through;margin-left:5px;font-size:11px}

/* Пропорции плиток чередуются — из-за этого сетка и читается мозаикой. */
.s-hero {aspect-ratio:3/4.2}
.s-tall {aspect-ratio:3/3.6}
.s-wide {aspect-ratio:3/2.2}
.s-half {aspect-ratio:1/1}
.s-third{aspect-ratio:3/3.2}

/* Выбранная плитка: пунктир + угловые засечки, как в референсе. */
.tile.on{outline:1.5px dashed hsl(var(--cta2));outline-offset:-5px}
.tile.on::after{content:'';position:absolute;inset:5px;pointer-events:none;
  background:
    linear-gradient(hsl(var(--cta2)),hsl(var(--cta2))) 0 0/10px 2px no-repeat,
    linear-gradient(hsl(var(--cta2)),hsl(var(--cta2))) 0 0/2px 10px no-repeat,
    linear-gradient(hsl(var(--cta2)),hsl(var(--cta2))) 100% 100%/10px 2px no-repeat,
    linear-gradient(hsl(var(--cta2)),hsl(var(--cta2))) 100% 100%/2px 10px no-repeat}
.tile .badge{position:absolute;top:8px;right:8px;min-width:22px;height:22px;
  padding:0 7px;border-radius:99px;display:none;align-items:center;
  font-size:11.5px;font-weight:600;color:#fff;
  background:hsl(var(--cta));color:var(--cta-ink);
  box-shadow:0 4px 12px -4px rgb(0 0 0 / .6)}
.tile.on .badge{display:flex}

/* Позиция без фото — пунктирный слот, как пустой кадр в референсе. */
.tile.empty{background:rgb(var(--glass) / .34);backdrop-filter:blur(14px);
  border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);
  color:var(--soft);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px}
.tile.empty .ic{font-size:19px;opacity:.7}
.tile.empty .nm{font-size:12.5px;color:var(--ink);opacity:.85}
.tile.empty .pr{font-size:11.5px;color:var(--soft)}

/* ── Линейка категорий: реально листается, бегунок стоит по центру ──
   Была мёртвой картинкой и просто загораживала каталог. Теперь это
   скруббер: тянешь ленту — категория встаёт под бегунок и каталог
   фильтруется. Плюс уезжает вниз, когда листаешь вперёд, и возвращается
   при движении назад — экран не должен быть занят наполовину. */
.ruler{width:100%;padding:0 2px 10px}
.ruler .inner{position:relative;height:38px;border-radius:13px;overflow:hidden;
  background:rgb(var(--glass) / .66);
  backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 10px 26px -16px rgb(10 10 20 / .55),
             inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.ruler .track{position:absolute;inset:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.ruler .track::-webkit-scrollbar{display:none}
.ruler .cat{flex:0 0 50%;scroll-snap-align:center;text-align:center;
  font-size:12.5px;letter-spacing:-.015em;color:var(--soft);
  white-space:nowrap;transition:color .2s,font-weight .2s;cursor:pointer}
.ruler .cat.on{color:var(--ink);font-weight:600}
/* Деления — фоном под лентой, они не должны ездить вместе с ней. */
.ruler .inner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--ink) 30%,transparent) 0 1px,transparent 1px 7px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ruler .mark{position:absolute;left:50%;top:5px;bottom:4px;width:2px;z-index:2;
  background:hsl(var(--cta2));border-radius:2px;pointer-events:none}

/* ── Док: квадрат · перфорированная пилюля · квадрат ───────────────── */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--fade) 62%,transparent)}
.dockrow{display:flex;align-items:center;justify-content:center;gap:11px;width:100%}
/* Иконки рисует SVG. Текстовые глифы (☰, ⌕) в каждой системе своего
   размера и веса — отсюда и кривая «прорисовка» кнопок. */
.sq{width:52px;height:52px;border-radius:17px;flex:none;border:none;
  cursor:pointer;display:grid;place-items:center;color:var(--ink);
  background:rgb(var(--glass) / .82);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 10px 24px -12px rgb(10 10 20 / .45),
             inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);
  transition:transform .28s cubic-bezier(.2,.9,.25,1),background .2s}
.sq svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sq:active{transform:scale(.92);background:color-mix(in srgb,var(--bg) 80%,var(--ink) 8%)}

/* Главное действие экрана — тянется на всю свободную ширину и выше
   соседей: в каталоге «Записаться» должно быть видно первым. */
.pill{position:relative;flex:1;height:60px;padding:0 24px;border:none;border-radius:99px;
  cursor:pointer;color:var(--cta-ink);font:inherit;font-size:17.5px;font-weight:600;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;isolation:isolate;
  box-shadow:0 14px 32px -12px hsl(var(--cta) / .55);
  transition:transform .28s cubic-bezier(.2,.9,.25,1)}
.pill::before{content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(85% 170% at 16% -12%, hsl(var(--cta2)), transparent 70%),
    linear-gradient(120deg,hsl(var(--cta2)),hsl(var(--cta)))}
/* Перфорация точками — как на жёлтой пилюле в референсе. Слабее, чем
   было: на .5 сетка лезла поверх букв и текст читался мутно. */
.pill::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.22;
  background:radial-gradient(circle,currentColor 0 .7px,transparent 1.1px) 0 0/5px 5px}
.pill:active{transform:scale(.96)}
.pill span{opacity:.86;font-weight:400;font-size:13.5px;margin-left:9px}

/* ── Тост: короткое сообщение поверх экрана ─────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px);z-index:20;max-width:80%;
  padding:11px 16px;border-radius:14px;font-size:13.5px;text-align:center;
  color:var(--cta-ink);background:hsl(var(--cta));
  opacity:0;pointer-events:none;transition:opacity .25s var(--in),transform .25s var(--in)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Приложение открывается во весь экран Telegram — своя прокрутка ни к чему. */
body{min-height:100vh}
.app{min-height:100vh}

/* ── Экраны-списки: записи, отзывы, о нас, маршрут ──────────────────── */
/* Стекло, а не сплошная плашка: под ними живой меш, и глухой прямоугольник
   выглядел бы наклейкой поверх фона. */
.sheetlist{display:flex;flex-direction:column;gap:8px}
.sheetlist .row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;border-radius:var(--r);text-align:left;
  border:none;width:100%;font:inherit;color:var(--ink);
  background:rgb(var(--glass) / .68);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 8px 22px -14px rgb(10 10 20 / .45),
             inset 0 0 0 1px rgb(var(--glass) / .45)}
.sheetlist .row.col{flex-direction:column;align-items:flex-start;gap:5px}
.sheetlist .row b{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.sheetlist .row span{font-size:13px;color:var(--soft);line-height:1.45}
/* Текстовые поля владельца свободной длины. Одна мастер вписала в «Часы»
   тридцать дат подряд — текст вылез поверх обложки и накрыл название. Поле
   не должно уметь ломать экран: показываем начало, остальное срезаем. */
.sheetlist .row span.clamp{display:-webkit-box;-webkit-line-clamp:4;
  -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sheetlist .row.empty{justify-content:center;color:var(--soft);font-size:13.5px}
.sheetlist a.row,.sheetlist button.row{cursor:pointer;text-decoration:none;
  transition:transform .28s var(--tap)}
.sheetlist a.row:active,.sheetlist button.row:active{transform:scale(.985)}
.sheetlist .bigstat{display:flex;align-items:baseline;gap:10px;padding:6px 4px 10px}
.sheetlist .bigstat b{font-size:44px;font-weight:700;letter-spacing:-.04em}
.sheetlist .bigstat span{font-size:13.5px;color:var(--soft)}


/* ── Очередь на освободившееся время ──────────────────────────────────
   Раньше на этом месте стояло «напишите мастеру» — тупик, оформленный
   вежливо. Чипы вместо полей: выбрать «вечер» одним касанием человек
   согласен, вводить часы — уже нет. */
.sheetlist .row.wl{gap:10px}
.wl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.wl-chips button{
  border:none;cursor:pointer;font:600 12.5px inherit;padding:8px 13px;
  border-radius:99px;color:var(--soft);
  background:rgb(var(--glass) / .5);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);
  transition:transform .24s var(--tap);
}
.wl-chips button:active{transform:scale(.94)}
.wl-chips button.on{color:var(--cta-ink);background:hsl(var(--cta));box-shadow:none}
.wl-go{
  margin-top:6px;border:none;cursor:pointer;width:100%;
  font:600 15px inherit;padding:14px 18px;border-radius:99px;
  color:var(--cta-ink);background:hsl(var(--cta));
  transition:transform .28s var(--tap);
}
.wl-go:active{transform:scale(.97)}

/* ── Предоплата ───────────────────────────────────────────────────────
   Ни одного своего цвета: карточка живёт на --cta/--ink/--soft, как всё
   остальное, и поэтому одинаково читается на всех шести темах — от
   светлой бумажной до тёмной. */
.sheetlist .row.paynote{
  box-shadow:0 8px 22px -14px rgb(10 10 20 / .45),
             inset 0 0 0 1.5px color-mix(in srgb,hsl(var(--cta)) 34%,transparent)}
.sheetlist .row .paydet{
  font-size:14px;color:var(--ink);font-weight:600;line-height:1.5;
  word-break:break-word;letter-spacing:-.01em}
.sheetlist .row .copy{
  appearance:none;border:none;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  padding:9px 14px;border-radius:calc(var(--r) * .62);margin-top:2px;
  color:var(--cta-ink);background:hsl(var(--cta));
  transition:transform .28s var(--tap),opacity .2s ease}
.sheetlist .row .copy:active{transform:scale(.96);opacity:.9}

/* ── Карточки мастеров ────────────────────────────────────────────────
   Поверхности используют те же glass/clean переменные, что каталог и
   записи: профиль не выглядит отдельным чужим приложением. */
.master-row{min-height:76px;gap:13px}
.master-row__body{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;text-align:left}
.master-row__body b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.master-row__body span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.master-row__go{font-size:25px;line-height:1;color:var(--soft)}
.master-avatar{width:46px;height:46px;display:grid;place-items:center;overflow:hidden;flex:none;
  border-radius:50%;background:color-mix(in srgb,hsl(var(--cta2)) 24%,rgb(var(--glass) / .68));
  color:var(--ink);font-size:17px;font-weight:700;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .26)}
.master-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.master-avatar--empty{background:linear-gradient(145deg,hsl(var(--cta2) / .65),rgb(var(--glass) / .62))}
.master-portrait{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  background:rgb(var(--glass) / .68);box-shadow:0 14px 32px -20px rgb(0 0 0 / .5),
  inset 0 0 0 1px rgb(var(--glass) / .48)}
.master-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.master-portrait--empty{display:grid;place-items:center;background:
  radial-gradient(70% 75% at 50% 20%,hsl(var(--cta2) / .4),transparent 72%),rgb(var(--glass) / .54)}
.master-avatar--large{width:96px;height:96px;font-size:38px}
.master-profile-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:3px 3px 7px}
.master-profile-head h1{font-size:28px;line-height:1.06;letter-spacing:-.04em;font-weight:700}
.master-profile-head p{margin-top:5px;color:var(--soft);font-size:14px;line-height:1.35}
.master-stat{text-align:right;display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.master-stat b{font-size:16px}.master-stat span{font-size:12px;color:var(--soft)}
/* Прайс мастера. Название слева, цена справа и вплотную к краю: колонка
   сумм — то, чем клиент сравнивает мастеров, и рваный правый край делает
   сравнение работой. */
.mprice{gap:2px}
/* width:100% обязателен: карточка — flex-колонка, и без него строка
   сжимается по содержимому, а колонка сумм перестаёт быть колонкой —
   именно ею клиент сравнивает мастеров. */
.mprice-row{display:flex;width:100%;justify-content:space-between;align-items:baseline;
  gap:14px;padding:7px 0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.mprice-row:last-child{border-bottom:0;padding-bottom:1px}
.mprice-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--soft)}
.mprice-row b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Форма отзыва ───────────────────────────────────────────────────── */
/* Всё держится на переменных темы (--ink, --soft, --cta, --glass), поэтому
   форма живёт во всех пяти стилях карточек и на всех фонах без единого
   исключения: «Чистый» перекрасит её тем же способом, что и карточки. */
.revform{gap:10px}
.stars-pick{display:flex;gap:4px;margin:2px 0}
.star{border:none;background:none;cursor:pointer;padding:2px 3px;line-height:1;
  font-size:29px;color:color-mix(in srgb,var(--ink) 22%,transparent);
  transition:transform .2s var(--tap),color .2s var(--tap);
  -webkit-tap-highlight-color:transparent}
.star:active{transform:scale(.86)}
.star.on{color:hsl(var(--cta2))}
.revform textarea{width:100%;box-sizing:border-box;resize:none;
  font:inherit;font-size:14px;color:var(--ink);padding:11px 13px;
  border:none;border-radius:16px;background:rgb(var(--glass) / .5);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.revform textarea::placeholder{color:var(--soft)}
.revform textarea:focus{outline:none;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 28%,transparent)}
.revform .send{border:none;cursor:pointer;font:inherit;font-size:14.5px;
  font-weight:600;letter-spacing:-.015em;padding:12px 18px;border-radius:99px;
  background:hsl(var(--cta));color:var(--cta-ink);
  transition:transform .28s var(--tap),opacity .2s}
.revform .send:active{transform:scale(.97)}
/* Пока звёзды не проставлены, отправлять нечего — кнопка гаснет, а не
   молча отказывает после нажатия. */
.revform .send:disabled{opacity:.4;cursor:default}

/* ── Фишки выбора: мастер, день, время ─────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.chip{border:none;cursor:pointer;font:inherit;font-size:13px;letter-spacing:-.01em;
  padding:9px 14px;border-radius:99px;color:var(--ink);
  background:rgb(var(--glass) / .55);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);
  transition:transform .28s var(--tap),background .2s}
.chip:active{transform:scale(.94)}
/* Выбранное — цветом кнопки, а не рамкой: рамку на стекле почти не видно. */
.chip.on{background:hsl(var(--cta));color:var(--cta-ink);box-shadow:none;font-weight:600}

/* Свой фон владельца. В CSS зашита демо-картинка для превью, настоящую
   подставляет скрипт: её адрес знает только сервер и отдаёт по токену. */
[data-wall="photo"] .wall.own{--mesh:var(--own-photo) center/cover}

/* hidden обязан побеждать display:flex — иначе ручка свайпа остаётся
   висеть на экранах, где страниц нет. */
.swipe[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════════
   СТЕКЛО С ТОЛЩИНОЙ

   Размытие плюс полупрозрачная заливка дают «мутный прямоугольник».
   Настоящее стекло отличают три вещи, и все три дешёвые:

     1. КРОМКА. Светлая линия по верхнему краю и еле заметная тёмная по
        нижнему. Это и читается как толщина — без неё поверхность плоская.
     2. НАСЫЩЕНИЕ. Размытие обесцвечивает: цветной меш под стеклом сереет.
        saturate возвращает ему жизнь.
     3. ТЕНЬ В ЦВЕТ ФОНА, а не чёрная. Чёрная тень на цветном меше читается
        грязью — ровно та ошибка, из-за которой ранние версии выглядели
        дёшево. Берём оттенок акцента и роняем его яркость.
   ═══════════════════════════════════════════════════════════════════════ */

/* На body, а НЕ на :root: цвет темы (--cta) задаётся на body[data-wall],
   и на :root его ещё не видно — тень получалась невалидной и пропадала
   целиком. Классическая ловушка каскада. */
body{
  /* Тень, окрашенная фоном. hsl(var(--cta)) — тёмный тон текущей темы. */
  --shadow-lo: 0 6px 18px -10px hsl(var(--cta) / .55);
  --shadow-hi: 0 16px 34px -16px hsl(var(--cta) / .60);
  /* Кромка: свет сверху, тень снизу. Один пиксель, но он решает всё. */
  --edge: inset 0 1px 0 rgb(255 255 255 / .38),
          inset 0 -1px 0 rgb(0 0 0 / .14);
}

.sheetlist .row,
.ruler .inner,
.sq,
.tb,
.tag,
.chip{
  box-shadow: var(--shadow-lo), var(--edge),
              inset 0 0 0 1px rgb(var(--glass) / .34) !important;
  backdrop-filter: blur(22px) saturate(1.7);
}

/* Плитки каталога и карточки: тень тоже цветная, но глубже — они «выше». */
.card, .tile{ box-shadow: var(--shadow-hi), var(--edge) }

/* Блик по верхнему краю плитки: узкая светлая полоса, будто поверхность
   поймала свет. При нажатии усиливается — поверхность «повернулась». */
.card::before, .tile::after{ transition: opacity .3s var(--tap) }
/* Блик живёт ПОД текстом: сверху карточки лежит затемнение под заголовок,
   и светлая полоса поверх него сводила бы его работу на нет. */
.card .spec, .tile .spec{
  position:absolute; left:0; right:0; top:0; height:26%;
  pointer-events:none; z-index:-1; opacity:.38;
  background:linear-gradient(rgb(255 255 255 / .34), transparent);
  transition:opacity .28s var(--tap)}
.card:active .spec, .tile:active .spec{opacity:.85}

/* Пилюля дока — самая «толстая» поверхность экрана. */
.pill{ box-shadow: 0 18px 38px -14px hsl(var(--cta) / .75),
                   inset 0 1px 0 rgb(255 255 255 / .22),
                   inset 0 -1px 0 rgb(0 0 0 / .22) }

/* ── Реакция на прокрутку ───────────────────────────────────────────── */
/* Пока контент не уехал под панель, стекло почти прозрачное: незачем
   мутить фон, который никто не перекрывает. Как только уехал — панель
   уплотняется и отделяет себя кромкой. */
.dock{transition:background .3s var(--in)}
body.scrolled .dock{
  background:linear-gradient(to top, var(--fade) 74%, transparent);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22)}
body.scrolled .topbar{
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 -1px 0 rgb(var(--glass) / .22)}
.topbar{transition:backdrop-filter .3s var(--in),box-shadow .3s var(--in);
  position:sticky;top:0;z-index:6;margin:0 -14px;padding-left:14px;padding-right:14px}

/* ── Карточка услуги ────────────────────────────────────────────────── */
/* Фото во всю ширину с подписью поверх — то же решение, что у обложки:
   растяжка снизу, иначе название тонет на светлом кадре. */
.hero-photo{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;
  margin:0 0 12px;
  box-shadow:var(--shadow-hi), inset 0 1px 0 rgb(255 255 255 / .22)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 44%,rgb(0 0 0 / .62))}
.hero-photo .hero-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  color:#fff}
.hero-photo .hero-cap h2{font-size:23px;font-weight:700;letter-spacing:-.03em;
  line-height:1.12;text-shadow:0 2px 16px rgb(0 0 0 / .45)}
.hero-photo .hero-cap p{margin-top:4px;font-size:15px;font-weight:500;opacity:.92}
.hero-photo .hero-cap s.old{opacity:.6;font-weight:400;font-size:13px;margin-left:6px}
/* Позиция без фото: не пустая серая плита, а спокойный слот в цвет темы. */
.hero-photo.empty{display:grid;place-items:center;
  background:rgb(var(--glass) / .34);backdrop-filter:blur(16px);
  border:1.5px dashed color-mix(in srgb,var(--ink) 26%,transparent)}
.hero-photo.empty .ic{font-size:34px;opacity:.4;color:var(--ink)}
.hero-photo.empty::after{background:linear-gradient(transparent 52%,rgb(0 0 0 / .34))}

/* Угловая кнопка быстрого выбора на плитке каталога. */
.tile .pick{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;
  border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1;
  color:#fff;background:rgb(0 0 0 / .34);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28);
  transition:transform .26s var(--tap),background .2s}
.tile .pick:active{transform:scale(.86)}
.tile.on .pick{display:none}        /* выбрано — вместо плюса номер в бейдже */
.tile.empty .pick{color:var(--ink);background:rgb(var(--glass) / .5);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent)}

/* ── Позиция без фотографии ─────────────────────────────────────────── */
/* Фотографии загружает меньшинство владельцев, поэтому «без фото» — это
   норма, а не недоделанное состояние. Пунктирная рамка честно сообщала
   «здесь чего-то не хватает», и весь каталог выглядел незаконченным.
   Теперь это полноценная плитка с тем же мешем, что у карточек главного:
   один язык на всё приложение. */
.tile.plain, .hero-photo.plain{
  --c:var(--h); color:#fff; isolation:isolate; border:none}
.tile.plain::before, .hero-photo.plain::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(56% 42% at 50% 46%,  hsl(var(--c1) 96% 60% / .95), transparent 74%),
    radial-gradient(74% 58% at 14% 8%,   hsl(var(--c2) 94% 54% / .88), transparent 70%),
    radial-gradient(78% 60% at 92% 16%,  hsl(var(--c3) 92% 50% / .82), transparent 68%),
    radial-gradient(120% 92% at 52% 112%,hsl(var(--c4) 88% 24%), transparent 78%),
    linear-gradient(158deg,hsl(var(--c) 86% 44%),hsl(var(--c4) 84% 26%))}
/* Название на градиенте читается и без фотоснимка, но растяжка снизу всё
   равно нужна: ядро меша светлое, и белый текст на нём тонет. */
.tile.plain .cap{background:linear-gradient(transparent,rgb(0 0 0 / .52))}
.hero-photo.plain{background:none;backdrop-filter:none}
.hero-photo.plain::after{background:linear-gradient(transparent 46%,rgb(0 0 0 / .56))}

/* ── Ближайшая запись: широкая карточка над сеткой ──────────────────── */
/* Не рядовая плитка: ради неё приложение и открывают чаще всего.
   Пропорция низкая и вытянутая — крупное время читается с расстояния. */
.card.wide{grid-column:1 / -1;aspect-ratio:auto;min-height:118px}
.card.wide .ttl{font-size:17px;letter-spacing:-.374px}
.card.wide .big{font-size:52px;text-align:left;margin:2px 0 0;padding:0}
.card.wide .viz{margin-top:6px}
.card.wide .foot{font-size:11.5px}

/* ── Подтверждение записи ───────────────────────────────────────────── */
/* Кнопка сама становится галочкой — это то, ради чего человек пришёл,
   и единственное место, где выразительность оправдана. */
.pill.done{flex:0 0 60px;padding:0;transition:flex-basis .38s var(--in),
  padding .38s var(--in)}
.pill .tick{width:28px;height:28px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;
  animation:draw .42s var(--in) .06s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .pill .tick{animation:none;stroke-dashoffset:0}
  .pill.done{transition:none}
}

/* ── Фото в отзывах ─────────────────────────────────────────────────── */
/* «Покажи, как получилось» убеждает сильнее любого текста, поэтому снимок
   идёт крупно и во всю ширину строки, а не миниатюрой в углу. */
.rev .stars{font-size:14px;letter-spacing:2px;color:var(--ink)}
.revpic{display:block;width:100%;margin-top:8px;border-radius:14px;
  aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 8px 20px -12px rgb(10 10 20 / .5)}

/* ═══════════════════════════════════════════════════════════════════════
   СТИЛЬ КАРТОЧЕК — отдельно от фона.

   Фон задаёт настроение, стиль карточек — характер. Владельцу нужны оба:
   один и тот же «Аква» с плотными карточками и со стеклянными выглядит
   как два разных приложения.
   ═══════════════════════════════════════════════════════════════════════ */

/* Стекло: карточки прозрачные, фон просвечивает насквозь. Ближе всего к
   референсу и лучше всего смотрится на своём фото. */
/* Стекло ЗАТЕМНЯЕТ подложку, а не осветляет: текст на карточках белый,
   и на светлом фоне вроде «Ириса» он на светлом стекле просто исчезал. */
[data-cards="glass"] .card::before,
[data-cards="glass"] .tile.plain::before{
  background:linear-gradient(160deg,rgb(0 0 0 / .30),rgb(0 0 0 / .16))}
[data-cards="glass"] .card,
[data-cards="glass"] .tile.plain{
  backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:var(--shadow-lo), var(--edge),
             inset 0 0 0 1px rgb(var(--glass) / .30)}
[data-cards="glass"] .card::after{
  background:linear-gradient(180deg,rgb(0 0 0 / .22),transparent 52%)}

/* Плотные: один тон без переливов. Самый спокойный вариант — когда
   владельцу важен товар, а не оформление. */
[data-cards="solid"] .card::before,
[data-cards="solid"] .tile.plain::before{
  background:linear-gradient(160deg,
    hsl(var(--c) 62% 34%), hsl(var(--c4) 60% 22%))}
[data-cards="solid"] .card .spec,
[data-cards="solid"] .tile .spec{opacity:.18}

/* Контур: минимализм. Отличаться должен НЕ толщиной рамки — полтора
   пикселя рядом со стеклом не читаются вовсе. Отличается отсутствием
   размытия (фон виден резко), острыми углами и чёткой рамкой: рядом это
   сразу другой характер, а не «то же самое чуть иначе». */
[data-cards="outline"] .card::before,
[data-cards="outline"] .tile.plain::before{
  background:rgb(0 0 0 / .22)}
[data-cards="outline"] .card,
[data-cards="outline"] .tile.plain{
  backdrop-filter:none;
  border-radius:10px;
  box-shadow:var(--shadow-lo)}
/* Рамку рисует САМ фоновый слой: он лежит поверх внутренней тени элемента
   (отрицательный z-index красится после фона и границ), и рамка на
   элементе была бы просто закрыта. */
[data-cards="outline"] .card::before,
[data-cards="outline"] .tile.plain::before{
  box-shadow:inset 0 0 0 2px rgb(255 255 255 / .55)}
[data-cards="outline"] .tile{border-radius:10px}
[data-cards="outline"] .card .spec,
[data-cards="outline"] .tile .spec{display:none}

/* ── Появление по мере прокрутки ────────────────────────────────────── */
/* У Apple блок проступает, когда до него дошли, а не показывается сразу
   весь экран. Разница в ощущении: страница «раскрывается» под пальцем,
   а не встречает стеной анимации.
   Только прозрачность и 8px сдвига — их же система. */
.rv{opacity:0;transform:translateY(8px);
  transition:opacity .32s var(--in), transform .32s var(--in)}
.rv.in{opacity:1;transform:none}

/* Липкая шапка больше не наезжает на содержимое: она прозрачная, пока
   под ней ничего нет, и уплотняется, только когда контент подошёл. */
.topbar{background:transparent}
body.scrolled .topbar{background:rgb(var(--glass) / .34)}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ── Обучение ─────────────────────────────────────────────────────────────
   Подсветка живого элемента, а не копии: копия разъедется с вёрсткой, и
   человек будет тыкать в картинку. Затемнение сделано огромной тенью —
   так «окно» вырезается без второго слоя и без перерисовки на скролле. */
/* .tour-live: скролл разрешён — затемнение держится fixed-тенью */

.tour-spot{
  position:fixed;z-index:9998;pointer-events:none;opacity:0;
  box-shadow:0 0 0 100vmax rgb(6 8 4 / .72), 0 0 0 1.5px rgb(255 255 255 / .5),
             0 0 40px -6px rgb(255 255 255 / .35);
  transition:opacity .32s var(--tap), left .38s var(--tap), top .38s var(--tap),
             width .38s var(--tap), height .38s var(--tap)}
.tour-spot.on{opacity:1}
/* Пульс тянет взгляд к нужному месту — без него подсветка теряется на
   пёстром фоне мастера. */
.tour-spot::after{
  content:'';position:absolute;inset:-4px;border-radius:inherit;
  border:1.5px solid rgb(255 255 255 / .55);
  animation:tourPulse 2.2s var(--tap) infinite}
@keyframes tourPulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.06);opacity:0}
  100%{opacity:0}}

.tour-box{
  position:fixed;z-index:9999;left:16px;right:16px;max-width:420px;
  margin:0 auto;padding:18px 18px 16px;border-radius:var(--r);
  background:rgb(255 255 255 / .93);color:#0d0f0a;
  backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 24px 60px -20px rgb(0 0 0 / .55),
             inset 0 0 0 1px rgb(255 255 255 / .6);
  opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;
  transition:opacity .34s var(--tap),transform .34s var(--tap)}
.tour-box.on{opacity:1;transform:none;pointer-events:auto}

.tour-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px}
.tour-num{font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#6b7280}
.tour-skip{border:none;background:none;cursor:pointer;font:inherit;
  font-size:13px;color:#6b7280;padding:2px 0;
  -webkit-tap-highlight-color:transparent}
.tour-skip:active{opacity:.5}

.tour-box h3{margin:0 0 6px;font-size:19px;line-height:23px;font-weight:700;
  letter-spacing:-.028em}
.tour-box p{margin:0;font-size:14.5px;line-height:20px;color:#3f4450;
  letter-spacing:-.01em}

.tour-act{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px}
/* Подсказка о действии — не кнопка: нажимать нужно подсвеченный элемент,
   и путать эти два места нельзя. */
.tour-hint{font-size:13px;font-weight:500;color:#0d0f0a;opacity:.62;
  display:inline-flex;align-items:center;gap:6px}
.tour-hint::before{content:'';width:7px;height:7px;border-radius:50%;
  background:#0d0f0a;opacity:.35;animation:tourDot 1.6s var(--tap) infinite}
@keyframes tourDot{0%,100%{opacity:.2}50%{opacity:.6}}

.tour-next{border:none;cursor:pointer;font:inherit;font-size:14px;
  font-weight:600;letter-spacing:-.015em;padding:10px 18px;border-radius:99px;
  background:#0d0f0a;color:#fff;
  transition:transform .24s var(--tap)}
.tour-next:active{transform:scale(.96)}

/* ═══════════════════════════════════════════════════════════════════════
   СИСТЕМА APPLE НА НАШЕМ ЦВЕТЕ

   Значения сняты с живых страниц apple.com (iPhone 17 Pro, Watch Series 11,
   AirPods Pro), а не по памяти:

     • базовый текст 17/25, трекинг −0.374; шкала 40/32/24/21/17/14;
     • заголовки ВСЕГДА 600, никогда 700 — 700 у них не встречается вовсе;
     • скругление карточек ровно 28 на всех страницах;
     • кнопки — пилюля, круглые иконки 36×36;
     • ТЕНЕЙ НЕТ: из 3424 элементов страницы тень есть у восьми (0,2%).
       Разделение делают контрастом и воздухом.

   От себя оставляем цвет — меши и стекло, ради которых всё затевалось.
   Вместо теней разделяем волосяной кромкой: на цветном фоне без неё
   карточка сливается, а drop-shadow там читается грязью.
   ═══════════════════════════════════════════════════════════════════════ */

body{
  font-size:17px; line-height:25px; letter-spacing:-.374px;
  /* Тени системы гасим в ноль — но переменные оставляем, чтобы не
     переписывать каждое правило по отдельности. */
  --shadow-lo:none;
  --shadow-hi:none;
  --edge: inset 0 0 0 .5px rgb(255 255 255 / .28);
  --r:28px;
}

/* ── Шкала ──────────────────────────────────────────────────────────── */
.mast h1, .cover .on-cover h1{
  font-size:32px; font-weight:600; line-height:36px; letter-spacing:.128px}
.hero-photo .hero-cap h2{
  font-size:24px; font-weight:600; line-height:29px; letter-spacing:.288px}
/* Полноширинные строки держат их базовый кегль 17 — там он и рассчитан. */
.sheetlist .row b{font-size:17px;font-weight:600;line-height:22px;letter-spacing:-.374px}
.sheetlist .row span, .mast .status{
  font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.224px}
/* В карточке 165px шириной их 17px не помещается — подписи обрезало.
   Масштабируем шкалу под контекст, сохраняя ИХ пропорции, веса и трекинг:
   заголовок 600, подпись 500, сноска 400. */
.card .ttl, .tile .nm{
  font-size:15px; font-weight:600; line-height:19px; letter-spacing:-.24px}
.card .sub, .tile .pr{
  font-size:13px; font-weight:500; line-height:17px; letter-spacing:-.16px}
.card .foot{font-size:12px; font-weight:400; letter-spacing:-.12px; opacity:.7}
.card .big{font-weight:600; letter-spacing:0}
.tag, .chip{font-size:14px; font-weight:500; letter-spacing:-.224px}
.pill{font-size:17px; font-weight:600; letter-spacing:-.374px}

/* ── Форма ──────────────────────────────────────────────────────────── */
.card, .tile, .cover .frame, .hero-photo, .sheetlist .row{border-radius:28px}
.ruler .inner{border-radius:20px}
.sq{border-radius:50%; width:52px; height:52px}   /* круглые, как у них */
.tile .pick{width:36px; height:36px; font-size:19px}
.tb{width:36px; height:36px}

/* ── Воздух ─────────────────────────────────────────────────────────── */
/* Ритм секций у них 96px. В мини-аппе экран в разы меньше, поэтому шаг
   делим на четыре: 24 между блоками, 12 между карточками. Пропорция та же,
   масштаб — под ладонь. */
.app{padding:16px 16px calc(120px + env(safe-area-inset-bottom))}
.page{gap:12px}
.mosaic{column-gap:12px}
.tile{margin-bottom:12px}
.sheetlist{gap:12px}
.sheetlist .row{padding:18px 20px}
.card{padding:16px 17px}
.tag{margin-bottom:16px; padding:8px 15px}
.cover{margin-bottom:24px}

/* ═══════════════════════════════════════════════════════════════════════
   СТИЛЬ «ЧИСТЫЙ» — точное следование замерам с apple.com.

   Здесь никакого нашего цвета: поверхности нейтральные, фон белый, акцент
   один и синий. Полумеры тут не работают — оставить меш под серыми
   карточками значит получить ни то ни сё, поэтому стиль ОТМЕНЯЕТ выбранный
   фон. В панели это сказано прямо.

   Числа: #f5f5f7 поверхность, #1d1d1f текст, #0071e3 акцент, скругление 28,
   круглые кнопки 36, теней нет.
   ═══════════════════════════════════════════════════════════════════════ */

[data-cards="clean"]{
  --ink:#1d1d1f; --soft:#6e6e73; --glass:255 255 255; --fade:#ffffff;
  --cta:212 100% 45%; --cta2:212 100% 52%; --cta-ink:#ffffff;
  background:#fff}
/* Фон-меш выключен целиком, вместе с зерном и ободком. */
[data-cards="clean"] .wall{display:none}

[data-cards="clean"] .card,
[data-cards="clean"] .tile.plain,
[data-cards="clean"] .hero-photo.plain{
  color:#1d1d1f; backdrop-filter:none; box-shadow:none}
[data-cards="clean"] .card::before,
[data-cards="clean"] .tile.plain::before,
[data-cards="clean"] .hero-photo.plain::before{
  background:#f5f5f7}
/* Ни затемнения под заголовком, ни блика: на ровной светлой поверхности
   они не нужны — тёмный текст и так читается. */
[data-cards="clean"] .card::after,
[data-cards="clean"] .card .spec,
[data-cards="clean"] .tile .spec{display:none}
[data-cards="clean"] .tile.plain .cap{background:none}

/* Перфорированная цифра из белой становится тёмной. */
[data-cards="clean"] .card .big{
  background-image:radial-gradient(circle,#1d1d1f 0 60%,transparent 66%);
  filter:none}
[data-cards="clean"] .card .big small{
  -webkit-text-fill-color:#6e6e73; color:#6e6e73}
/* Приборы на светлом фоне — серые, а не белые. */
[data-cards="clean"] .viz.bars::before,
[data-cards="clean"] .viz.dots,
[data-cards="clean"] .viz.meter{filter:invert(1) opacity(.42)}
[data-cards="clean"] .viz.wave path{stroke:#86868b}
[data-cards="clean"] .viz.scatter::before{filter:invert(1) opacity(.5)}
/* Жёлтые бегунки — из нашей палитры, здесь они выбиваются: у них акцент
   ровно один и синий. */
[data-cards="clean"] .viz.wave::after{border-top-color:#0071e3}
[data-cards="clean"] .viz.bars::after{background:#0071e3}
[data-cards="clean"] .viz.meter::after{border-top-color:#0071e3}
[data-cards="clean"] .ring-bg{border-color:rgb(0 0 0 / .14)}
[data-cards="clean"] .ring-bg::after{border-top-color:rgb(0 0 0 / .3)}

/* Поверхности списков и ярлыков — та же #f5f5f7, без стекла. */
[data-cards="clean"] .sheetlist .row,
[data-cards="clean"] .tag,
[data-cards="clean"] .ruler .inner,
[data-cards="clean"] .chip{
  background:#f5f5f7 !important; backdrop-filter:none;
  box-shadow:none !important; color:#1d1d1f}
[data-cards="clean"] .chip.on{background:#0071e3 !important; color:#fff}

/* Док: белый фон, круглые серые кнопки, синяя пилюля — как у них. */
[data-cards="clean"] .dock{background:linear-gradient(to top,#fff 72%,transparent)}
[data-cards="clean"] .sq,
[data-cards="clean"] .tb{
  background:rgba(210,210,215,.64) !important; color:#1d1d1f;
  box-shadow:none !important; backdrop-filter:none}
[data-cards="clean"] .pill::before{background:#0071e3}
[data-cards="clean"] .pill::after{display:none}   /* без перфорации */
[data-cards="clean"] .pill{box-shadow:none}
[data-cards="clean"] .grab{background:#1d1d1f}
[data-cards="clean"] .mast h1,
[data-cards="clean"] .cover .on-cover h1{color:#1d1d1f}

/* Строка программы лояльности: подарок — не рядовая запись, поэтому она
   выделяется цветом кнопки, а не просто стоит первой в списке. */
.sheetlist .row.loyal{justify-content:center;
  background:color-mix(in srgb,hsl(var(--cta2)) 22%,rgb(var(--glass) / .6))}
.sheetlist .row.loyal b{font-size:14px}

/* Фото не загрузилось: блок не должен зиять пустой рамкой — он просто
   уходит, а вокруг ничего не разъезжается. */
.cover.no-photo,.halo.no-photo{display:none}
.hero-photo.no-photo{aspect-ratio:auto;min-height:0}
.revpic.no-photo{display:none}

/* Согласие в момент действия — тонкой строкой под кнопкой, а не экраном
   поперёк дороги. Ссылка подчёркнута: её должно быть видно ссылкой, иначе
   человек соглашается с тем, чего не может прочитать. */
/* Цвет берём от темы (--ink меняется вместе с фоном): фиксированный белый
   был нечитаем на светлых обоях — человек соглашался бы с тем, чего не
   может прочитать. 62% — заметно тише основного текста, но ещё контрастно. */
.consent{margin:14px 2px 2px;font-size:12.5px;line-height:17px;text-align:center;
  color:color-mix(in srgb,var(--ink) 62%,transparent);letter-spacing:-.005em}
.consent a{color:color-mix(in srgb,var(--ink) 88%,transparent);
  text-decoration:underline;text-underline-offset:2px}
.consent a:active{opacity:.6}