/* ══════════════════════════════════════════════════════════════
   MASTORY v2 — слой представления

   Тот же продукт и те же данные, что в v1: app.js и i18n.js
   переиспользуются без правок. Здесь только вид и движение.

   Мотив: барберский столб. В v1 это была статичная полоса,
   здесь она вращается по-настоящему (сдвиг фона), потому что
   это единственный элемент, который в реальном барбершопе
   действительно движется.
   ══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Bebas';
  src:url(../assets/bebas-sub.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* Поверхности. Тёплый нейтральный, не чистый чёрный: на OLED
     чистый #000 даёт резкую границу с интерфейсом Telegram. */
  --bg:#0A0A0B;
  --s1:#0F0F12;
  --s2:#151519;
  --s3:#1C1C21;
  --s4:#24242A;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12);
  --line3:rgba(255,255,255,.18);

  /* Бренд. Красный из логотипа + осветлённый вариант: #D71F27
     на тёмном фоне не дотягивает по контрасту для мелкого текста. */
  --red:#D71F27;
  --red-lift:#FF5561;
  --red-deep:#8E1219;
  --blue:#20428F;
  --blue-lift:#7B9AF5;

  /* Текст. Костяной белый вместо чистого: тёплый оттенок
     сочетается с кожей на фотографиях мастеров. */
  --fg:#F4F1EC;
  --fg2:#9C9AA4;
  --fg3:#66646E;

  --ok:#3BD16F;
  --warn:#E8B33A;

  --d:'Bebas','Arial Narrow',Impact,sans-serif;
  --b:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;

  /* Движение. Значения из таблицы кривых, не выдуманные. */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-io:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);

  --t-press:130ms;
  --t-fast:180ms;
  --t-ui:240ms;
  --t-sheet:420ms;

  --pad:20px;
  --nav-h:calc(64px + env(safe-area-inset-bottom,0px));

  /* Отдельные токены для того, что нельзя просто инвертировать:
     подсветка нажатия, блик, подложка навигации, тени и тонировка
     фотографий. На светлой теме у каждого своё значение. */
  --press:var(--press);
  --inset:rgba(255,255,255,.05);
  --nav-bg:rgba(12,12,14,.86);
  --chip-bg:rgba(10,10,11,.72);
  --sheet-shadow:var(--sheet-shadow);
  --card-shadow:var(--card-shadow);
  --toast-bg:rgba(30,30,35,.95);
  --photo-bg:#0B0B0D;
  --photo-filter:var(--photo-filter);
  --photo-scrim:linear-gradient(to top,rgba(15,15,18,.72),rgba(15,15,18,.06) 52%);
  --scrim-mid:rgba(15,15,18,.55);
  --on-accent:#fff;
}

/* ══ светлая тема ══
   Не инверсия тёмной: --red-lift был осветлён под тёмный фон и на
   белом теряет контраст, поэтому здесь он наоборот темнее бренда.
   Зелёный и жёлтый тоже затемнены — в исходном виде они на белом
   почти не читаются. */
:root[data-theme="light"]{
  /* Прохладный графитовый нейтральный, а не тёплая бумага.
     Кремовый фон вида #F7F5F1 — самый заезженный выбор для «премиум»
     и к тому же давал разницу с белой карточкой в два процента,
     отчего всё сливалось. Барбершоп это хром, плитка и зеркала:
     холодный серый честнее и даёт карточкам подняться. */
  --bg:#E9EBEF;
  --s1:#FFFFFF;
  --s2:#F4F5F8;
  --s3:#E2E5EB;
  --s4:#D3D7DF;
  --line:rgba(18,22,31,.09);
  --line2:rgba(18,22,31,.15);
  --line3:rgba(18,22,31,.24);

  --red:#D71F27;
  --red-lift:#B5141C;
  --red-deep:#8E1219;
  --blue:#20428F;
  --blue-lift:#2B52A8;

  --fg:#12161F;
  --fg2:#525967;
  /* 6B7280, а не светлее: этим цветом набраны подписи и подсказки,
     всё, что бледнее, не проходит 4.5:1 на белом */
  --fg3:#6B7280;

  --ok:#15803D;
  --warn:#A16207;

  --press:rgba(18,22,31,.05);
  --inset:rgba(255,255,255,.9);
  --nav-bg:rgba(255,255,255,.88);
  --chip-bg:rgba(255,255,255,.88);
  /* Тени тонированы в синеву фона: чёрная тень на светлом выглядит грязью */
  --sheet-shadow:0 -18px 44px -18px rgba(18,22,31,.22);
  --card-shadow:0 10px 26px -14px rgba(18,22,31,.24),0 2px 6px -2px rgba(18,22,31,.1);
  --toast-bg:rgba(255,255,255,.97);
  --photo-bg:#DDE1E8;
  --photo-filter:saturate(.8) contrast(1.03);
  --photo-scrim:linear-gradient(to top,rgba(10,14,22,.3),transparent 58%);
  --scrim-mid:rgba(255,255,255,.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);color:var(--fg);
  font:400 15px/1.5 var(--b);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
button,a{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-decoration:none;}
input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;width:100%;}
:focus-visible{outline:2px solid var(--red-lift);outline-offset:2px;border-radius:4px;}
h1,h2,h3{font-weight:400;}

#app{
  position:relative;display:flex;flex-direction:column;
  height:var(--tg-vh,100dvh);
  max-width:460px;margin:0 auto;overflow:hidden;
  background:var(--bg);
  isolation:isolate;
}

/* ── экраны ─────────────────────────────────────────────────── */
.scr{display:none;flex-direction:column;flex:1;min-height:0;}
.scr.on{display:flex;}
.scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.scroll::-webkit-scrollbar{display:none;}
.tail{height:calc(var(--nav-h) + 24px);}

/* вход экрана: короткий подъём, чтобы переход между вкладками
   читался как смена места, а не как перерисовка */
.scr.on .scroll > *{animation:rise 380ms var(--ease-out) backwards;}
.scr.on .scroll > *:nth-child(1){animation-delay:0ms;}
.scr.on .scroll > *:nth-child(2){animation-delay:30ms;}
.scr.on .scroll > *:nth-child(3){animation-delay:60ms;}
.scr.on .scroll > *:nth-child(4){animation-delay:90ms;}
.scr.on .scroll > *:nth-child(5){animation-delay:120ms;}
.scr.on .scroll > *:nth-child(6){animation-delay:150ms;}
@keyframes rise{from{opacity:0;transform:translate3d(0,10px,0);}to{opacity:1;transform:none;}}

/* ── шапка ──────────────────────────────────────────────────── */
/* Имя класса намеренно не .top: уровень мастера приходит из данных
   значением 'top', и generic-класс шапки падал на карточку топ-мастера,
   добавляя ей свой padding. Классы уровней теперь с префиксом t-. */
.hdr{display:flex;align-items:center;gap:14px;padding:16px var(--pad) 13px;}
.grow{flex:1;}
.hdr-logo{display:block;height:22px;color:var(--fg);flex-shrink:0;}
.hdr-logo svg{height:22px;width:auto;aspect-ratio:459/105;display:block;}
.hdr-t{font:700 27px/1 var(--d);letter-spacing:.055em;}

/* переключатель языка: пилюля едет за выбором, а не мигает */
.seg{position:relative;display:flex;background:var(--s2);
  border:1px solid var(--line);border-radius:9px;padding:3px;}
.seg button{position:relative;z-index:1;padding:6px 9px;
  font:700 11px/1 var(--d);letter-spacing:.1em;color:var(--fg3);
  transition:color var(--t-fast) var(--ease-out);border-radius:6px;}
.seg button.on{color:#fff;}
.seg-pill{position:absolute;top:3px;left:3px;height:calc(100% - 6px);
  background:var(--red);border-radius:6px;
  transition:transform var(--t-ui) var(--ease-out),width var(--t-ui) var(--ease-out);
  box-shadow:0 2px 10px rgba(215,31,39,.34);}
/* В профиле тот же переключатель без едущей пилюли: он там один в строке,
   и анимировать нечего. Активную подложку рисуем прямо на кнопке. */
.seg-plain button.on{background:var(--red);}

/* ── барберский столб ───────────────────────────────────────── */
.pole{height:6px;overflow:hidden;flex-shrink:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 40%,rgba(0,0,0,.5));}
.pole i{display:block;height:100%;
  background:repeating-linear-gradient(115deg,
    var(--red) 0 14px,#EFEAE2 14px 28px,var(--blue) 28px 42px,#EFEAE2 42px 56px);
  background-size:120px 100%;
  animation:pole 2.6s linear infinite;}
@keyframes pole{to{background-position:-120px 0;}}

/* ── герой ──────────────────────────────────────────────────── */
.hero{padding:26px var(--pad) 4px;}
.hero-status{display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 10px;border-radius:100px;
  background:var(--s2);border:1px solid var(--line);}
.hero-status .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(59,209,111,.16);}
.hero-status.shut .dot{background:var(--fg3);box-shadow:none;}
.hero-status b{font:700 11px/1 var(--d);letter-spacing:.14em;color:var(--fg);}
.hero-t{margin-top:20px;font:700 clamp(46px,15vw,62px)/.86 var(--d);letter-spacing:.008em;}
.hero-t em{font-style:normal;color:var(--red-lift);}
.hero-s{margin-top:14px;font-size:14.5px;color:var(--fg2);max-width:30ch;line-height:1.5;}

/* ── карточка записи: главное действие ──────────────────────── */
.deck{margin:22px var(--pad) 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,var(--s2),var(--s1) 62%);
  border:1px solid var(--line2);
  box-shadow:0 1px 0 var(--inset) inset,var(--card-shadow);}
.deck-hd{display:flex;align-items:center;gap:12px;padding:16px 17px;
  width:100%;text-align:left;transition:background var(--t-fast) var(--ease-out);}
.deck-hd:active{background:var(--press);}
.deck-ic{width:40px;height:40px;flex-shrink:0;border-radius:11px;
  background:var(--s3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.deck-ic svg{width:18px;height:18px;stroke:var(--fg2);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.deck-ic img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.deck.ready .deck-ic{background:rgba(215,31,39,.14);border-color:rgba(215,31,39,.4);}
.deck.ready .deck-ic svg{stroke:var(--red-lift);}
/* Пока не выбрано ничего, запись — единственное действие на экране.
   Мягкое кольцо ведёт взгляд сюда, а не на ленту акций под карточкой. */
.deck.fresh{border-color:rgba(215,31,39,.3);
  box-shadow:0 1px 0 var(--inset) inset,var(--card-shadow),0 0 0 3px rgba(215,31,39,.09);}
.deck.fresh .deck-ic{background:rgba(215,31,39,.14);border-color:rgba(215,31,39,.4);}
.deck.fresh .deck-ic svg{stroke:var(--red-lift);}
.deck-b{flex:1;min-width:0;}
.deck-t{display:block;font:700 19px/1 var(--d);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.deck-s{display:block;margin-top:6px;font-size:12.5px;color:var(--fg2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.deck-x{width:20px;height:20px;flex-shrink:0;stroke:var(--fg3);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-ui) var(--ease-out);}
.deck-x.up{transform:rotate(180deg);}

/* прогресс заполнения: тонкая линия вместо счётчика «0 / 3» */
.deck-bar{height:2px;background:var(--press);position:relative;overflow:hidden;}
.deck-bar i{position:absolute;inset:0 auto 0 0;width:100%;
  background:linear-gradient(90deg,var(--red-deep),var(--red));
  transform-origin:left;transform:scaleX(0);
  transition:transform 420ms var(--ease-out);}

.steps{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-ui) var(--ease-out);}
.steps.open{grid-template-rows:1fr;}
.steps-in{overflow:hidden;}
.step{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 17px;border-top:1px solid var(--line);
  transition:background var(--t-fast) var(--ease-out);}
.step:active{background:var(--press);}
.step-n{width:26px;height:26px;flex-shrink:0;border-radius:8px;
  background:var(--s3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font:700 12px/1 var(--d);color:var(--fg3);
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);}
.step-n svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;opacity:0;}
.step.done .step-n{background:var(--red);border-color:var(--red);color:#fff;}
.step.done .step-n svg{opacity:1;animation:draw 320ms var(--ease-out) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.step-b{flex:1;min-width:0;}
.step-t{display:block;font-size:14px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.step-s{display:block;margin-top:4px;font-size:11.5px;color:var(--fg3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Звезда и сердце внутри мелкого текста — заливкой, как в карточке
   мастера: это метки, а не контурные иконки действия, и тонкий контур
   на 11px просто рассыпался бы. */
.step-s svg{width:11px;height:11px;fill:var(--warn);stroke:none;vertical-align:-1px;}
.mrow-n svg{width:14px;height:14px;fill:var(--red);stroke:none;vertical-align:-1px;}
.step-x{width:16px;height:16px;flex-shrink:0;stroke:var(--fg3);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

.deck-cta{padding:13px 17px 17px;border-top:1px solid var(--line);}

/* активная запись вместо формы */
.deck.live{border-color:rgba(215,31,39,.34);}
.live-row{display:flex;align-items:center;gap:13px;padding:16px 17px;}
.live-av{width:46px;height:46px;flex-shrink:0;border-radius:12px;overflow:hidden;
  background:var(--s3);display:flex;align-items:center;justify-content:center;}
.live-av img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.live-av svg{width:20px;height:20px;stroke:var(--fg2);fill:none;stroke-width:1.7;}
.live-b{flex:1;min-width:0;}
.live-t{display:block;font:700 22px/1 var(--d);letter-spacing:.04em;}
.live-s{display:block;margin-top:6px;font-size:12px;color:var(--fg2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.live-act{display:flex;gap:8px;padding:0 17px 17px;}

/* ── акции ──────────────────────────────────────────────────── */
/* Лента акций едет сама: карточки не кликабельны, поэтому непрерывное
   движение ничего не ломает, а взгляд цепляет сильнее статичного ряда.
   По краям — растворение, чтобы карточки не обрубались об экран. */
.offers{overflow:hidden;padding:22px 0 2px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);}
.offers-track{display:flex;gap:10px;width:max-content;will-change:transform;
  animation:offers-roll 24s linear infinite;}
.offers:hover .offers-track{animation-play-state:paused;}
/* Дорожка — две одинаковые копии набора. Сдвиг на копию = половина
   дорожки плюс половина зазора между копиями, тогда вторая встаёт
   ровно на место первой и цикл замыкается незаметно. */
@keyframes offers-roll{from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 5px));}}
.offer{flex:0 0 auto;width:150px;
  padding:15px 15px 16px;border-radius:15px;position:relative;overflow:hidden;
  background:var(--s1);border:1px solid var(--line);text-align:left;}
.offer::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,rgba(215,31,39,.16),transparent 62%);}
.offer-p{display:block;font:700 30px/.9 var(--d);color:var(--red-lift);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.offer-t{display:block;margin-top:10px;font-size:12.5px;font-weight:500;}
.offer-s{display:block;margin-top:5px;font-size:11px;color:var(--fg3);line-height:1.4;}

/* ── секции ─────────────────────────────────────────────────── */
.band{padding-top:30px;}
.band-hd{display:flex;align-items:baseline;gap:12px;padding:0 var(--pad) 14px;}
.band-hd h2{font:700 23px/1 var(--d);letter-spacing:.05em;}
.band-n{font:700 12px/1 var(--d);letter-spacing:.12em;color:var(--fg3);
  font-variant-numeric:tabular-nums;margin-left:auto;}

/* ── лента мастеров ─────────────────────────────────────────── */
.rail{display:flex;gap:11px;overflow-x:auto;scrollbar-width:none;
  padding:0 var(--pad) 6px;scroll-snap-type:x mandatory;}
.rail::-webkit-scrollbar{display:none;}
.mc{flex:0 0 auto;width:146px;scroll-snap-align:start;position:relative;
  border-radius:16px;overflow:hidden;background:var(--s1);
  border:1px solid var(--line);text-align:left;display:block;
  transition:transform var(--t-press) var(--ease-out),border-color var(--t-fast) var(--ease-out);}
.mc:active{transform:scale(.972);}
.mc.sel{border-color:var(--red);}
.mc-ph{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--photo-bg);}
.mc-ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;
  filter:saturate(.9) contrast(1.04);}
.mc-ph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--s1) 1%,var(--scrim-mid) 34%,transparent 66%);}
.mc-tier{position:absolute;left:9px;bottom:9px;z-index:2;
  font:700 9px/1 var(--d);letter-spacing:.15em;padding:5px 7px;border-radius:5px;
  background:var(--chip-bg);border:1px solid var(--line2);color:var(--fg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.mc.t-top .mc-tier{background:var(--blue);border-color:transparent;color:#fff;}
.mc-fav{position:absolute;right:8px;top:8px;z-index:3;width:29px;height:29px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--chip-bg);border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform var(--t-press) var(--ease-out);}
.mc-fav:active{transform:scale(.88);}
.mc-fav svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;
  transition:fill var(--t-fast) var(--ease-out),stroke var(--t-fast) var(--ease-out);}
.mc-fav.on svg{fill:var(--red);stroke:var(--red);animation:pop 340ms var(--ease-out);}
@keyframes pop{0%{transform:scale(1);}42%{transform:scale(1.24);}100%{transform:scale(1);}}
.mc-in{display:block;padding:11px 13px 14px;}
.mc-n{display:block;font:700 19px/1 var(--d);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc-r{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:11px;color:var(--fg3);}
.mc-r b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;}
.mc-r svg{width:11px;height:11px;fill:var(--warn);stroke:none;}
.mc-slot{display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--line);font:700 15px/1 var(--d);letter-spacing:.05em;
  color:var(--red-lift);font-variant-numeric:tabular-nums;}
.mc-slot.busy{color:var(--fg3);}
.mc-slot svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;flex-shrink:0;}

/* ── факты ──────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 var(--pad);}
.fact{padding:16px 15px 17px;border-radius:14px;
  background:var(--s1);border:1px solid var(--line);position:relative;overflow:hidden;}
.fact-n{display:block;font:700 34px/.88 var(--d);color:var(--fg);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.fact-t{display:block;margin-top:10px;font-size:12.5px;font-weight:500;line-height:1.3;}
.fact-s{display:block;margin-top:6px;font-size:11px;color:var(--fg3);line-height:1.42;}

/* Широкие карточки: первая всегда, и замыкающая — только когда иначе
   она осталась бы одна в ряду с дырой справа. При чётном числе фактов
   после первой остаётся нечётный хвост, его и добираем. */
.fact:first-child,
.fact:first-child ~ .fact:last-child:nth-child(even){
  grid-column:span 2;display:flex;align-items:center;gap:18px;
  background:linear-gradient(150deg,var(--s2),var(--s1) 72%);}
.fact:first-child .fact-n,
.fact:first-child ~ .fact:last-child:nth-child(even) .fact-n{
  font-size:46px;color:var(--red-lift);flex-shrink:0;}
.fact:first-child .fact-b,
.fact:first-child ~ .fact:last-child:nth-child(even) .fact-b{flex:1;min-width:0;}
.fact:first-child .fact-t,
.fact:first-child ~ .fact:last-child:nth-child(even) .fact-t{margin-top:0;}

/* ── информация ─────────────────────────────────────────────── */
.info{margin:26px var(--pad) 0;border-radius:15px;overflow:hidden;
  background:var(--s1);border:1px solid var(--line);}
.info-r{display:flex;align-items:center;gap:13px;padding:15px 16px;color:var(--fg);}
.info-r + .info-r{border-top:1px solid var(--line);}
.info-r > svg{width:17px;height:17px;stroke:var(--fg3);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.info-b{flex:1;min-width:0;}
.info-t{display:block;font-size:13.5px;}
.info-s{display:block;margin-top:4px;font-size:11.5px;color:var(--fg3);}
.info-a{width:14px;height:14px;stroke:var(--fg3);fill:none;stroke-width:2.4;flex-shrink:0;}

/* ── кнопки ─────────────────────────────────────────────────── */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 14px;border-radius:12px;
  font:700 16px/1 var(--d);letter-spacing:.08em;
  transition:transform var(--t-press) var(--ease-out),
             background var(--t-fast) var(--ease-out),opacity var(--t-fast) var(--ease-out);}
.btn:active{transform:scale(.975);}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none;}
.btn-1{background:var(--red);color:#fff;
  box-shadow:0 6px 20px -8px rgba(215,31,39,.7),0 1px 0 rgba(255,255,255,.16) inset;}
.btn-2{background:var(--s3);color:var(--fg);border:1px solid var(--line2);}
.btn-g{background:transparent;color:var(--fg2);border:1px solid var(--line2);}
.btn-g.warn{color:var(--red-lift);border-color:rgba(215,31,39,.35);}
.btn svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.live-act .btn,.bk-act .btn{flex:1;padding:12px;font-size:13px;}

/* ── нижняя навигация ───────────────────────────────────────── */
#nav{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);}
.nt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 2px 10px;color:var(--fg3);position:relative;
  transition:color var(--t-fast) var(--ease-out);}
.nt svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-ui) var(--ease-out);}
.nt span{font:700 10px/1 var(--d);letter-spacing:.1em;}
.nt.on{color:var(--fg);}
.nt.on svg{transform:translateY(-1px) scale(1.06);}
.nt-mark{position:absolute;top:0;left:50%;width:22px;height:2px;border-radius:0 0 3px 3px;
  background:var(--red);transform:translateX(-50%) scaleX(0);
  transition:transform var(--t-ui) var(--ease-out);}
.nt.on .nt-mark{transform:translateX(-50%) scaleX(1);}
.nt-badge{position:absolute;top:6px;right:calc(50% - 20px);
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--red);color:#fff;font:700 10px/16px var(--d);text-align:center;
  box-shadow:0 0 0 2px var(--bg);}

/* ── шторка ─────────────────────────────────────────────────── */
.veil{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.62);
  opacity:0;pointer-events:none;transition:opacity var(--t-ui) var(--ease-out);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.veil.on{opacity:1;pointer-events:auto;}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:60;max-height:90%;
  display:flex;flex-direction:column;
  background:var(--s1);border-top:1px solid var(--line2);
  border-radius:22px 22px 0 0;
  transform:translate3d(0,101%,0);
  transition:transform var(--t-sheet) var(--ease-drawer);
  box-shadow:var(--sheet-shadow);}
.sheet.on{transform:translate3d(0,0,0);}
.sheet-hd{position:relative;flex-shrink:0;padding:20px 58px 15px 20px;
  border-bottom:1px solid var(--line);}
.sheet-grip{position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;background:var(--line3);}
.sheet-hd h3{font:700 22px/1 var(--d);letter-spacing:.05em;}
.sheet-x{position:absolute;right:14px;top:15px;width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--s3);border:1px solid var(--line);
  transition:transform var(--t-press) var(--ease-out);}
.sheet-x:active{transform:scale(.9);}
.sheet-x svg{width:14px;height:14px;stroke:var(--fg);fill:none;stroke-width:2.2;stroke-linecap:round;}
.sheet-body{flex:1;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;}
.sheet-body::-webkit-scrollbar{display:none;}
.sheet-foot:not(:empty){flex-shrink:0;padding:13px 20px;
  padding-bottom:calc(13px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--s1);}
.sheet.on .sheet-body > *{animation:rise 340ms var(--ease-out) backwards;}
.lead{padding:17px 20px 6px;font-size:13.5px;color:var(--fg2);line-height:1.5;}

/* ── уровни и услуги ────────────────────────────────────────── */
.tier{margin:12px 16px;border-radius:15px;overflow:hidden;
  background:var(--s2);border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease-out);}
.tier.open{border-color:var(--line2);}
.tier.lock{opacity:.44;}
.tier-h{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;text-align:left;}
.tier-b{flex:1;min-width:0;}
.tier-n{display:block;font:700 19px/1 var(--d);letter-spacing:.05em;}
.tier-s{display:block;margin-top:6px;font-size:11.5px;color:var(--fg3);}
.tier-c{font:700 12px/1 var(--d);color:var(--fg3);font-variant-numeric:tabular-nums;}
.tier-badge{min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--red);
  color:#fff;font:700 12px/21px var(--d);text-align:center;}
.tier-x{width:16px;height:16px;stroke:var(--fg3);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-ui) var(--ease-out);}
.tier.open .tier-x{transform:rotate(180deg);}
.tier-wrap{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-ui) var(--ease-out);}
.tier.open .tier-wrap{grid-template-rows:1fr;}
.tier-in{overflow:hidden;}
.tier-lock{padding:12px 16px;font-size:12px;color:var(--warn);line-height:1.45;
  border-top:1px solid var(--line);}

.sv{display:flex;align-items:center;gap:13px;width:100%;padding:13px 16px;text-align:left;
  border-top:1px solid var(--line);
  transition:background var(--t-fast) var(--ease-out);}
.sv:active{background:var(--press);}
.sv.on{background:rgba(215,31,39,.07);}
.sv-b{flex:1;min-width:0;}
.sv-n{display:block;font-size:14.5px;font-weight:500;}
.sv-alt{display:block;margin-top:3px;font-size:11px;color:var(--fg3);}
.sv-m{display:flex;align-items:center;gap:9px;margin-top:9px;}
.sv-p{font:700 16px/1 var(--d);color:var(--red-lift);font-variant-numeric:tabular-nums;}
.sv-d{font-size:10.5px;color:var(--fg3);padding:3px 7px;border-radius:5px;
  background:var(--s3);border:1px solid var(--line);}
.sv-ck{width:23px;height:23px;flex-shrink:0;border-radius:7px;
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);}
.sv-ck svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;opacity:0;}
.sv.on .sv-ck{background:var(--red);border-color:var(--red);}
.sv.on .sv-ck svg{opacity:1;animation:draw 300ms var(--ease-out) forwards;}

/* ── выбор мастера ──────────────────────────────────────────── */
.mrow{display:flex;align-items:center;gap:14px;width:100%;padding:13px 20px;text-align:left;
  border-bottom:1px solid var(--line);
  transition:background var(--t-fast) var(--ease-out);}
.mrow:active{background:var(--press);}
.mrow.on{background:rgba(215,31,39,.07);}
.mrow-av{width:50px;height:50px;flex-shrink:0;border-radius:13px;overflow:hidden;
  background:var(--s3);display:flex;align-items:center;justify-content:center;}
.mrow-av img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.mrow-av svg{width:22px;height:22px;stroke:var(--red-lift);fill:none;stroke-width:1.7;}
.mrow-b{flex:1;min-width:0;}
.mrow-n{display:block;font:700 19px/1 var(--d);letter-spacing:.04em;}
.mrow-m{display:flex;align-items:center;gap:9px;margin-top:8px;}
.mrow-tier{font:700 8.5px/1 var(--d);letter-spacing:.12em;padding:4px 6px;border-radius:5px;
  background:var(--s3);border:1px solid var(--line);color:var(--fg2);}
.mrow-tier.t-top{background:var(--blue);border-color:transparent;color:#fff;}
.mrow-r{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--fg3);}
.mrow-r b{color:var(--fg);font-weight:600;}
.mrow-r svg{width:11px;height:11px;fill:var(--warn);stroke:none;}
.mrow-s{display:block;margin-top:6px;font-size:11.5px;color:var(--fg3);}
.mrow-ck{width:23px;height:23px;flex-shrink:0;border-radius:50%;
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);}
.mrow-ck svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;opacity:0;}
.mrow.on .mrow-ck{background:var(--red);border-color:var(--red);}
.mrow.on .mrow-ck svg{opacity:1;animation:draw 300ms var(--ease-out) forwards;}
.sep{padding:15px 20px 9px;font:700 10px/1 var(--d);letter-spacing:.19em;
  color:var(--fg3);text-align:center;}

/* ── календарь ──────────────────────────────────────────────── */
.cal{padding:16px 20px 0;}
.cal-hd{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;}
.cal-m{font:700 18px/1 var(--d);letter-spacing:.06em;}
.cal-nav{display:flex;gap:7px;}
.cal-nav button{width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  transition:transform var(--t-press) var(--ease-out),background var(--t-fast) var(--ease-out);}
.cal-nav button:active{transform:scale(.9);}
.cal-nav button:disabled{opacity:.3;}
.cal-nav svg{width:14px;height:14px;stroke:var(--fg);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding-bottom:7px;}
.cal-dow span{text-align:center;font:700 9.5px/1 var(--d);letter-spacing:.1em;color:var(--fg3);}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cal-d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;
  font:700 15px/1 var(--d);font-variant-numeric:tabular-nums;
  background:var(--s2);border:1px solid var(--line);
  transition:transform var(--t-press) var(--ease-out),
             background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);}
.cal-d:active:not(:disabled){transform:scale(.9);}
.cal-d.pad{background:none;border:none;}
.cal-d.no{opacity:.2;background:none;border-color:transparent;cursor:not-allowed;}
.cal-d.on{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 5px 16px -6px rgba(215,31,39,.8);}

.slots{padding:20px 20px 0;}
.slot-g + .slot-g{margin-top:19px;}
.slot-h{display:flex;align-items:center;gap:8px;padding-bottom:11px;}
.slot-h svg{width:14px;height:14px;stroke:var(--red-lift);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.slot-h span{font:700 11px/1 var(--d);letter-spacing:.16em;color:var(--fg2);}
.slot-r{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.slot{padding:12px 2px;text-align:center;border-radius:10px;
  background:var(--s2);border:1px solid var(--line);
  font:700 15px/1 var(--d);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  transition:transform var(--t-press) var(--ease-out),
             background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
  animation:rise 300ms var(--ease-out) backwards;}
.slot:active{transform:scale(.93);}
.slot.on{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 5px 16px -6px rgba(215,31,39,.8);}

/* ── подтверждение ──────────────────────────────────────────── */
.sum{margin:18px 20px 0;border-radius:15px;overflow:hidden;
  background:var(--s2);border:1px solid var(--line);}
.sum-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line);}
.sum-r:last-child{border-bottom:none;}
.sum-k{font-size:12px;color:var(--fg3);flex-shrink:0;}
.sum-v{font-size:13.5px;text-align:right;}
.sum-r.tot{background:var(--press);}
.sum-r.tot .sum-v{font:700 22px/1 var(--d);color:var(--red-lift);font-variant-numeric:tabular-nums;}
.fields{padding:17px 20px 0;display:flex;flex-direction:column;gap:9px;}
.fld{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:12px;
  background:var(--s2);border:1px solid var(--line);
  transition:border-color var(--t-fast) var(--ease-out);}
.fld:focus-within{border-color:var(--line3);}
.fld svg{width:16px;height:16px;stroke:var(--fg3);fill:none;stroke-width:1.8;flex-shrink:0;}
.fld input,.fld textarea{font-size:14.5px;}
.fld textarea{resize:none;height:38px;line-height:1.35;}
.fld.err{border-color:var(--red);animation:shake 400ms var(--ease-out);}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  22%{transform:translateX(-5px);}
  44%{transform:translateX(5px);}
  68%{transform:translateX(-3px);}
  86%{transform:translateX(2px);}}
.hint{padding:14px 20px 0;font-size:12px;color:var(--fg3);line-height:1.5;}

/* ── записи ─────────────────────────────────────────────────── */
.bk{margin:0 var(--pad) 11px;border-radius:16px;overflow:hidden;
  background:var(--s1);border:1px solid var(--line);}
.bk:first-child{margin-top:20px;}
.bk.live{border-color:rgba(215,31,39,.3);}
.bk-top{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--line);}
.st{font:700 9.5px/1 var(--d);letter-spacing:.13em;padding:6px 8px;border-radius:6px;}
.st.pending{color:var(--warn);background:rgba(232,179,58,.12);}
.st.confirmed{color:#08120C;background:var(--ok);}
.st.cancelled,.st.rejected{color:var(--fg3);background:var(--s3);}
.bk-when{flex:1;text-align:right;font:700 17px/1 var(--d);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;}
.bk-b{padding:14px 16px;}
.bk-m{display:flex;align-items:center;gap:12px;}
.bk-av{width:42px;height:42px;flex-shrink:0;border-radius:11px;overflow:hidden;background:var(--s3);
  display:flex;align-items:center;justify-content:center;}
.bk-av img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.bk-av svg{width:19px;height:19px;stroke:var(--fg2);fill:none;stroke-width:1.7;}
.bk-mn{display:block;font:700 17px/1 var(--d);letter-spacing:.04em;}
.bk-ms{display:block;margin-top:5px;font-size:11.5px;color:var(--fg3);}
/* Запись, не дошедшая до салона: объясняем прямо в карточке,
   иначе «не отправлена» читается как поломка, а не как ожидание сети. */
.bk-wait{margin:0 14px 12px;padding:9px 11px;border-radius:9px;
  background:rgba(215,31,39,.1);border:1px solid rgba(215,31,39,.3);
  font-size:11.5px;color:var(--fg2);line-height:1.45;}
.bk-sv{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--fg2);line-height:1.45;}
.bk-sv b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;}
.bk-act{display:flex;gap:8px;padding:0 16px 14px;}

/* ── вкладки ────────────────────────────────────────────────── */
.tabs{display:flex;gap:7px;padding:16px var(--pad) 0;}
/* Категорий товаров больше, чем влезает в ширину: честный скроллер
   с затуханием у края, чтобы обрезанная вкладка читалась как
   «листается дальше», а не как сломанная вёрстка. */
.tabs.scrollx{overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);}
.tabs.scrollx::-webkit-scrollbar{display:none;}
.tabs.scrollx button{flex:0 0 auto;padding-left:15px;padding-right:15px;}
.tabs.scrollx::after{content:'';flex:0 0 var(--pad);}
.tabs button{flex:1;padding:12px 8px;border-radius:11px;text-align:center;
  background:var(--s2);border:1px solid var(--line);
  font:700 14px/1 var(--d);letter-spacing:.06em;color:var(--fg3);
  transition:transform var(--t-press) var(--ease-out),
             background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);}
.tabs button:active{transform:scale(.97);}
.tabs button.on{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 6px 18px -8px rgba(215,31,39,.75);}

/* ── прайс ──────────────────────────────────────────────────── */
.pg{padding:24px var(--pad) 0;}
.pg-t{font:700 11px/1 var(--d);letter-spacing:.18em;color:var(--fg3);
  padding-bottom:12px;border-bottom:1px solid var(--line);}
.pr{display:flex;align-items:baseline;gap:11px;padding:14px 0;
  border-bottom:1px solid var(--line);}
.pr-n{flex:1;font-size:14px;}
.pr-n small{display:block;color:var(--fg3);font-size:11px;margin-top:3px;}
.pr-d{font-size:10.5px;color:var(--fg3);flex-shrink:0;}
.pr-v{font:700 17px/1 var(--d);color:var(--red-lift);font-variant-numeric:tabular-nums;flex-shrink:0;}

/* ── магазин: сетка карточек вместо строк прайса ────────────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:18px var(--pad) 0;}
.pcard{border-radius:15px;overflow:hidden;background:var(--s1);
  border:1px solid var(--line);text-align:left;display:block;
  transition:transform var(--t-press) var(--ease-out),border-color var(--t-fast) var(--ease-out);
  animation:rise 340ms var(--ease-out) backwards;}
.pcard:active{transform:scale(.975);}
.pcard-ph{display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--s2);}
.pcard-ph img{width:100%;height:100%;object-fit:cover;display:block;
  /* Фотографии товаров сняты разными людьми на разном фоне: оранжевый
     фон рядом с белым мрамором рвёт тёмную страницу. Общая обработка
     сводит их к одному материалу, цветным остаётся только ценник. */
  filter:var(--photo-filter);
  transition:transform 520ms var(--ease-out),filter var(--t-ui) var(--ease-out);}
/* тёплый тон сверху + затемнение снизу: связывает фото с карточкой */
.pcard-ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--photo-scrim),
             linear-gradient(135deg,rgba(215,31,39,.09),transparent 58%);
  box-shadow:0 0 0 1px var(--inset) inset;}
.pcard:active .pcard-ph img{transform:scale(1.045);}
.pcard-in{display:block;padding:12px 13px 14px;}
.pcard-n{display:block;font-size:13px;font-weight:500;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.64em;}
.pcard-p{display:block;margin-top:9px;font:700 17px/1 var(--d);
  color:var(--red-lift);font-variant-numeric:tabular-nums;}
.grid-t{padding:26px var(--pad) 0;font:700 11px/1 var(--d);
  letter-spacing:.18em;color:var(--fg3);}

/* ── профиль ────────────────────────────────────────────────── */
.pf-h{padding:26px var(--pad) 24px;text-align:center;}
.pf-av{width:70px;height:70px;margin:0 auto 14px;border-radius:22px;
  background:linear-gradient(150deg,var(--s3),var(--s2));border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font:700 27px/1 var(--d);}
.pf-n{font:700 23px/1 var(--d);letter-spacing:.05em;}
.pf-s{margin-top:8px;font-size:12.5px;color:var(--fg3);}
.pf-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 var(--pad);}
.pf-stat div{padding:15px 8px;border-radius:13px;text-align:center;
  background:var(--s1);border:1px solid var(--line);}
.pf-stat b{display:block;font:700 25px/1 var(--d);font-variant-numeric:tabular-nums;}
.pf-stat span{display:block;margin-top:7px;font:700 9px/1 var(--d);
  letter-spacing:.13em;color:var(--fg3);}
.pf-list{margin:22px var(--pad) 0;border-radius:15px;overflow:hidden;
  background:var(--s1);border:1px solid var(--line);}
.pf-r{display:flex;align-items:center;gap:13px;padding:15px 16px;}
.pf-r + .pf-r{border-top:1px solid var(--line);}
.pf-r > svg{width:17px;height:17px;stroke:var(--fg3);fill:none;stroke-width:1.7;flex-shrink:0;}
.pf-r b{flex:1;font-size:13.5px;font-weight:400;}
.pf-rate{display:flex;align-items:center;gap:5px;font-size:13px;}
.pf-rate svg{width:13px;height:13px;fill:var(--warn);stroke:none;}
.pf-rate small{color:var(--fg3);font-size:11.5px;}

/* ── пусто ──────────────────────────────────────────────────── */
.empty{padding:74px 26px;text-align:center;}
.empty-i{width:52px;height:52px;margin:0 auto 18px;border-radius:16px;
  background:var(--s2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;}
.empty-i svg{width:23px;height:23px;stroke:var(--fg3);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.empty-t{font:700 19px/1 var(--d);letter-spacing:.05em;}
.empty-s{margin-top:10px;font-size:13px;color:var(--fg3);line-height:1.5;}
.empty-a{margin:22px auto 0;max-width:230px;}

/* ── тост ───────────────────────────────────────────────────── */
.toast{position:absolute;left:16px;right:16px;bottom:calc(var(--nav-h) + 14px);z-index:80;
  padding:15px 17px;border-radius:14px;
  background:var(--toast-bg);border:1px solid var(--line2);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--card-shadow);
  font-size:13px;color:var(--fg2);line-height:1.45;
  opacity:0;transform:translate3d(0,14px,0) scale(.97);pointer-events:none;
  transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out);}
.toast.on{opacity:1;transform:none;}
.toast b{display:block;margin-bottom:6px;font:700 16px/1 var(--d);
  letter-spacing:.05em;color:var(--fg);}

/* ── доступность ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  /* меньше и мягче, а не ноль: подсветки состояний остаются,
     уходит только перемещение */
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
  .sheet{transition:transform 160ms linear;}
  .pole i{animation:none;}
  /* Лента акций не едет — обычный ряд, листается пальцем. Дубль набора
     нужен только анимации, здесь он бы читался как повтор акций. */
  .offers{overflow-x:auto;scrollbar-width:none;padding-left:var(--pad);padding-right:var(--pad);
    -webkit-mask-image:none;mask-image:none;}
  .offers::-webkit-scrollbar{display:none;}
  .offers-track{animation:none;transform:none;}
  .offers-track .offer[aria-hidden="true"]{display:none;}
}
@media (hover:hover) and (pointer:fine){
  .mc:hover{border-color:var(--line2);}
  .pcard:hover{border-color:var(--line2);}
  .pcard:hover .pcard-ph img{transform:scale(1.045);}
  .btn-1:hover{background:#E4242D;}
  .btn-2:hover,.btn-g:hover{background:var(--s4);}
  .sv:hover,.mrow:hover,.step:hover{background:var(--press);}
  .cal-d:hover:not(:disabled):not(.on){border-color:var(--line2);}
  .slot:hover:not(.on){border-color:var(--line2);}
}

/* ── оценка визита ── */
.stars{display:flex;gap:10px;justify-content:center;padding:22px 20px 8px;}
.stars button{width:52px;height:52px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;background:var(--s2);border:1px solid var(--line);
  transition:transform var(--t-press) var(--ease-out),background var(--t-fast) var(--ease-out);}
.stars button:active{transform:scale(.9);}
.stars svg{width:24px;height:24px;fill:var(--line3);stroke:none;
  transition:fill var(--t-fast) var(--ease-out);}
.stars button.on{background:rgba(232,179,58,.14);border-color:rgba(232,179,58,.4);}
.stars button.on svg{fill:var(--warn);}
.bk-rated{display:flex;align-items:center;gap:7px;padding:0 16px 14px;}
.bk-rated svg{width:13px;height:13px;fill:var(--warn);stroke:none;}
.bk-rated span{font-size:11.5px;color:var(--fg3);margin-left:4px;}

/* ── кэшбэк ── */
.sum-r .minus{color:var(--ok);}
.sum-r.bonus{align-items:center;}
.sum-r.bonus .sum-k small{display:block;margin-top:4px;font-size:10.5px;color:var(--fg3);}
.sum-r.earn{background:rgba(59,209,111,.06);}
.sum-r.earn .sum-k{color:var(--fg2);}
.sum-r.earn .sum-v{font:700 15px/1 var(--d);color:var(--ok);font-variant-numeric:tabular-nums;}
/* переключатель списания */
.sum-r .sw{width:46px;height:26px;flex-shrink:0;border-radius:100px;position:relative;
  background:var(--s3);border:1px solid var(--line2);
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);}
.sum-r .sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--fg3);
  transition:transform var(--t-ui) var(--ease-out),background var(--t-fast) var(--ease-out);}
.sum-r .sw.on{background:rgba(59,209,111,.2);border-color:var(--ok);}
.sum-r .sw.on::after{transform:translateX(20px);background:var(--ok);}

.pf-stat .bonus-cell b{color:var(--ok);}
.bonus-note{display:flex;align-items:baseline;gap:12px;
  margin:20px var(--pad) 0;padding:16px 16px 17px;border-radius:15px;
  background:linear-gradient(150deg,rgba(59,209,111,.1),var(--s1) 68%);
  border:1px solid rgba(59,209,111,.24);}
.bonus-note b{font:700 24px/1 var(--d);color:var(--ok);
  font-variant-numeric:tabular-nums;flex-shrink:0;}
.bonus-note span{flex:1;font-size:11.5px;color:var(--fg2);line-height:1.45;}

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

/* Карточки поднимаются над серым фоном настоящей тенью. Тень
   тонирована в синеву фона: чёрная на светлом читается грязью. */
:root[data-theme="light"] .deck{
  background:#fff;border-color:rgba(18,22,31,.1);
  box-shadow:var(--card-shadow);}
:root[data-theme="light"] .fact,
:root[data-theme="light"] .info,
:root[data-theme="light"] .bk,
:root[data-theme="light"] .pcard,
:root[data-theme="light"] .mc,
:root[data-theme="light"] .pf-stat div,
:root[data-theme="light"] .pf-list{
  box-shadow:0 1px 2px rgba(18,22,31,.06),0 6px 16px -12px rgba(18,22,31,.18);}

/* Акции: вместо блёклой розовой дымки — плотный красный блок.
   Один насыщенный акцент на светлом нейтрале и есть весь приём. */
:root[data-theme="light"] .offer{
  background:linear-gradient(160deg,var(--red) 0%,#B5141C 100%);
  border-color:transparent;box-shadow:0 8px 20px -12px rgba(215,31,39,.6);}
:root[data-theme="light"] .offer::after{display:none;}
:root[data-theme="light"] .offer-p{color:#fff;}
:root[data-theme="light"] .offer-t{color:#fff;}
:root[data-theme="light"] .offer-s{color:rgba(255,255,255,.82);}

/* Первый факт — тёмный блок: якорь страницы, чтобы светлое полотно
   не оставалось без веса */
:root[data-theme="light"] .fact:first-child,
:root[data-theme="light"] .fact:first-child ~ .fact:last-child:nth-child(even){
  background:linear-gradient(150deg,#12161F,#232A38 92%);border-color:transparent;}
:root[data-theme="light"] .fact:first-child .fact-n,
:root[data-theme="light"] .fact:first-child ~ .fact:last-child:nth-child(even) .fact-n{
  color:#FF5561;}
:root[data-theme="light"] .fact:first-child .fact-t,
:root[data-theme="light"] .fact:first-child ~ .fact:last-child:nth-child(even) .fact-t{
  color:#F4F1EC;}
:root[data-theme="light"] .fact:first-child .fact-s,
:root[data-theme="light"] .fact:first-child ~ .fact:last-child:nth-child(even) .fact-s{
  color:rgba(244,241,236,.66);}

/* Тёмный текст на насыщенной заливке нечитаем */
:root[data-theme="light"] .st.confirmed{color:#fff;}

/* Барберский столб: белые полосы на светлом пропадали */
:root[data-theme="light"] .pole i{background:repeating-linear-gradient(115deg,
  var(--red) 0 14px,#12161F 14px 28px,var(--blue) 28px 42px,#12161F 42px 56px);}
:root[data-theme="light"] .pole{
  background:linear-gradient(180deg,rgba(18,22,31,.18),transparent 40%,rgba(18,22,31,.18));}

/* Метки поверх фотографии: снимки светлее, нужна тёмная подложка */
:root[data-theme="light"] .mc-tier{background:rgba(18,22,31,.78);color:#fff;
  border-color:transparent;}
:root[data-theme="light"] .mc-fav{background:rgba(18,22,31,.44);border-color:transparent;}
:root[data-theme="light"] .mc-fav svg{stroke:#fff;}

/* Портреты сняты на тёмном фоне и на светлой странице читаются
   провалами: слегка поднимаем яркость, чтобы карточка была цельной */
:root[data-theme="light"] .mc-ph img{filter:saturate(.86) contrast(1.02) brightness(1.06);}

:root[data-theme="light"] .veil{background:rgba(12,16,24,.38);}
:root[data-theme="light"] .sheet{box-shadow:var(--sheet-shadow);}

/* Белый текст на красном остаётся белым */
:root[data-theme="light"] .seg button.on,
:root[data-theme="light"] .tabs button.on,
:root[data-theme="light"] .db.on,
:root[data-theme="light"] .mb.on span,
:root[data-theme="light"] .cal-d.on,
:root[data-theme="light"] .slot.on,
:root[data-theme="light"] .btn-1{color:#fff;}

/* Бонусная плашка: зелёный на светлом только намёком */
:root[data-theme="light"] .bonus-note{
  background:linear-gradient(150deg,rgba(21,128,61,.09),#fff 72%);
  border-color:rgba(21,128,61,.22);}
:root[data-theme="light"] .sum-r.earn{background:rgba(21,128,61,.06);}

/* Кнопка отдаёт тенью своего цвета, а не серой */
:root[data-theme="light"] .btn-1{
  box-shadow:0 8px 20px -10px rgba(215,31,39,.7),0 1px 0 rgba(255,255,255,.28) inset;}

/* Переключатель темы в профиле */
.theme-seg{display:flex;gap:3px;padding:3px;border-radius:9px;
  background:var(--s2);border:1px solid var(--line);}
.theme-seg button{padding:7px 10px;border-radius:6px;
  font:700 10px/1 var(--d);letter-spacing:.09em;color:var(--fg3);
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);}
.theme-seg button.on{background:var(--red);color:#fff;}

/* Прайс рядом с договорённой суммой: клиент должен видеть, что скидка
   учтена, а не гадать, почему в карточке цифра больше. */
.bk-sv b s { opacity: .45; font-weight: 600; margin-left: 3px; }