/* ═══════════════════════════════════════════════════════════════════════
   NEXO OS — облик «Карточек» по референсам AI OS.

   Слой кладётся ПОВЕРХ client_new.css и включается классом html.os,
   который ставит static/client_os.js. Не загрузился скрипт — класса нет,
   и витрина остаётся прежней, рабочей. Поэтому каждое правило здесь
   начинается с html.os: без этого слой спорил бы со старым по порядку
   подключения, а не по смыслу.

   ЗАМЕРЫ С РЕФЕРЕНСОВ (экран 390 pt):
     поле        — ровный светло-серый #F1F1F2, цвет только в карточках;
     заголовок   — одно слово, 34 pt, жирный, трекинг −3.5 %;
     сетка       — 2 колонки, поля 8, зазор 8, плитка 1 : 1.12, низкая 1 : .53;
     подпись     — две строки ОДНОГО размера 15 pt: вторая тем же цветом на 55 %;
     цифры       — точки на сетке 5×7, единица мелко сверху справа;
     приборы     — жёлтый #F5E61F, линии 1.4 pt; красный — только указатель;
     низ         — круги 46 pt и красная глянцевая капсула главного действия.
   ═══════════════════════════════════════════════════════════════════════ */

html.os{
  --os-page:#f1f1f2;
  --os-ink:#0b0b0c;
  --os-ink-2:rgb(11 11 12 / .42);
  --os-line:rgb(11 11 12 / .08);
  --os-yellow:#f5e61f;
  --os-yellow-deep:#e2c800;
  --os-red:#ff2b2b;
  --os-ease:cubic-bezier(.2,.9,.25,1);
  --os-r:20px;
  --os-r-big:28px;
  --os-gap:8px;
}

/* ── Поле ─────────────────────────────────────────────────────────────
   Меш под всем экраном убран: на референсе цветные только карточки, и
   именно поэтому они горят. Залитый под них фон делал каждую карточку
   полупрозрачным пятном того же цвета. */
html.os body{background:var(--os-page);color:var(--os-ink)}
html.os .wall{display:none}
html.os .app{padding:8px 8px calc(128px + env(safe-area-inset-bottom))}

/* ── Шапка: одно слово, как «Watch» ─────────────────────────────────── */
html.os .mast{padding:14px 12px 16px}
html.os .mast h1{font-size:34px;line-height:1.02;font-weight:700;
  letter-spacing:-.035em;color:var(--os-ink)}
/* Вторая строка шапки — серая, как «Today» под «Weather». Зелёная точка
   «открыто» была из другого языка: на референсе у заголовка нет значков,
   только два тона одного текста. */
html.os .mast .status{margin-top:4px;font-size:17px;font-weight:600;
  letter-spacing:-.02em;color:rgb(11 11 12 / .38)}
html.os .mast .dot{display:none}

/* «Спросить» — как поле поиска, а не цветная плашка: это служебная
   строка, и спорить цветом с карточками ей незачем. */
html.os .ask-strip{min-height:48px;margin:0 0 10px;padding:0 16px;
  background:#e6e6e8;color:var(--os-ink);box-shadow:none;border-radius:16px}
html.os .ask-strip__lead i{background:var(--os-ink);box-shadow:none;width:7px;height:7px}
html.os .ask-strip > span:nth-child(2){color:var(--os-ink-2)}
html.os .ask-strip em{color:var(--os-ink-2);opacity:1}

/* ── Страницы и сетка ───────────────────────────────────────────────── */
html.os .pages{gap:10px}
html.os .page.card-rows,html.os .card-row{gap:var(--os-gap)}
/* Страница — во всю ширину, без торчащих краёв следующей. Край справа
   читался не как «листай дальше», а как «карточки не помещаются» —
   ровно так владелец это и описал. Что страниц несколько, говорят
   точки внизу, как на «Watch». */
html.os .pages.has-next .page:not(:last-child){flex-basis:100%}

/* ── Карточка ──────────────────────────────────────────────────────── */
html.os .card{
  border-radius:var(--os-r);padding:14px 14px 12px;aspect-ratio:1/1.12;
  color:#fff;background:#2a2a2e;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 14px 26px -18px rgb(0 0 0 / .45);
  transition:transform .42s var(--os-ease),box-shadow .42s var(--os-ease);
}
html.os .card.low{aspect-ratio:1/.53}
html.os .card.wide{aspect-ratio:auto;min-height:196px}
/* Компактная карточка, оставшаяся без пары, растягивается в ширину, но
   не в высоту: иначе «О нас» становилась большой пустой плитой. */
html.os .card.low.wide{min-height:0;height:calc((min(100vw,460px) - 24px) / 2 * .53);
  /* Во всю ширину. Компактная прижимается к началу строки (align-self),
     и одна, без пары, сжималась до ширины своего текста. */
  align-self:stretch}
html.os .card:active{transform:scale(.965)}
/* Меш карточки рисует палитра ниже. Старый ::before с вычисленным HSL
   гасим, а ::after делаем бликом сверху, а не тёмным скримом: на
   референсе верх карточки светлее, текст держится на насыщенности. */
html.os .card::before{background:var(--pal,#2a2a2e)}
html.os .card::after{
  background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / 0) 34%);
}
html.os .card .spec{display:none}

/* Подпись: две строки ОДНОГО размера. Вторая — тем же цветом на 55 %:
   «Balance / Vitamin D», «Wind / Speed». */
html.os .card .ttl{font-size:15px;line-height:1.12;font-weight:600;letter-spacing:-.022em}
html.os .card .sub{font-size:15px;line-height:1.12;font-weight:600;letter-spacing:-.022em;
  opacity:.55;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.os .card.low .ttl,html.os .card.low .sub{font-size:14px}
/* КОМПАКТНАЯ — ИМЯ, ПОДПИСЬ И СТРОКА ДЕЙСТВИЯ. БЕЗ ПРИБОРА.
   Прибор в 93 точках высоты не помещался: колонка переполнялась, и flex
   сжимал то, что сжимается, — вторую строку. «Контакты» и «Ленина 67»
   уходили под точки и шкалу, владелец прислал это снимком: «о нас и
   контакты забагались». Строки теперь не сжимаются, а прибор здесь не
   рисуется вовсе: в компактной он ничего не сообщал. */
html.os .card.low{padding:13px 14px 11px}
html.os .card.low .ttl,html.os .card.low .sub{flex:none}
html.os .card.low :is(.os-viz,.viz,.ring-bg){display:none}
html.os .card.low .foot{margin-top:auto;line-height:1.15;align-items:center}
html.os .card.low .foot > :last-child{font-size:15px;line-height:1}

html.os .card .foot{font-size:12px;font-weight:500;opacity:.55;letter-spacing:-.01em;
  position:relative;z-index:1}

/* ── Точечные цифры ─────────────────────────────────────────────────── */
html.os .card .big{
  position:relative;z-index:1;margin:auto 0 2px;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:36px;line-height:1;color:inherit;
  -webkit-text-fill-color:currentColor;background:none;filter:none;
}
html.os .card.wide .big{font-size:46px}
html.os .card.low .big{font-size:22px;margin:auto 0 0;align-items:flex-start}
html.os .os-num{position:relative;display:inline-flex;align-items:flex-start;gap:3px}
html.os .os-dots{height:1em;width:auto;display:block;fill:currentColor;overflow:visible}
/* Белые точки чуть светятся, как на «22:30»: без ореола на ярком меше
   они плоские, словно напечатаны. */
html.os :is(.card,.tile,.hero-photo):not([data-ink="dark"]) .os-dots{filter:drop-shadow(0 0 4px rgb(255 255 255 / .38))}
html.os .os-unit{font-size:14px;font-weight:400;line-height:1;opacity:.85;
  letter-spacing:-.01em;margin-top:-2px}
html.os .os-word{font-size:13px;font-weight:600;letter-spacing:-.01em;opacity:.72}
html.os .card .big[data-os="word"]{font-size:26px;font-weight:600;letter-spacing:-.03em}

/* ── Приборы ───────────────────────────────────────────────────────── */
html.os .os-viz{position:relative;z-index:1;display:block;flex:none;margin:6px 0 6px}
html.os .os-inst{display:block;width:100%;overflow:visible}
html.os .os-inst path,html.os .os-inst circle{vector-effect:non-scaling-stroke}
html.os .os-inst .base{fill:none;stroke:currentColor;stroke-width:1;opacity:.34}
html.os .os-inst .y{fill:none;stroke:var(--os-yellow);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
html.os .os-inst .y.soft{opacity:.55}
html.os .os-inst .y.fill{fill:var(--os-yellow);stroke:none}
html.os .os-inst .tri{fill:none;stroke:var(--os-yellow);stroke-width:1.4;stroke-linejoin:round}
html.os .os-inst .tick,html.os .os-inst .ticks path{fill:none;stroke:currentColor;
  stroke-width:1;opacity:.5}
html.os .os-inst .mark{stroke-width:2.2}
html.os .os-inst .fill{fill:currentColor}
html.os .os-viz--wave .os-inst{height:30px}
html.os .os-viz--meter .os-inst{height:26px}
html.os .os-viz--bars .os-inst{height:28px}
html.os .os-viz--dots .os-inst{height:10px}
html.os .os-viz--scatter{position:absolute;inset:26% 6% 16% 6%;margin:0;z-index:0}
html.os .os-viz--scatter .os-inst{height:100%}
/* Кольцо стоит ВОКРУГ цифры, как у «Sleep Quality»: прибор позади
   числа, а не строкой под ним. */
html.os .os-viz--ring{position:absolute;z-index:0;margin:0;
  left:50%;top:54%;width:74%;aspect-ratio:1;transform:translate(-50%,-50%)}
html.os .os-viz--ring .os-inst{height:100%}
/* Звёзды отзывов: контур тем же цветом, что текст, заливка жёлтая. */
html.os .os-viz--stars{margin:8px auto 4px}
html.os .os-stars{height:14px;width:auto;margin:0 auto}
html.os .os-stars .star-base{fill:none;stroke:currentColor;stroke-width:.9;opacity:.55}
/* Инициалы мастеров — стеклянные кружки внахлёст, как аватары «Voice». */
html.os .os-viz--faces{margin:10px 0 6px}
html.os .os-faces{display:flex;justify-content:center}
html.os .os-faces i{width:34px;height:34px;margin-left:-8px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:600;
  color:#fff;background:rgb(255 255 255 / .2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .42),0 4px 10px -4px rgb(0 0 0 / .3)}
html.os .os-faces i:first-child{margin-left:0}
html.os .card[data-ink="dark"] .os-inst .y{stroke:var(--os-yellow-deep)}
html.os .card[data-ink="dark"] .os-inst .y.fill{fill:var(--os-yellow-deep)}

/* ── Палитры ───────────────────────────────────────────────────────────
   Сняты с референса вручную. Порядок слоёв у каждой одинаковый: пятна
   цвета, ядро (светящееся или тёмное), база. Ядро — то, чего не хватало
   вычисленному мешу: без него карточка ровная, как заливка. */

/* ТЁПЛОЕ — первый «Watch». */
html.os [data-pal="balance"]{--pal:
  radial-gradient(70% 55% at 18% 10%,#ff8fc2,transparent 70%),
  radial-gradient(62% 52% at 92% 16%,#cf5be8,transparent 70%),
  radial-gradient(56% 46% at 50% 54%,#ff3f90,transparent 72%),
  radial-gradient(92% 62% at 50% 112%,#b0005a,transparent 76%),
  #e81f7c}
html.os [data-pal="sleep"]{--pal:
  radial-gradient(72% 62% at 8% 6%,#f2c350,transparent 70%),
  radial-gradient(70% 62% at 96% 30%,#ef8cb2,transparent 70%),
  radial-gradient(60% 50% at 44% 56%,#f4a578,transparent 72%),
  radial-gradient(92% 62% at 50% 116%,#d8628c,transparent 76%),
  #e7a15e}
/* Тёмное ядро «Enhance Mood» — мягкое и вытянутое по высоте. Круглое и
   плотное оно читалось пятном на карточке, а не глубиной цвета. */
html.os [data-pal="mood"]{--pal:
  radial-gradient(34% 58% at 50% 54%,rgb(78 4 40 / .92) 0%,rgb(96 6 50 / .5) 46%,transparent 82%),
  radial-gradient(82% 62% at 12% 4%,#ff519a,transparent 70%),
  radial-gradient(82% 62% at 92% 96%,#e22b82,transparent 70%),
  #c4135f}
html.os [data-pal="skin"]{--pal:
  radial-gradient(72% 62% at 88% 8%,#ff7d22,transparent 70%),
  radial-gradient(60% 50% at 56% 44%,#ff4b2b,transparent 72%),
  radial-gradient(82% 72% at 0% 102%,#6b2dd6,transparent 70%),
  radial-gradient(60% 52% at 102% 100%,#ff9b3b,transparent 70%),
  #f0492c}
html.os [data-pal="redlight"]{--pal:
  radial-gradient(92% 82% at 8% 0%,#81709c,transparent 70%),
  radial-gradient(82% 82% at 102% 104%,#c47391,transparent 70%),
  #5e4c79}
html.os [data-pal="tide"]{--pal:
  radial-gradient(44% 72% at 72% 56%,#2237d2 0%,rgb(34 55 210 / .62) 46%,transparent 76%),
  radial-gradient(72% 92% at 0% 50%,#ff6b1a,transparent 70%),
  radial-gradient(62% 62% at 100% 0%,#ff5a2b,transparent 70%),
  #f25a2a}

/* ФИОЛЕТОВОЕ — «Ring», «Data», «Menu». */
html.os [data-pal="ring"]{--pal:
  radial-gradient(44% 40% at 50% 50%,#6a1fd6 0%,rgb(106 31 214 / .72) 36%,transparent 74%),
  radial-gradient(92% 82% at 0% 0%,#e5caff,transparent 66%),
  radial-gradient(92% 82% at 100% 100%,#dab8ff,transparent 66%),
  #b27af5}
html.os [data-pal="data"]{--pal:
  radial-gradient(60% 46% at 52% 52%,#d65bc9,transparent 72%),
  linear-gradient(180deg,#7a2596 0%,#b73cb0 48%,#ee92d6 100%)}
html.os [data-pal="ultra"]{--pal:
  radial-gradient(70% 60% at 80% 12%,#5a3cf0,transparent 70%),
  radial-gradient(60% 50% at 40% 60%,#3b64f5,transparent 72%),
  linear-gradient(170deg,#1230c4,#2447dc)}
html.os [data-pal="coral"]{--pal:
  radial-gradient(70% 62% at 12% 8%,#f08aa0,transparent 70%),
  radial-gradient(70% 62% at 96% 96%,#f4ae8e,transparent 70%),
  #e06f79}
html.os [data-pal="aura"]{--pal:
  radial-gradient(60% 52% at 96% 6%,#6ed8a8,transparent 70%),
  radial-gradient(70% 60% at 4% 30%,#7a2df2,transparent 70%),
  radial-gradient(70% 60% at 80% 96%,#f07ac8,transparent 70%),
  radial-gradient(52% 44% at 30% 96%,#f26d3c,transparent 70%),
  #a14be8}
html.os [data-pal="bloom"]{--pal:
  radial-gradient(46% 40% at 50% 46%,#fff5fa,transparent 72%),
  radial-gradient(68% 58% at 50% 46%,#e6d6ff,transparent 78%),
  radial-gradient(100% 80% at 0% 100%,#f58cba,transparent 70%),
  radial-gradient(100% 80% at 100% 100%,#f76ea6,transparent 70%),
  #f6b4cf}

/* ХОЛОДНОЕ — второй «Watch»: светлые карточки, текст и точки чёрные. */
html.os [data-pal="weather"]{--pal:
  radial-gradient(72% 62% at 4% 4%,#2db5a5,transparent 70%),
  radial-gradient(72% 62% at 100% 20%,#f4a47b,transparent 70%),
  linear-gradient(180deg,rgb(255 255 255 / 0) 40%,#fbfbfc 92%),
  #dfe7ea}
html.os [data-pal="deep"]{--pal:
  radial-gradient(82% 58% at 50% 0%,#1535c4,transparent 78%),
  radial-gradient(60% 50% at 50% 60%,#6f8ef2,transparent 76%),
  linear-gradient(180deg,#2446d2 0%,#8fa8f5 100%)}
html.os [data-pal="silver"]{--pal:
  radial-gradient(70% 60% at 10% 6%,#8d9bb2,transparent 70%),
  radial-gradient(48% 42% at 52% 52%,#ffffff,transparent 74%),
  radial-gradient(70% 60% at 96% 10%,#c9d3df,transparent 70%),
  #e9edf2}
html.os [data-pal="spectrum"]{--pal:
  linear-gradient(90deg,rgb(255 214 64 / .0),rgb(255 214 64 / .55) 22%,rgb(118 214 140 / .5) 42%,
    rgb(96 150 255 / .55) 64%,rgb(255 128 200 / .5) 86%,rgb(255 128 200 / 0)) 0 86% / 100% 22% no-repeat,
  radial-gradient(80% 60% at 70% 30%,#b8ccf3,transparent 72%),
  linear-gradient(180deg,#f7f8fb,#dfe8f8)}

/* СВЕЖЕЕ — «Wind», «Meetings», жёлтая пилюля. */
html.os [data-pal="wind"]{--pal:
  radial-gradient(90% 70% at 50% 0%,#82e4f2,transparent 72%),
  linear-gradient(180deg,#9ae8f0 0%,#bff08c 62%,#d8f67a 100%)}
html.os [data-pal="meet"]{--pal:
  radial-gradient(52% 44% at 96% 4%,#ff8a5a,transparent 70%),
  radial-gradient(60% 50% at 70% 10%,#e05cc8,transparent 70%),
  linear-gradient(170deg,#1f40ff 0%,#0b20ae 100%)}
html.os [data-pal="lemon"]{--pal:
  radial-gradient(60% 50% at 30% 30%,#fbff9a,transparent 72%),
  linear-gradient(160deg,#eef65c,#c6e63a)}
html.os [data-pal="mint"]{--pal:
  radial-gradient(70% 60% at 20% 10%,#c2f7d2,transparent 70%),
  linear-gradient(170deg,#a2f0bc,#56c7a0)}
html.os [data-pal="aqua"]{--pal:
  radial-gradient(70% 60% at 20% 10%,#b8f7ee,transparent 70%),
  linear-gradient(170deg,#98f1e4,#68c9f2)}
html.os [data-pal="night"]{--pal:
  radial-gradient(70% 50% at 50% 110%,rgb(214 255 58 / .5),transparent 72%),
  linear-gradient(170deg,#23242a,#3a3b45)}

/* Тёмные чернила — у светлых палитр: белый текст на них не читается,
   и референс там пишет чёрным («Weather Today», «Light Variability»).
   Какая палитра светлая, решает client_os.js — атрибутом data-ink. */
html.os [data-ink="dark"]{color:var(--os-ink)}
html.os [data-ink="dark"] .os-dots{filter:none}
html.os [data-ink="dark"] .os-inst .y{stroke:var(--os-yellow-deep)}
html.os [data-ink="dark"] .os-inst .y.fill{fill:var(--os-yellow-deep)}

/* ── Низ: точки страниц и главное действие ────────────────────────── */
html.os .dock{background:none}
html.os .dock::before{content:'';position:absolute;inset:-34px 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgb(241 241 242 / 0),var(--os-page) 58%)}
html.os .swipe .grab{display:none}
html.os .swipe .pgdot{width:5px;height:5px;border-radius:3px;background:#c7c7cc;
  transition:width .32s var(--os-ease),background .32s var(--os-ease)}
html.os .swipe .pgdot.on{width:18px;background:#1c1c1e}
html.os .dock-sign a{color:rgb(11 11 12 / .5)}
html.os .dock-sign > i{background:rgb(11 11 12 / .25)}
html.os .nexo-mark b{color:rgb(11 11 12 / .82)}

/* ГЛЯНЦЕВАЯ КАПСУЛА — МАТЕРИАЛ КНОПКИ, ЦВЕТ ВЫБРАЛ ВЛАДЕЛЕЦ.

   Здесь был алый с малиновым — цвет, снятый с кнопки «Save» на
   референсе. Материал оттуда взять стоило: блик по верхней кромке,
   потемнение к низу, тёплая тень. А цвет — нет. Владелец: «почему кнопка
   записаться красная, а не из выбранного цвета».

   Он прав вдвойне: это самая заметная кнопка витрины, и она одна
   игнорировала оформление, которое он выбирал. Берём `--cta` и `--cta2`
   — те же, из которых собрана вся витрина, — и подпись `--cta-ink`:
   на светлом оформлении она тёмная, на глубоком белая, и это уже
   посчитано там же, где сам цвет. */
html.os .dock .pill.os-save{
  height:58px;border-radius:999px;border:0;color:var(--cta-ink);
  font-size:17px;font-weight:600;letter-spacing:-.02em;
  background:
    radial-gradient(120% 90% at 50% -20%,rgb(255 255 255 / .34),transparent 55%),
    linear-gradient(180deg,hsl(var(--cta2)) 0%,hsl(var(--cta)) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .38),
    inset 0 -10px 18px rgb(0 0 0 / .18),
    0 14px 30px -12px hsl(var(--cta) / .55);
  transition:transform .3s var(--os-ease),box-shadow .3s var(--os-ease);
}
html.os .dock .pill.os-save::before,html.os .dock .pill.os-save::after{display:none}
html.os .dock .pill.os-save:active{transform:scale(.97)}
html.os .dock .pill.os-save #dockSub{color:var(--cta-ink);opacity:.74;font-weight:500;font-size:14px}

/* ── Движение ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html.os .card,html.os .dock .pill.os-save,html.os .swipe .pgdot{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   СЛОЙ 2 — ВНУТРЕННИЕ ЭКРАНЫ.

   Все экраны витрины собраны из одних и тех же деталей: шапка с двумя
   кнопками, ярлык-заголовок, секции-строки, пилюли выбора, плитки
   каталога, большая карточка услуги. Перерисовав детали под референс,
   мы меняем все экраны разом — и дальше доводим каждый отдельно.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Шапка экрана: круги, как «×» внизу референса ───────────────────── */
html.os .topbar{padding:10px 4px 6px;margin:0 -8px;padding-left:12px;padding-right:12px;
  background:linear-gradient(180deg,var(--os-page) 70%,rgb(241 241 242 / 0))}
html.os .tb,html.os .tb.back,html.os .tb.mark{width:44px;height:44px;border-radius:50%;
  background:#e6e6e8;color:var(--os-ink);backdrop-filter:none;
  box-shadow:none!important;transition:transform .25s var(--os-ease)}
html.os .tb:active{transform:scale(.92)}
html.os .tb.back svg{width:20px;height:20px;stroke-width:2.2}
html.os .tb.mark svg{width:17px;height:17px}
html.os .topbar-spacer{width:44px;height:44px}

/* Ярлык экрана — заголовок, как «Analytics»: одно крупное жирное
   слово, без пилюли и без цветной точки. */
html.os .tag{display:block;margin:6px 12px 14px;padding:0;background:none;
  box-shadow:none!important;backdrop-filter:none;border-radius:0;
  font-size:34px;line-height:1.04;font-weight:700;letter-spacing:-.035em;color:var(--os-ink)}
html.os .tag i{display:none}

/* ── Секции-строки: светлые карточки ─────────────────────────────────
   На сером поле референса светлые элементы — белые с мягкой тенью, а не
   матовое стекло: под ними нет цветного меша, который стеклу нечего
   показывать. */
html.os .sheetlist{gap:8px}
html.os .sheetlist .row{background:#fff;border-radius:22px;padding:16px 18px;
  backdrop-filter:none;color:var(--os-ink);
  box-shadow:0 1px 0 rgb(255 255 255 / .9) inset,0 10px 26px -18px rgb(0 0 0 / .22)!important}
html.os .sheetlist .row b{font-size:17px;font-weight:700;letter-spacing:-.025em}
html.os .sheetlist .row span{font-size:15px;color:rgb(11 11 12 / .5);letter-spacing:-.01em}
html.os .sheetlist .row.col{gap:6px}
/* ПОЛЯ ФОРМЫ — СВЕТЛЫЕ, КАК КАРТОЧКА, НА КОТОРОЙ ОНИ СТОЯТ.
   Цвет поля брался из стекла обоев, а карточки этот слой красит белым:
   на тёмных обоях выходили графитовые плиты на белом листе — владелец
   прислал снимок с «Перезвоним, когда освободится». */
html.os .sheetlist .row .gfld{gap:5px}
html.os .sheetlist .row .gfld > span{font-size:13px;font-weight:500;color:rgb(11 11 12 / .5)}
html.os .sheetlist .row .gfld > span small{font-weight:400;opacity:.8}
html.os .sheetlist .row .gfld input{background:#f3f3f5;color:var(--os-ink);border-radius:14px;
  padding:13px 14px;font-size:16px;box-shadow:inset 0 0 0 1px rgb(11 11 12 / .06);
  -webkit-text-fill-color:var(--os-ink)}
html.os .sheetlist .row .gfld input::placeholder{color:rgb(11 11 12 / .32);
  -webkit-text-fill-color:rgb(11 11 12 / .32)}
html.os .sheetlist .row .gfld input:focus{background:#fff;
  box-shadow:inset 0 0 0 1.5px rgb(11 11 12 / .55)}
html.os .sheetlist .row .quietlink{color:rgb(11 11 12 / .55);
  text-decoration-color:rgb(11 11 12 / .2)}
html.os .sheetlist .row .gremember{color:var(--os-ink)}
html.os .sheetlist .row .gremember small{color:rgb(11 11 12 / .45)}
html.os .sheetlist .row .svc-total{color:var(--os-ink);font-weight:600}
html.os .sheetlist .row.nudge{animation:osNudge .9s var(--os-ease)}
@keyframes osNudge{0%{box-shadow:0 0 0 0 rgb(11 11 12 / .0)}
  35%{box-shadow:0 0 0 3px rgb(11 11 12 / .22)}100%{box-shadow:0 0 0 0 rgb(11 11 12 / 0)}}
html.os .sheetlist .row.sub-head{background:none;box-shadow:none!important;padding:14px 8px 2px}
html.os .sheetlist .row.sub-head b{font-size:13px;letter-spacing:.02em;color:rgb(11 11 12 / .42)}

/* ── Пилюли выбора ────────────────────────────────────────────────────
   Выбранное — чёрным, как обведённый «Thu» в строке дней «Alarm»:
   на сером поле это единственный контраст, который виден боковым
   зрением. */
html.os .chips{gap:8px;margin-top:10px}
html.os .chip{min-height:42px;padding:0 16px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--os-ink);
  background:#efeff1;backdrop-filter:none;box-shadow:none!important;
  transition:transform .25s var(--os-ease),background .2s,color .2s}
html.os .chip.on{background:var(--os-ink);color:#fff}
html.os .chips + .mosaic{margin-top:14px}
/* Вкладки над каталогом — отдельные пилюли у самого заголовка. */
html.os #catTabs{margin:0 4px 0}

/* ── Каталог: ровная сетка карточек ──────────────────────────────────
   «Кладка» разной высоты читалась как свалка. Референс держит ровную
   сетку: одна пропорция, один ритм. */
html.os .mosaic{gap:var(--os-gap);align-items:stretch}
html.os .mosaic .tile{aspect-ratio:1/1.12;border-radius:var(--os-r);color:#fff;
  background:var(--pal,#2a2a2e);isolation:isolate;
  display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 14px 26px -18px rgb(0 0 0 / .45);
  transition:transform .42s var(--os-ease)}
html.os .mosaic .tile:active{transform:scale(.965)}
html.os .mosaic .tile::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / 0) 34%)}
html.os .mosaic .tile.plain > :not(.pick):not(.badge){position:relative;z-index:1}
html.os .mosaic .tile .pick,html.os .mosaic .tile .badge{position:absolute;z-index:3}
html.os .mosaic .tile .spec{display:none}
/* Название и длительность — наверху, в два тона одного размера. */
html.os .mosaic .tile .cap{position:relative;inset:auto;padding:14px 48px 0 14px;
  background:none;order:0}
html.os .mosaic .tile .nm{font-size:15px;line-height:1.12;font-weight:600;
  letter-spacing:-.022em;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.os .mosaic .tile .lasts{font-size:15px;line-height:1.12;font-weight:600;
  letter-spacing:-.022em;opacity:.55;margin-top:1px}
/* Цена — посередине, точками. */
html.os .mosaic .tile .pr{margin:auto 0 0;padding:0 14px;opacity:1;
  display:flex;flex-direction:column;align-items:center;gap:5px;font-size:30px;line-height:1}
html.os .mosaic .tile .pr .os-word{font-size:12px;opacity:.7}
html.os .mosaic .tile .pr .old{order:3;font-size:12px;font-weight:500;opacity:.6;margin:0}
html.os .os-tile-meter{margin:10px 14px 14px}
html.os .os-tile-meter .os-inst{height:22px}
html.os .mosaic .tile:not(:has(.os-tile-meter)) .pr{margin-bottom:auto}
/* Фото — на всю карточку, текст держится на затемнении сверху и снизу. */
html.os .mosaic .tile:not(.plain) img{position:absolute;inset:0;z-index:0}
html.os .mosaic .tile:not(.plain)::after{content:'';position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgb(0 0 0 / .45),rgb(0 0 0 / 0) 36%,rgb(0 0 0 / 0) 56%,rgb(0 0 0 / .55))}
html.os .mosaic .tile:not(.plain) > :not(img):not(.pick):not(.badge){position:relative;z-index:1}

/* «+» — стеклянный круг, выбрано — белый круг с галочкой, как «✓» внизу
   референса. Нажатие по нему снова снимает выбор: раньше выбранную
   плитку нельзя было отменить на месте, плюс исчезал. */
html.os .mosaic .tile .pick{top:10px;right:10px;width:32px;height:32px;font-size:0;
  background:rgb(255 255 255 / .22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .42)}
html.os .mosaic .tile .pick::before{content:'';width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
html.os .mosaic .tile.on .pick{display:grid;background:#fff;color:var(--os-ink);
  box-shadow:0 6px 14px -6px rgb(0 0 0 / .45)}
html.os .mosaic .tile.on .pick::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4l3.1 3.1L12 3.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.4l3.1 3.1L12 3.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.os .mosaic .tile.on{outline:none;box-shadow:inset 0 0 0 2px rgb(255 255 255 / .85),
  0 14px 26px -16px rgb(0 0 0 / .5)}
html.os .mosaic .tile.on::after{display:none}
/* Номер выбора — у позиций без «+» (товары): там он единственная метка. */
html.os .mosaic .tile .badge{top:10px;right:10px;height:26px;min-width:26px;
  background:#fff;color:var(--os-ink);font-size:13px;font-weight:700;justify-content:center}
html.os .mosaic .tile:has(.pick) .badge{display:none}

/* ── Карточка услуги: «Weather Today» с колодой ───────────────────── */
html.os .os-deck{position:relative;margin:18px 0 12px;padding-top:0}
html.os .os-deck > i{position:absolute;left:10%;right:10%;height:40px;border-radius:22px;
  background:var(--pal);top:-14px;opacity:.9;transform:scale(.92)}
html.os .os-deck > i + i{left:18%;right:18%;top:-24px;opacity:.7;transform:scale(.84)}
html.os .hero-photo{position:relative;z-index:1;aspect-ratio:1/1.08;border-radius:var(--os-r-big);
  margin:0;background:var(--pal,#2a2a2e);color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 24px 40px -26px rgb(0 0 0 / .5)}
html.os .hero-photo.plain::after{background:linear-gradient(180deg,rgb(255 255 255 / .18),rgb(255 255 255 / 0) 30%)}
html.os .hero-photo .hero-cap{top:20px;bottom:auto;left:20px;right:20px;color:inherit}
html.os .hero-photo .hero-cap h2{font-size:24px;font-weight:700;letter-spacing:-.03em;
  line-height:1.1;text-shadow:none}
html.os .os-hero-price{position:absolute;left:0;right:0;top:50%;transform:translateY(-38%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:64px;line-height:1;margin:0}
html.os .os-hero-price .os-unit{font-size:20px}
html.os .os-hero-price .old{font-size:15px;opacity:.6;margin:0}
html.os .hero-photo:not(.plain) .os-hero-price{color:#fff}

/* ── Навигация: заголовок наверху, «назад» внизу ────────────────────── */
html.os .tb.mark,html.os .topbar-spacer{display:none}
html.os .topbar.os-bare:not(:has(h1,h2,.tb:not(.back))){display:none}
html.os .dock .dockrow{display:flex;align-items:center;gap:10px}
html.os .dock .tb.os-back{flex:none;width:58px;height:58px;border-radius:50%;
  background:#e4e4e7;color:var(--os-ink);border:0;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),0 10px 22px -14px rgb(0 0 0 / .3)!important}
html.os .dock .tb.os-back svg{width:22px;height:22px}
html.os .dock .dockrow .pill.os-save{flex:1;min-width:0}
/* Без верхней панели заголовок экрана встаёт на её место. */
html.os .app > .tag:first-child,html.os .topbar.os-bare + .tag{margin-top:18px}

/* ── Плитка каталога: один предмет в центре ─────────────────────────
   Название и длительность — 14 pt, как подписи на «Watch»; цена точками
   меньше и тоньше: четыре цифры крупным кеглем занимали всю плитку. */
html.os .mosaic .tile .nm,html.os .mosaic .tile .lasts{font-size:14px}
html.os .mosaic .tile .os-was{display:block;margin-top:3px;font-size:12px;font-weight:500;
  opacity:.55;text-decoration:line-through}
html.os .mosaic .tile .pr{font-size:26px}
html.os .mosaic .tile .pick{width:28px;height:28px;top:10px;right:10px}
html.os .mosaic .tile .pick::before{width:12px;height:12px}

/* ── Листание фото: карусель «Data» ─────────────────────────────────
   Карточка с лентой перестаёт быть рамкой: кадры сами — карточки, и
   соседние выходят за края, повёрнутые к центру. */
html.os .hero-photo.os-has-flow{aspect-ratio:auto;overflow:visible;background:none;
  box-shadow:none;margin:6px -8px 12px;border-radius:0}
html.os .hero-photo.os-has-flow::after{display:none}
html.os .os-flow{position:relative}
html.os .os-flow .shots-rail{display:flex;gap:0;overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 17% 14px;
  -webkit-overflow-scrolling:touch}
html.os .os-flow .shots-rail::-webkit-scrollbar{display:none}
html.os .os-flow .shots-rail img{flex:0 0 66%;aspect-ratio:1/1.12;object-fit:cover;
  border-radius:var(--os-r-big);scroll-snap-align:center;margin:0;
  box-shadow:0 22px 36px -24px rgb(0 0 0 / .55);will-change:transform;
  transition:transform .08s linear,opacity .08s linear}
html.os .os-flow .shots-dots{position:static;display:flex;justify-content:center;gap:5px;margin-top:2px}
html.os .os-flow .shots-dots i{width:5px;height:5px;border-radius:3px;background:#c7c7cc;
  transition:width .3s var(--os-ease),background .3s var(--os-ease)}
html.os .os-flow .shots-dots i.on{width:18px;background:#1c1c1e}
/* Название — над каруселью, крупно, как заголовок экрана. */
html.os .hero-photo.os-has-flow .hero-cap{position:static;padding:0 20px 8px;color:var(--os-ink)}
html.os .hero-photo.os-has-flow .hero-cap h2{font-size:30px;color:var(--os-ink)}
html.os .hero-photo.os-has-flow{display:flex;flex-direction:column}
html.os .hero-photo.os-has-flow .hero-cap{order:-1}
html.os .hero-photo.os-has-flow .os-hero-price{position:static;transform:none;
  color:var(--os-ink);font-size:44px;margin:10px 0 4px}

/* ── Запись: карточка «Alarm» ───────────────────────────────────────
   Крупное время обычным шрифтом, а не точками — как «09:50» у «Alarm»:
   точки хороши для числа-метки, а время записи читают и сверяют. */
html.os .os-alarm{position:relative;overflow:hidden;border-radius:var(--os-r-big);
  padding:18px 20px 16px;margin-bottom:4px;color:var(--os-ink);background:var(--pal);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),0 22px 40px -28px rgb(200 0 90 / .55)}
html.os .os-alarm-h{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em}
html.os .os-alarm-time{display:block;margin:10px 0 2px;text-align:center;
  font-size:72px;line-height:1;font-weight:500;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;transition:opacity .25s var(--os-ease)}
html.os .os-alarm-time.empty{opacity:.22}
html.os .os-alarm-line{display:block;text-align:center;font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:rgb(11 11 12 / .55)}
html.os .os-barcode{display:block;width:100%;height:78px;margin:14px 0 2px}
html.os .os-barcode path{vector-effect:non-scaling-stroke}
html.os .os-barcode .bc-bg{stroke:rgb(11 11 12 / .16);stroke-width:1}
html.os .os-barcode .bc-free{stroke:var(--os-ink);stroke-width:2}
html.os .os-barcode .bc-on{stroke:var(--os-red);stroke-width:3}
html.os .os-barcode text{font-size:9px;fill:rgb(11 11 12 / .45);text-anchor:middle;
  font-family:var(--sf)}
html.os .os-alarm-foot{display:block;text-align:right;font-size:12px;font-weight:500;
  color:rgb(11 11 12 / .45)}

/* Дни — кружками недели, как «Mon Tue (Thu) Fri»: день недели мелко,
   число крупно, выбранный — залит. */
html.os .chip.os-daychip{min-height:0;width:52px;height:64px;padding:0;border-radius:26px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
html.os .chip.os-daychip small{font-size:12px;font-weight:600;opacity:.5;letter-spacing:0}
html.os .chip.os-daychip b{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1}
html.os .chip.os-daychip.on small{opacity:.7}
/* Время — крупнее и цифрами одной ширины: «14:30» и «16:00» стоят ровно. */
html.os .chip[data-slot]{min-width:78px;justify-content:center;font-size:17px;
  font-variant-numeric:tabular-nums}

/* ── Мастера: лента «Ring» ─────────────────────────────────────────── */
html.os .sheetlist.masters-list.os-rail{flex-direction:row;gap:0;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;margin:4px -8px 0;padding:10px 17% 18px;
  /* Без растяжения по высоте ряда. Safari на iPhone считал высоту ряда по
     содержимому, не глядя на пропорцию, и растягивал карточку до неё:
     выходила плоская полоса с обрезанным фото — владелец прислал снимок.
     Высоту карточке ставит ещё и client_os.js числом. */
  align-items:flex-start}
html.os .sheetlist.masters-list.os-rail::-webkit-scrollbar{display:none}
html.os .os-rail .master-row{flex:0 0 66%;aspect-ratio:1/1.18;scroll-snap-align:center;
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;gap:0;padding:18px 18px 16px;border-radius:var(--os-r-big);
  background:var(--pal)!important;color:#fff;will-change:transform;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 26px 40px -26px rgb(0 0 0 / .55)!important}
html.os .os-rail .master-row[data-ink="dark"]{color:var(--os-ink)}
html.os .os-rail .master-row::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / 0) 34%)}
html.os .os-rail .master-row__body{order:-1;display:flex;flex-direction:column;gap:1px;
  position:relative;z-index:1}
html.os .os-rail .master-row__body b{font-size:17px!important;color:inherit}
html.os .os-rail .master-row__body span{font-size:15px!important;font-weight:600;
  color:inherit!important;opacity:.55}
html.os .os-rail .master-row__go{display:none}
/* Лицо — крупно в середине: фото или буква в стеклянном круге. */
html.os .os-rail .master-row > :is(img,.avatar,.master-avatar,i,span:not(.master-row__body):not(.os-master-price):not(.master-row__go)){
  position:relative;z-index:1;margin:auto auto 0;width:44%;height:auto;aspect-ratio:1;
  border-radius:50%;font-size:40px;font-weight:600;display:grid;place-items:center;
  background:rgb(255 255 255 / .2);color:inherit;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .45),0 14px 26px -14px rgb(0 0 0 / .45);
  object-fit:cover}
html.os .os-master-price{position:relative;z-index:1;margin:14px auto 0;display:flex;
  flex-direction:column;align-items:center;gap:5px;font-size:26px;line-height:1}
html.os .os-master-price .os-word{font-size:12px;opacity:.7}

/* Дуга-шкала под лентой: деления по окружности, красная метка — текущий. */
html.os .os-dial{position:relative;margin:-6px 0 0;text-align:center}
html.os .os-dial-arc{display:block;width:100%;max-width:360px;height:auto;margin:0 auto}
html.os .os-dial-arc .ticks{transform-origin:160px 160px;transition:transform .12s linear}
html.os .os-dial-arc .ticks path{stroke:#c9c9ce;stroke-width:1.1;stroke-linecap:round}
html.os .os-dial-arc .index{stroke:var(--os-red);stroke-width:2.4;stroke-linecap:round}
html.os .os-dial-row{display:flex;align-items:center;justify-content:center;gap:36px;
  margin-top:-58px}
html.os .os-dial-btn{width:44px;height:44px;border-radius:50%;border:0;display:grid;
  place-items:center;background:none;color:var(--os-ink);cursor:pointer}
html.os .os-dial-btn svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;
  stroke-width:2;stroke-linejoin:round}
html.os .os-dial-btn:active{transform:scale(.88)}
html.os .os-dial-count{min-width:40px;font-size:13px;font-weight:600;
  color:rgb(11 11 12 / .45);font-variant-numeric:tabular-nums}

/* ── Мои записи: визит — карточка «Alarm» ─────────────────────────── */
html.os .sheetlist .row.os-visit{display:flex;flex-direction:column;align-items:stretch;
  gap:0;padding:18px 20px 16px;border-radius:var(--os-r-big);background:var(--pal)!important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),0 22px 40px -28px rgb(200 0 90 / .5)!important}
html.os .os-visit-h{display:flex;justify-content:space-between;align-items:center;
  font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--os-ink)}
html.os .os-visit-h i{font-style:normal;font-size:12px;font-weight:600;padding:5px 10px;
  border-radius:999px;background:rgb(255 255 255 / .55);color:var(--os-ink)}
html.os .os-visit-time{display:block;margin:8px 0 0;text-align:center;font-size:64px!important;
  line-height:1;font-weight:500!important;letter-spacing:-.045em!important;
  font-variant-numeric:tabular-nums;color:var(--os-ink)}
html.os .os-visit-day{display:block;text-align:center;font-size:15px!important;font-weight:600;
  color:rgb(11 11 12 / .55)!important;margin-top:4px}
html.os .os-visit-acts{display:flex;justify-content:center;gap:8px;margin-top:14px}
html.os .os-visit-acts .mini-act{min-height:40px;padding:0 18px;border-radius:999px;border:0;
  font-size:15px;font-weight:600;background:rgb(255 255 255 / .6);color:var(--os-ink);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .8)}
html.os .os-visit-acts .mini-act.yes{background:var(--os-ink);color:#fff;box-shadow:none}

/* Абонемент — светлой карточкой с крупным остатком, как «Moon 22 Mon». */
html.os .sheetlist .row.pass .pass-count{font-size:34px;font-weight:700;letter-spacing:-.035em}
html.os .sheetlist .row.pass .pass-count small{font-size:15px;color:rgb(11 11 12 / .45)}

/* Цвет текста карточки мастера — явно: старое правило строк списка
   красило имя и подпись серым, и на цветной карточке они гасли. */
html.os .os-rail .master-row:not([data-ink="dark"]),
html.os .os-rail .master-row:not([data-ink="dark"]) *{color:#fff!important}
html.os .os-rail .master-row[data-ink="dark"],
html.os .os-rail .master-row[data-ink="dark"] *{color:var(--os-ink)!important}
/* Мастер — главное на экране: карточка крупнее. */
html.os .os-rail .master-row{flex-basis:70%;aspect-ratio:1/1.3}
html.os .sheetlist.masters-list.os-rail{padding-left:15%;padding-right:15%}

/* ── Оценка: карточка «Weather Today» ──────────────────────────────── */
html.os .bigstat.os-statcard{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:0 0 4px;padding:26px 20px 20px;border-radius:var(--os-r-big);background:var(--pal);
  color:var(--os-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),0 22px 40px -28px rgb(200 0 90 / .5)}
html.os .bigstat.os-statcard b.os-num{font-size:76px;line-height:1}
html.os .bigstat.os-statcard .os-stars{height:20px}
html.os .bigstat.os-statcard > span:last-child{font-size:15px!important;font-weight:600;
  color:rgb(11 11 12 / .55)!important}

/* ── Абонемент: карточка «Sleep Quality» ──────────────────────────── */
html.os .sheetlist .row.pass.os-passcard{background:var(--pal)!important;color:#fff;
  padding:18px 20px;border-radius:var(--os-r-big);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .25),0 22px 40px -26px rgb(0 0 0 / .45)!important}
html.os .sheetlist .row.pass.os-passcard[data-ink="dark"]{color:var(--os-ink)}
html.os .sheetlist .row.pass.os-passcard :is(b,span,small,.pass-count){color:inherit!important}
html.os .sheetlist .row.pass.os-passcard .pass-head span{opacity:.6}
html.os .sheetlist .row.pass.os-passcard .pass-count{font-size:44px;margin:10px 0 2px}
html.os .sheetlist .row.pass.os-passcard > span{opacity:.62}
html.os .sheetlist .row.pass.os-passcard :is(.pass-buy,button){margin-top:12px;min-height:46px;
  border-radius:999px;border:0;font-size:15px;font-weight:600;background:#fff;color:var(--os-ink)!important}

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

   Роль «где я» и «домой» в этом облике играет серый круг рядом с главной
   кнопкой внизу, а знак салона — в самой обложке. Значит шапке остаётся
   только занимать первые пятьдесят шесть точек экрана.

   Прячем СЛОЕМ, а не правкой разметки: не доехал слой — сайт прежний и с
   шапкой. Ссылка «В Telegram» жила тут же; если она понадобится, ей место
   в обложке, рядом с «узнать меня», а не отдельной полосой. */
html.os .sitebar{display:none}