/* ============================================================
ANTIAGE · материальный слой · ROCH Liquid Glass
⚠️ containing-block: НИКОГДА filter/transform/backdrop-filter
на предках position:fixed (.nav, .sheet, .toast, .orb).
============================================================ */
@import url('/brand/tokens.css');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
font-family:var(--font-text);font-size:var(--fs-base);font-weight:400;line-height:1.5;
color:var(--text);background:var(--bg);min-height:100dvh;overflow-x:clip;
-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
padding-bottom:calc(var(--nav-h) + var(--nav-gap) * 2 + env(safe-area-inset-bottom) + 18px);
}
button{background:transparent;border:0;color:inherit;font:inherit}
button,a,[role=button]{touch-action:manipulation;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,textarea,select{font-size:16px!important;font-family:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
/* ============================================================
АМБИЕНТ — стеклу нужно что преломлять
Отдельные fixed-слои: НЕ предки чего-либо fixed.
============================================================ */
.amb{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.amb i{position:absolute;border-radius:50%;filter:blur(58px);will-change:transform}
/* светящееся ядро под героем — даёт стеклу светлую зону */
.amb i:nth-child(1){width:96vw;height:74vw;background:var(--orb-3);top:-30vw;left:-18vw;animation:drift1 40s ease-in-out infinite}
/* тёплый blush справа сверху */
.amb i:nth-child(2){width:62vw;height:62vw;background:var(--orb-1);top:6vh;right:-26vw;animation:drift2 52s ease-in-out infinite}
/* терракота — тёмная зона в середине, создаёт контраст */
.amb i:nth-child(3){width:58vw;height:58vw;background:var(--orb-2);top:46vh;left:-24vw;animation:drift3 46s ease-in-out infinite}
/* нижний акцент */
.amb i:nth-child(4){width:70vw;height:70vw;background:var(--orb-4);bottom:-26vw;right:-22vw;animation:drift4 58s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,4vh,0) scale(1.09)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,7vh,0) scale(1.13)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vw,-6vh,0) scale(1.10)}}
@keyframes drift4{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5vw,-5vh,0) scale(1.16)}}
/* плёночное зерно — data-URI percent-encoded для WebKit */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain-op);
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.6%22%2F%3E%3C%2Fsvg%3E")}
.wrap{max-width:var(--app-max);margin:0 auto;padding:0 20px;position:relative;z-index:1}
/* ============================================================
GLASS · три рецепта
1) .glass — FAKE-glass для контента (много карточек, без backdrop)
2) .frost — реальный backdrop-filter, только fixed chrome (≤2 в кадре)
3) .liquid — рефракция, signature-момент (1–2 на продукт)
============================================================ */
.glass{
position:relative;
background:linear-gradient(158deg, var(--glass-top), var(--glass-bot));
border:1px solid var(--glass-stroke);
border-radius:var(--r-card);
box-shadow:var(--depth),
inset 0 1px 0 var(--spec-1),
inset 0 -1px 0 var(--glass-edge);
}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(168deg, var(--sheen), transparent 44%)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(120% 58% at 16% -10%, var(--spec-2), transparent 48%)}
.glass>*{position:relative;z-index:1}
.frost{
background:var(--chrome-bg);
backdrop-filter:blur(34px) saturate(190%);
-webkit-backdrop-filter:blur(34px) saturate(190%);
box-shadow:inset 0 1px 0 var(--spec-1);
}
/* рефракция: Chromium — настоящий изгиб фона, Safari/iOS — тонкое стекло */
.liquid{
position:relative;border-radius:var(--r-card);
background:linear-gradient(158deg, var(--glass-top), var(--glass-bot));
backdrop-filter:blur(22px) saturate(180%) brightness(1.05);
-webkit-backdrop-filter:blur(22px) saturate(180%) brightness(1.05);
filter:drop-shadow(-6px -8px 34px rgba(120,80,66,.16));
}
.liquid::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 6px 6px 0 -6px var(--spec-1), inset 0 0 9px 1px var(--spec-2)}
.liquid>*{position:relative;z-index:1}
@supports (backdrop-filter:url(#aaLens)){
.liquid{backdrop-filter:brightness(1.06) blur(2.5px) saturate(165%) url(#aaLens);
-webkit-backdrop-filter:brightness(1.06) blur(2.5px) saturate(165%) url(#aaLens)}
}
/* ============================================================
ТИПОГРАФИКА
============================================================ */
.display{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:120%;letter-spacing:-.012em}
.display-lg{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:112%;letter-spacing:-.018em}
.h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:124%}
.h3{font-size:var(--fs-h3);font-weight:500;line-height:130%}
.lead{font-size:var(--fs-body);color:var(--text-2);line-height:1.58;font-weight:var(--fw-body)}
.muted{color:var(--text-2);font-weight:var(--fw-small)}
.tiny{font-size:var(--fs-2xs);color:var(--text-2);font-weight:var(--fw-small);letter-spacing:.005em}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.serif-accent{font-family:var(--font-display);font-style:italic;color:var(--accent-2)}
/* ============================================================
КНОПКИ · иерархия primary / ghost / soft / danger
Фирменный blush держим (это подпись бренда), но даём ему объём:
многостоповый градиент + верхний блик + цветное свечение снизу
+ медленный проход блика. Насыщенная терракота с белым текстом
не годится — на светлом стопе даёт 2.67:1.
============================================================ */
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
border:1px solid transparent;border-radius:var(--r-pill);padding:17px 28px;
font-size:var(--fs-sm);font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;
isolation:isolate;
transition:transform 160ms var(--spring), box-shadow var(--t-base) var(--ease),
background var(--t-base) var(--ease), color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.btn>*{position:relative;z-index:2}
.btn:active{transform:scale(.955)}
/* ---- PRIMARY: объёмная blush-пилюля ---- */
.btn-primary{
color:var(--accent-ink);
background:
linear-gradient(178deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
linear-gradient(168deg, #F3D2C3 0%, #E9C0AE 26%, var(--aa-blush) 62%, #DAA997 100%);
box-shadow:
0 10px 22px -9px rgba(168,84,64,.50),
0 2px 6px -1px rgba(168,84,64,.30),
inset 0 1.5px 0 rgba(255,255,255,.78),
inset 0 -1.5px 0 rgba(150,80,64,.28),
inset 0 0 0 1px rgba(255,255,255,.30);
}
/* проход блика — «жизнь» без бесконечной анимации в кадре */
.btn-primary::before{
content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.62) 48%, transparent 64%);
transform:translateX(-130%);
}
.btn-primary:not(:disabled):hover::before,
.btn-primary.sheen::before{animation:btnSheen 1.1s var(--ease)}
@keyframes btnSheen{to{transform:translateX(130%)}}
.btn-primary:active{
box-shadow:
0 5px 14px -6px rgba(178,92,72,.46),
inset 0 1.5px 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(150,80,64,.30),
inset 0 2px 8px rgba(150,80,64,.22);
filter:saturate(1.08);
}
/* блочный CTA — крупнее и со стрелкой, которая подаётся вперёд */
.btn-block{width:100%}
.btn-block.btn-primary{padding:19px 26px;font-size:var(--fs-body)}
.btn .arr{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 auto;
transition:transform 260ms var(--spring)}
.btn:active .arr{transform:translateX(4px)}
/* ---- HERO CTA: единственное главное действие на экране ---- */
.btn-hero{
padding:20px 30px;font-size:var(--fs-body);
box-shadow:
0 12px 26px -10px rgba(168,84,64,.56),
0 3px 8px -2px rgba(168,84,64,.34),
0 0 0 1px rgba(196,124,104,.26),
inset 0 1.5px 0 rgba(255,255,255,.82),
inset 0 -1.5px 0 rgba(150,80,64,.30);
}
.btn-hero:active{box-shadow:
0 4px 10px -6px rgba(168,84,64,.5),
0 0 0 1px rgba(196,124,104,.3),
inset 0 1.5px 0 rgba(255,255,255,.62),
inset 0 2px 9px rgba(150,80,64,.24)}
/* ---- GHOST: стекло с чёткой кромкой ---- */
.btn-ghost{
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
color:var(--text);border-color:var(--glass-stroke);
box-shadow:var(--depth), inset 0 1px 0 var(--spec-1), inset 0 -1px 0 var(--glass-edge);
}
.btn-ghost:active{border-color:var(--accent);box-shadow:0 4px 12px rgba(122,74,58,.14), inset 0 1px 0 var(--spec-1)}
/* ---- SOFT: подложка-акцент ---- */
.btn-soft{
background:linear-gradient(168deg,var(--pill),var(--pill-2));
color:var(--accent-text);border-color:rgba(225,181,164,.42);
box-shadow:0 6px 16px -6px rgba(178,92,72,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-soft:active{border-color:var(--accent);box-shadow:inset 0 2px 6px rgba(178,92,72,.14)}
.btn-danger{background:transparent;color:var(--danger-text);border-color:var(--danger);box-shadow:none}
.btn-sm{padding:12px 19px;font-size:var(--fs-xs);gap:7px}
.btn-sm .arr{width:16px;height:16px}
.btn:disabled,.btn[aria-disabled=true]{opacity:.4;pointer-events:none;box-shadow:none;filter:grayscale(.25)}
@media (prefers-reduced-motion:reduce){.btn-primary::before{display:none}}
/* ============================================================
ПОВЕРХНОСТИ
============================================================ */
.card{position:relative;background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
border:1px solid var(--glass-stroke);border-radius:var(--r-card);overflow:hidden;
box-shadow:var(--depth), inset 0 1px 0 var(--spec-1)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(168deg,var(--sheen),transparent 44%)}
.card>*{position:relative;z-index:1}
.card-pad{padding:20px}
.card-flat{background:transparent;border-color:var(--line-soft);box-shadow:none}
.card-flat::before{display:none}
.sect{padding:36px 0}
.sect-tight{padding:22px 0}
/* ============================================================
ЧИПСЫ / СЕГМЕНТЫ
============================================================ */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 20px;margin:0 -20px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--glass-stroke);border-radius:var(--r-pill);padding:10px 16px;
font-size:var(--fs-xs);font-weight:500;color:var(--text-2);
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
box-shadow:inset 0 1px 0 var(--spec-1);
transition:transform var(--t-fast) var(--spring), background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease)}
.chip:active{transform:scale(.955)}
.chip.on{background:linear-gradient(168deg,#EFC9B9,var(--aa-blush));border-color:transparent;color:var(--accent-ink);font-weight:500;
box-shadow:0 8px 20px rgba(201,112,102,.24), inset 0 1px 0 rgba(255,255,255,.55)}
.seg{display:flex;gap:4px;border-radius:var(--r-pill);padding:4px;
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
border:1px solid var(--glass-stroke);box-shadow:inset 0 1px 0 var(--spec-1)}
.seg button{flex:1;padding:10px 4px;border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:500;color:var(--text-2);
transition:all var(--t-base) var(--ease)}
.seg button.on{background:var(--bg);color:var(--text);font-weight:500;box-shadow:0 2px 8px rgba(120,80,66,.14), inset 0 1px 0 var(--spec-1)}
/* ============================================================
СТРОКИ / ФОРМЫ
============================================================ */
.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* значение в правой колонке не переносится, длинную подпись ужимаем */
.row-between>b,.row-between>span:last-child:not(:only-child){white-space:nowrap;flex:0 0 auto}
.row-between>span:first-child{min-width:0}
.hr{height:1px;background:var(--line-soft);margin:18px 0}
.dashed{flex:1;border-bottom:1px dashed var(--line);min-width:14px;transform:translateY(-4px)}
.field{width:100%;border:1px solid var(--glass-stroke);border-radius:var(--r-md);padding:15px 16px;
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));color:var(--text);
box-shadow:inset 0 1px 0 var(--spec-1);transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,181,164,.26), inset 0 1px 0 var(--spec-1)}
.field::placeholder{color:var(--text-2);opacity:1}
.label{display:block;font-size:var(--fs-2xs);color:var(--text-2);margin-bottom:8px;letter-spacing:.02em;font-weight:var(--fw-small)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* ============================================================
НИЖНЯЯ НАВИГАЦИЯ · плавающая стеклянная пилюля (frost #1)
============================================================ */
.nav{
position:fixed;left:0;right:0;z-index:60;pointer-events:none;
bottom:calc(var(--nav-gap) + env(safe-area-inset-bottom));
padding:0 var(--nav-gap);
}
/* подложка под баром: гасит контент, который иначе просвечивает вокруг пилюли */
.nav::before{
content:"";position:fixed;left:0;right:0;bottom:0;pointer-events:none;
height:calc(var(--nav-h) + var(--nav-gap) * 2 + env(safe-area-inset-bottom));
backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
-webkit-mask:linear-gradient(to top, #000 62%, transparent);
mask:linear-gradient(to top, #000 62%, transparent);
background:linear-gradient(to top, var(--bg) 34%, color-mix(in srgb, var(--bg) 55%, transparent) 78%, transparent);
}
.nav-inner{
pointer-events:auto;
max-width:calc(var(--app-max) - 8px);margin:0 auto;
display:grid;grid-template-columns:repeat(5,1fr);height:var(--nav-h);
border-radius:26px;position:relative;overflow:hidden;
background:var(--chrome-bg);
backdrop-filter:blur(36px) saturate(200%);-webkit-backdrop-filter:blur(36px) saturate(200%);
border:1px solid var(--glass-stroke);
box-shadow:0 18px 44px rgba(92,54,42,.20), 0 3px 12px rgba(92,54,42,.10),
inset 0 1px 0 var(--spec-1), inset 0 -1px 0 var(--glass-edge);
}
.nav-inner::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(168deg,var(--sheen),transparent 52%)}
/* бегунок-подсветка активной вкладки */
.nav-pill{position:absolute;top:6px;bottom:6px;width:calc(20% - 8px);border-radius:20px;z-index:0;
background:linear-gradient(168deg, rgba(225,181,164,.34), rgba(225,181,164,.16));
box-shadow:inset 0 1px 0 var(--spec-1);
transition:transform 460ms var(--spring);will-change:transform}
.nav-i{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
font-size:11.5px;font-weight:500;letter-spacing:.005em;color:var(--text-2);
transition:color var(--t-base) var(--ease),transform var(--t-fast) var(--spring)}
.nav-i svg{width:23px;height:23px;stroke-width:1.5;overflow:visible}
.nav-i:active{transform:scale(.92)}
.nav-i.on{color:var(--accent-2);font-weight:500}
/* оживление иконок: активная — пружинный подскок, штрихи «дорисовываются» */
.nav-i.on svg{animation:icoPop 520ms var(--spring) both}
@keyframes icoPop{0%{transform:translateY(0) scale(1)}38%{transform:translateY(-4px) scale(1.16)}100%{transform:translateY(-1px) scale(1.06)}}
.nav-i.on svg [stroke-dasharray]{animation:icoDraw 620ms var(--ease) both}
@keyframes icoDraw{from{stroke-dashoffset:var(--dash,60)}to{stroke-dashoffset:0}}
/* ============================================================
ШИТ · frost (fixed chrome #2)
============================================================ */
.sheet-bg{position:fixed;inset:0;z-index:90;background:rgba(46,30,25,.40);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.sheet-bg.on{opacity:1;pointer-events:auto}
/* ⚠️ .sheet больше НЕ скроллер: скроллит #sheetBody.
Иначе грабер уезжал вверх вместе с контентом, а sticky-шапка вставала голым краем.
Плюс убран вложенный backdrop-filter в покое: фильтр внутри фильтра
композитит уже размытого родителя → на iOS видна тёмная полоса-шов. */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;max-width:var(--app-max);margin:0 auto;
display:flex;flex-direction:column;
background:var(--chrome-bg);
backdrop-filter:blur(36px) saturate(190%);-webkit-backdrop-filter:blur(36px) saturate(190%);
border-top:1px solid var(--glass-stroke);
border-radius:28px 28px 0 0;max-height:92dvh;overflow:hidden;
transform:translateY(102%);transition:transform 460ms var(--ease);
box-shadow:0 -22px 56px rgba(60,36,28,.22), inset 0 1px 0 var(--spec-1)}
.sheet.on{transform:translateY(0)}
.sheet.dragging{transition:none}
/* грабер — своя зона захвата 28px, палец не обязан попадать в 5px полоски */
.sheet-top{flex:0 0 auto;height:26px;display:grid;place-items:center;
touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.sheet-top:active{cursor:grabbing}
.sheet-grab{width:36px;height:5px;border-radius:99px;background:var(--grab);
transition:width 220ms var(--spring),background 220ms var(--ease)}
.sheet.dragging .sheet-grab,.sheet-top:active .sheet-grab{width:46px;background:var(--grab-on)}
#sheetBody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding-bottom:calc(24px + env(safe-area-inset-bottom))}
/* nav-bar по канону Apple: в покое шапка прозрачна и слитна с листом,
материал и волосяная линия проявляются ТОЛЬКО когда контент ушёл под неё */
.sheet-head{position:sticky;top:0;z-index:3;min-height:44px;
padding:2px 62px 14px 20px;
background:transparent;
transition:background 180ms var(--ease)}
.sheet-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--head-line);opacity:0;transition:opacity 200ms var(--ease)}
.sheet.stuck .sheet-head{background:var(--head-bg);
backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
padding-top:9px;padding-bottom:11px}
.sheet.stuck .sheet-head::after{opacity:1}
/* грабер — часть nav-bar, а не отдельная полоска над ним:
при stuck берёт тот же материал, иначе шапка читается вторым слоем */
.sheet.stuck .sheet-top{background:var(--head-bg)}
.sheet-top,.sheet-head{transition:background 180ms var(--ease),padding 240ms var(--ease)}
/* large title схлопывается в компактный — как UINavigationBar при скролле */
.sheet-head .h2{line-height:1.14;letter-spacing:-.01em;
transition:font-size 240ms var(--ease)}
.sheet.stuck .sheet-head .h2{font-size:var(--fs-lg)}
.sheet-head.center{padding:20px 20px 16px;text-align:center}
.sheet-head.center .h2{padding:0 34px}
/* ✕ — вставляется автоматически в sheet(), а не руками в 25 местах */
.sheet-x{position:absolute;top:0;right:15px;width:31px;height:31px;border-radius:50%;
display:grid;place-items:center;background:var(--x-bg);color:var(--text-2);
transition:transform 200ms var(--spring),background 160ms var(--ease),color 160ms var(--ease)}
.sheet-x:active{transform:scale(.86);background:var(--x-bg-on);color:var(--text)}
.sheet-x svg{width:15px;height:15px;stroke-width:2.1}
/* ============================================================
ТОСТ
============================================================ */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--nav-gap) * 2 + 16px + env(safe-area-inset-bottom));
transform:translate(-50%,22px) scale(.96);z-index:120;
background:rgba(46,32,27,.92);color:#FBF3EF;
backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
padding:13px 22px;border-radius:var(--r-pill);font-size:var(--fs-xs);
border:1px solid rgba(255,255,255,.10);box-shadow:0 16px 40px rgba(0,0,0,.30);
opacity:0;pointer-events:none;transition:all var(--t-slow) var(--spring);
max-width:calc(100% - 40px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
/* ============================================================
МЕДИА / СЕТКИ
============================================================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scroll-x{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 20px 6px;margin:0 -20px;
scroll-snap-type:x proximity;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch}
/* ⚠️ scroll-snap-align:start выравнивает по scrollport, а не по padding-box —
без scroll-padding-inline первая карточка «съедает» отступ и липнет к краю */
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x>*{scroll-snap-align:start}
.ratio{position:relative;overflow:hidden;background:var(--bg-2)}
.ratio>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-43{padding-top:75%} .r-11{padding-top:100%} .r-34{padding-top:133%} .r-169{padding-top:56.25%}
/* ============================================================
ДВИЖЕНИЕ · stagger pop-in, tap, screen transition
============================================================ */
.fade-in{animation:fadeIn var(--t-slow) var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stagger>*{animation:popIn 420ms var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.02s}.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.10s}.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}.stagger>*:nth-child(6){animation-delay:.22s}
.stagger>*:nth-child(n+7){animation-delay:.26s}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.tap{transition:transform var(--t-fast) var(--spring)}
.tap:active{transform:scale(.972)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.amb i{animation:none}
}
.empty{text-align:center;padding:46px 20px;color:var(--text-3);font-size:var(--fs-xs)}
/* ============================================================
СЛОЙ СОВЕРШЕНСТВА · микрофизика
============================================================ */
/* живые цифры: count-up дёргает textContent — без tabular-nums строка «дышит» шириной */
.num-live{font-variant-numeric:tabular-nums}
/* каскад контента шита: лист приехал → содержимое догоняет волной */
.sh-rise{animation:shRise 360ms var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes shRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* галочка успеха рисуется штрихом — пик события, а не статичная картинка */
.ok-draw path{stroke-dasharray:24;stroke-dashoffset:24;animation:okDraw 560ms 240ms cubic-bezier(.3,.9,.4,1) forwards}
@keyframes okDraw{to{stroke-dashoffset:0}}
/* звёзды рейтинга: волна пружинных хлопков от первой к выбранной */
.stars button.on svg{animation:starPop 380ms var(--spring) both;animation-delay:var(--d,0ms)}
@keyframes starPop{0%{transform:scale(.55) rotate(-14deg)}62%{transform:scale(1.22) rotate(4deg)}100%{transform:scale(1)}}
/* фото проявляются, а не врезаются */
.ratio img{animation:imgIn 460ms var(--ease) both}
@keyframes imgIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
/* смена темы — радиальная волна от кнопки (как в самом Telegram) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
/* success-момент: пружинный пульс подтверждения */
.okpulse{animation:okPop 620ms var(--spring) both;color:var(--aa-graphite)}
/* ⚠️ Круг успеха — blush и в тёмной теме тоже светлый.
Иконка внутри должна быть тёмной ЯВНО, а не наследовать currentColor экрана. */
.okpulse svg{stroke:var(--aa-graphite)}
.okpulse::after{content:"";position:absolute;width:66px;height:66px;border-radius:50%;
border:2px solid var(--accent);animation:okRing 1.1s var(--ease) .18s both}
@keyframes okPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes okRing{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
/* ============================================================
ИИ-КОНСУЛЬТАНТ · орб + чат
Орб стакается ВЫШЕ плавающего навбара (канон: маскот bottom-right)
============================================================ */
.orb{
position:fixed;right:18px;z-index:70;width:60px;height:60px;border-radius:50%;
bottom:calc(var(--nav-h) + var(--nav-gap) * 2 + 16px + env(safe-area-inset-bottom));
display:grid;place-items:center;overflow:visible;
background:radial-gradient(circle at 34% 28%, #FBEDE6, var(--aa-blush) 62%, #C99A88);
border:1px solid rgba(255,255,255,.62);
box-shadow:0 14px 34px rgba(160,92,74,.38), 0 0 0 6px rgba(225,181,164,.14), inset 0 1px 0 rgba(255,255,255,.72);
transition:transform var(--t-base) var(--spring), box-shadow var(--t-base) var(--ease);
animation:orbBreath 4.2s ease-in-out infinite;
}
.orb:active{transform:scale(.90)}
/* живое лого: видео-петля поверх статичного марка; пока не готово — виден марк.
pointer-events:none — клик проходит в кнопку; border-radius:inherit кропает в круг */
.orb-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
opacity:0;transition:opacity 600ms var(--ease);pointer-events:none}
.orb-live.on{opacity:1}
@media (prefers-reduced-motion:reduce){.orb-live{display:none}}
.orb img{width:30px;height:auto;filter:brightness(0) saturate(100%) invert(19%) sepia(6%) saturate(0%) hue-rotate(0deg)}
@keyframes orbBreath{0%,100%{box-shadow:0 14px 34px rgba(160,92,74,.38),0 0 0 6px rgba(225,181,164,.14),inset 0 1px 0 rgba(255,255,255,.72)}
50%{box-shadow:0 16px 40px rgba(160,92,74,.46),0 0 0 12px rgba(225,181,164,.09),inset 0 1px 0 rgba(255,255,255,.72)}}
.orb::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);
opacity:0;animation:orbRing 3.4s var(--ease) infinite}
@keyframes orbRing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.42);opacity:0}}
.orb-dot{position:absolute;top:-2px;right:-2px;width:15px;height:15px;border-radius:50%;
background:var(--aa-blush-deep);border:2.5px solid var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.24)}
.orb.hidden{opacity:0;pointer-events:none;transform:scale(.6)}
/* ---- чат: отдельная полноэкранная поверхность, без градиентных полос ---- */
.aichat{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
background:var(--bg);transform:translateY(100%);transition:transform 420ms var(--ease);
max-width:var(--app-max);margin:0 auto;box-shadow:0 -20px 60px rgba(60,36,28,.24)}
.aichat.on{transform:translateY(0)}
.aichat-hd{flex:0 0 auto;display:flex;align-items:center;gap:12px;min-height:52px;
padding:calc(11px + env(safe-area-inset-top)) 16px 11px;
background:transparent;position:relative;z-index:2;transition:background 180ms var(--ease)}
.aichat-hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--head-line);opacity:0;transition:opacity 200ms var(--ease)}
.aichat.stuck .aichat-hd{background:var(--head-bg);
backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%)}
.aichat.stuck .aichat-hd::after{opacity:1}
.aichat-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 0 6px;
display:flex;flex-direction:column;gap:14px}
.aichat-ft{flex:0 0 auto;background:var(--bg);border-top:1px solid var(--line-soft);
padding-bottom:env(safe-area-inset-bottom)}
.chat{display:flex;flex-direction:column;gap:14px;padding:0 18px}
.msg{max-width:88%;display:flex;gap:9px;align-items:flex-start;animation:msgIn 380ms var(--spring) both}
@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.msg-ava{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;margin-top:2px;
background:radial-gradient(circle at 34% 28%, #FBEDE6, var(--aa-blush) 66%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 10px rgba(160,92,74,.22)}
.msg-ava svg{height:18px;width:auto;display:block}
.bubble{padding:14px 17px;border-radius:20px;font-size:var(--fs-xs);line-height:1.6;font-weight:var(--fw-body)}
.msg.ai .bubble{background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
border:1px solid var(--glass-stroke);border-top-left-radius:7px;
box-shadow:var(--depth),inset 0 1px 0 var(--spec-1);color:var(--text)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bubble{background:linear-gradient(168deg,#EFC9B9,var(--aa-blush));color:var(--accent-ink);
border-top-right-radius:7px;border-radius:20px 7px 20px 20px;
box-shadow:0 8px 20px rgba(201,112,102,.24),inset 0 1px 0 rgba(255,255,255,.5)}
.bubble b{font-weight:600;color:var(--accent-text)}
.msg.me .bubble b{color:var(--accent-ink)}
.bubble .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.bubble .acts .btn{padding:10px 15px;font-size:var(--fs-2xs)}
.typing{display:flex;gap:5px;align-items:center;padding:16px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:typ 1.25s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes typ{0%,60%,100%{transform:translateY(0);opacity:.42}30%{transform:translateY(-5px);opacity:1}}
/* быстрые вопросы — НАД строкой ввода */
.quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 18px 10px;scroll-padding-inline:18px}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:0 0 auto;padding:11px 16px;border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:600;color:var(--accent-text);
background:var(--wash);border:1px solid var(--glass-stroke);box-shadow:inset 0 1px 0 var(--spec-1);white-space:nowrap;
transition:transform var(--t-fast) var(--spring)}
.quick button:active{transform:scale(.94)}
.chat-in{display:flex;gap:8px;align-items:center;padding:0 14px 12px}
.chat-in .field{flex:1;min-width:0;border-radius:var(--r-pill);padding:14px 18px}
.chat-btn{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
border:1px solid var(--glass-stroke);background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
color:var(--text-2);box-shadow:inset 0 1px 0 var(--spec-1);
transition:transform var(--t-fast) var(--spring),background var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.chat-btn:active{transform:scale(.90)}
.chat-btn.send{background:linear-gradient(168deg,#EFC9B9,var(--aa-blush));color:var(--accent-ink);border-color:transparent;
box-shadow:0 8px 20px rgba(201,112,102,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.chat-btn.rec{background:linear-gradient(168deg,#E88C80,var(--aa-blush-deep));color:#fff;border-color:transparent;
animation:recPulse 1.3s var(--ease) infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,112,102,.44)}70%{box-shadow:0 0 0 14px rgba(201,112,102,0)}}
.chat-hint{font-size:12px;font-weight:500;color:var(--text-2);text-align:center;padding:0 18px 10px;line-height:1.4}
/* ============================================================
СОСТОЯНИЯ · скелет, пусто
============================================================ */
.sk{border-radius:var(--r-md);background:linear-gradient(100deg,var(--bg-2) 30%,var(--wash) 50%,var(--bg-2) 70%);
background-size:220% 100%;animation:skShine 1.4s linear infinite}
@keyframes skShine{from{background-position:120% 0}to{background-position:-120% 0}}
.empty-art{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:26px;
background:radial-gradient(circle at 34% 28%,var(--pill),var(--pill-2));
box-shadow:inset 0 1px 0 var(--spec-1),0 8px 22px rgba(201,112,102,.16)}
.empty{text-align:center;padding:44px 20px;color:var(--text-2);font-size:var(--fs-xs);line-height:1.6;font-weight:var(--fw-small)}
.empty b{display:block;color:var(--text);font-size:var(--fs-sm);font-weight:500;margin-bottom:6px}
/* ---- иконки: единый язык, оживают ---- */
.ico{flex:0 0 auto;overflow:visible;transition:transform var(--t-base) var(--spring)}
.ico-draw path,.ico-draw circle,.ico-draw rect{stroke-dasharray:120;stroke-dashoffset:120;animation:icoDrawIn 900ms var(--ease) forwards}
.ico-draw *:nth-child(2){animation-delay:.09s}.ico-draw *:nth-child(3){animation-delay:.18s}.ico-draw *:nth-child(4){animation-delay:.27s}
@keyframes icoDrawIn{to{stroke-dashoffset:0}}
.dir:active .ico,.crow:active .ico{transform:scale(1.12) rotate(-4deg)}
.ico-spin{animation:icoSpin 9s linear infinite}
@keyframes icoSpin{to{transform:rotate(360deg)}}
.ico-pulse{animation:icoPulse 2.6s var(--ease) infinite}
@keyframes icoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* орб: марка строго по центру, прячется при скролле вниз */
/* знак-монограмма вытянутый: 28.85×39.4. Ширину считаем от высоты, иначе
квадратная маска оставляет пустое поле и глиф уезжает из центра. */
.orb .orb-mark{height:27px;width:calc(27px * 28.85 / 39.4);display:block;
-webkit-mask:url('/brand/logo-mark.svg') center/contain no-repeat;
mask:url('/brand/logo-mark.svg') center/contain no-repeat;
background:var(--aa-graphite)}
.orb.tuck{transform:translateY(120%) scale(.8);opacity:0;pointer-events:none}
/* ============================================================
ДО/ПОСЛЕ · слайдер сравнения + просмотрщик со свайпами
⚠️ Половину коллажа нельзя показывать через background-size:200% 100% —
это растягивает лицо. Каждая половина = ![]()
с object-fit:cover
в боксе двойного размера по оси склейки: кроп, а не сжатие.
============================================================ */
.cmp{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--bg-2);
touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.cmp-l{position:absolute;inset:0;overflow:hidden}
/* ⚠️ глобальный img{max-width:100%} зажимал половины обратно в контейнер —
inline width:205% не работал, и обе половины показывали весь коллаж */
.cmp-l img{position:absolute;object-fit:cover;max-width:none;max-height:none;
pointer-events:none;-webkit-user-drag:none}
/* размеры и сдвиг половин считает cmpInit — они зависят от реальной позиции шва */
.cmp[data-axis="none"] .cmp-l img{width:100%;height:100%;left:0;top:0}
.cmp-b{clip-path:inset(0 0 0 var(--x,50%))}
.cmp-bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:rgba(255,255,255,.94);
box-shadow:0 0 14px rgba(0,0,0,.36);transform:translateX(-1px);pointer-events:none}
.cmp-knob{position:absolute;top:50%;left:var(--x,50%);width:38px;height:38px;border-radius:50%;
transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;color:var(--aa-graphite);
background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.30)}
.cmp-knob svg{width:19px;height:19px}
.cmp-tag{position:absolute;bottom:9px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:5px 11px;border-radius:99px;color:#fff;pointer-events:none;
background:rgba(24,14,11,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.2)}
.cmp-tag-l{left:9px}
.cmp-tag-r{right:9px;background:var(--tag-after)}
.cmp-hint{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:#fff;white-space:nowrap;
padding:6px 13px;border-radius:99px;background:rgba(24,14,11,.74);backdrop-filter:blur(10px);
pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.cmp.touched .cmp-hint{opacity:0}
/* ---- просмотрщик: стрелки ВНЕ кадра, кадр 3:4 ---- */
.viewer{position:fixed;inset:0;z-index:98;display:flex;flex-direction:column;background:var(--bg);
max-width:var(--app-max);margin:0 auto;transform:translateY(100%);transition:transform 400ms var(--ease)}
.viewer.on{transform:translateY(0)}
.viewer-hd{flex:0 0 auto;display:flex;align-items:center;gap:12px;min-height:52px;
padding:calc(11px + env(safe-area-inset-top)) 16px 11px;
background:transparent;position:relative;z-index:2;transition:background 180ms var(--ease)}
.viewer-hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--head-line);opacity:0;transition:opacity 200ms var(--ease)}
.viewer.stuck .viewer-hd{background:var(--head-bg);
backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%)}
.viewer.stuck .viewer-hd::after{opacity:1}
.viewer-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 18px calc(20px + env(safe-area-inset-bottom))}
.viewer-stage{position:relative}
.vcount{position:absolute;top:10px;right:10px;z-index:3;font-size:12px;font-weight:600;color:#fff;padding:5px 12px;border-radius:99px;
background:rgba(24,14,11,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* панель листания — под кадром, на фото ничего не лежит */
.vbar{display:flex;align-items:center;gap:12px;margin-top:14px}
.vbar .vnav{flex:0 0 auto;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));border:1px solid var(--glass-stroke);
color:var(--text);box-shadow:var(--depth),inset 0 1px 0 var(--spec-1);
transition:transform var(--t-fast) var(--spring),color var(--t-base) var(--ease)}
.vbar .vnav:active{transform:scale(.9);color:var(--accent-2)}
.vbar .vnav:disabled{opacity:.28;pointer-events:none}
.vbar .vnav.prev svg{transform:rotate(180deg)}
.vbar-mid{flex:1;min-width:0;text-align:center}
.vbar-mid b{display:block;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbar-mid span{display:block;font-size:12px;font-weight:500;color:var(--text-2);margin-top:2px}
.vdots{display:flex;gap:5px;justify-content:center;padding:12px 0 2px;flex-wrap:wrap}
.vdots i{width:5px;height:5px;border-radius:99px;background:var(--line);transition:all var(--t-base) var(--spring)}
.vdots i.on{width:18px;background:var(--accent)}
/* ============================================================
ОНБОРДИНГ И ВХОД
============================================================ */
.ob{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--bg);
max-width:var(--app-max);margin:0 auto;opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.ob.on{opacity:1;pointer-events:auto}
.ob-media{position:relative;flex:0 0 auto;height:44dvh;overflow:hidden;border-radius:0 0 32px 32px;
transition:height 420ms var(--ease)}
/* на шагах с формой фото уступает место контенту */
.ob[data-step="1"] .ob-media,.ob[data-step="2"] .ob-media,.ob[data-step="3"] .ob-media{height:21dvh;min-height:132px}
.ob-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
animation:heroZoom 22s var(--ease) both}
.ob-media::after{content:"";position:absolute;inset:0;
background:linear-gradient(to bottom,rgba(30,18,14,.30),rgba(30,18,14,.02) 50%,var(--bg) 99%)}
/* ⚠️ min-height:0 обязателен: у flex-элемента дефолтный min-height:auto
не даёт сжаться ниже контента, и overflow-y:auto просто не включается */
.ob-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:8px 22px 0;display:flex;flex-direction:column}
/* ⚠️ футер накрывает край списка — без подсказки не видно, что ниже есть ещё пункты */
.ob-ft{position:relative;flex:0 0 auto;padding:14px 22px calc(18px + env(safe-area-inset-bottom))}
.ob-ft::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;pointer-events:none;
background:linear-gradient(to top,var(--bg),transparent)}
.ob-dots{display:flex;gap:6px;justify-content:center;padding:14px 0 4px}
.ob-dots i{width:6px;height:6px;border-radius:99px;background:var(--line);transition:all var(--t-base) var(--spring)}
.ob-dots i.on{width:22px;background:var(--accent)}
.ob h2{font-family:var(--font-display);font-weight:400;font-size:31px;line-height:110%;letter-spacing:-.02em;margin:6px 0 12px}
.ob p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6}
.ob-skip{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:2;
padding:8px 15px;border-radius:99px;font-size:var(--fs-2xs);color:#fff;
background:rgba(30,18,14,.36);border:1px solid rgba(255,255,255,.24);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* выбор запроса */
/* Выбор запроса — список, а не плитки: в две колонки длинные названия
обрезались («Пигментация, тон кожи…»), а строка вмещает их целиком
и даёт зону тапа во всю ширину */
.pick{display:flex;flex-direction:column;gap:7px;margin-top:6px;padding-bottom:6px}
.pick button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;text-align:left;font-weight:500;
border-radius:var(--r-md);background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
border:1px solid var(--glass-stroke);box-shadow:var(--depth),inset 0 1px 0 var(--spec-1);
font-size:var(--fs-xs);line-height:1.3;color:var(--text);
transition:transform var(--t-fast) var(--spring),border-color var(--t-base) var(--ease)}
.pick button:active{transform:scale(.985)}
.pick button.on{border-color:var(--accent);box-shadow:0 10px 26px rgba(201,112,102,.20),inset 0 1px 0 var(--spec-1)}
.pick button>span:nth-child(2){flex:1;min-width:0}
.pick .pico{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:var(--accent-text);
background:radial-gradient(circle at 34% 28%,var(--pill),var(--pill-2));
box-shadow:inset 0 1px 0 var(--spec-1)}
.pick button.on .pico{background:linear-gradient(168deg,#EFC9B9,var(--aa-blush));color:var(--accent-ink)}
/* маркер выбора справа — понятно, что можно отметить несколько */
.pick .pmark{width:23px;height:23px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
border:1.5px solid var(--line);color:transparent;
transition:all var(--t-base) var(--spring)}
.pick button.on .pmark{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.06)}
/* код подтверждения */
.otp{display:flex;gap:10px;justify-content:center;margin:18px 0 6px}
.otp input{width:56px;height:64px;text-align:center;font-size:26px!important;font-weight:500;border-radius:var(--r-md);
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));border:1px solid var(--glass-stroke);
color:var(--text);box-shadow:inset 0 1px 0 var(--spec-1)}
.otp input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,181,164,.26)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-2xs);font-weight:500;color:var(--text-2);line-height:1.55;cursor:pointer}
.check .box{width:22px;height:22px;flex:0 0 auto;border-radius:7px;border:1.5px solid var(--line);display:grid;place-items:center;
transition:all var(--t-fast) var(--spring);margin-top:1px}
.check.on .box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.check .box svg{opacity:0;transition:opacity var(--t-fast)}
.check.on .box svg{opacity:1}
/* ---- кабинет ---- */
.prof-hd{display:flex;gap:14px;align-items:center;padding:4px 0 2px}
.prof-ava{width:62px;height:62px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
font-family:var(--font-display);font-size:25px;color:var(--accent-text);
background:radial-gradient(circle at 34% 28%,var(--pill),var(--pill-2));
box-shadow:inset 0 1px 0 var(--spec-1),0 8px 22px rgba(201,112,102,.18)}
.prof-ava img{width:100%;height:100%;object-fit:cover}
.tier{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px;
background:var(--wash);color:var(--accent-text);box-shadow:inset 0 1px 0 var(--spec-1);margin-top:6px}
.bar-track{height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-top:9px}
.bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
transition:width 700ms var(--ease)}
.tile{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--line-soft);width:100%;text-align:left;
transition:transform var(--t-fast) var(--spring)}
.tile:active{transform:scale(.988)}
.tile-ic{width:40px;height:40px;border-radius:var(--r-round);display:grid;place-items:center;flex:0 0 auto;color:var(--accent-text);
background:radial-gradient(circle at 34% 28%,var(--pill),var(--pill-2));box-shadow:inset 0 1px 0 var(--spec-1)}
.tile-t{font-size:var(--fs-sm)}
.tile-s{font-size:12.5px;font-weight:500;color:var(--text-2);margin-top:3px}
/* переключатель (общий для клиента и админки) */
.sw{width:47px;height:28px;border-radius:99px;position:relative;flex:0 0 auto;
background:var(--bg-2);box-shadow:inset 0 1px 3px rgba(122,74,58,.16);
transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
transition:transform var(--t-base) var(--spring);box-shadow:0 2px 6px rgba(122,74,58,.28)}
.sw.on{background:linear-gradient(168deg,#EFC9B9,var(--aa-blush));box-shadow:0 6px 16px rgba(201,112,102,.26),inset 0 1px 0 rgba(255,255,255,.5)}
.sw.on::after{transform:translateX(19px)}
.ba-open{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--accent-text);margin-top:7px}
.ba-open svg{transform:rotate(0);width:13px;height:13px}
/* ============================================================
ВХОД СОТРУДНИКА (админка)
============================================================ */
.gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--bg);
max-width:var(--app-max);margin:0 auto;opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
.gate.on{opacity:1;pointer-events:auto}
.gate-media{position:relative;flex:0 0 auto;height:15dvh;min-height:110px;overflow:hidden;border-radius:0 0 32px 32px}
.gate-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroZoom 22s var(--ease) both}
.gate-media::after{content:"";position:absolute;inset:0;
background:linear-gradient(to bottom,rgba(30,18,14,.44),rgba(30,18,14,.06) 55%,var(--bg) 99%)}
.gate-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px 22px 0;display:flex;flex-direction:column}
.gate-ft{flex:0 0 auto;padding:14px 22px calc(18px + env(safe-area-inset-bottom))}
.gate h2{font-family:var(--font-display);font-weight:400;font-size:25px;line-height:110%;letter-spacing:-.02em;margin:6px 0 9px}
.pin{display:flex;gap:11px;justify-content:center;margin:14px 0 6px}
.pin i{width:15px;height:15px;border-radius:50%;background:var(--bg-2);box-shadow:inset 0 1px 3px rgba(122,74,58,.18);
transition:all var(--t-base) var(--spring)}
.pin i.on{background:linear-gradient(168deg,#EFC9B9,var(--aa-blush));box-shadow:0 4px 12px rgba(201,112,102,.3);transform:scale(1.12);
animation:dotPop 340ms var(--spring)}
@keyframes dotPop{0%{transform:scale(.4)}62%{transform:scale(1.34)}100%{transform:scale(1.12)}}
.pin.err{animation:pinShake .42s var(--ease)}
@keyframes pinShake{0%,100%{transform:translateX(0)}22%{transform:translateX(-9px)}44%{transform:translateX(9px)}70%{transform:translateX(-5px)}}
/* ⚠️ margin:0 auto в flex-колонке отменяет stretch — нужен явный width:100% */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;max-width:302px;margin-inline:auto}
.keys button{height:52px;border-radius:18px;font-size:23px;font-weight:500;font-variant-numeric:tabular-nums;
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));border:1px solid var(--glass-stroke);
box-shadow:var(--depth),inset 0 1px 0 var(--spec-1);
transition:transform var(--t-fast) var(--spring),background var(--t-base) var(--ease)}
.keys button:active{transform:scale(.93);background:var(--wash)}
.keys button.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-2)}
.role{display:flex;gap:9px;margin-top:6px}
.role button{flex:1;padding:12px 6px;border-radius:var(--r-md);font-size:var(--fs-2xs);font-weight:500;color:var(--text-2);
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));border:1px solid var(--glass-stroke);
box-shadow:inset 0 1px 0 var(--spec-1);transition:all var(--t-base) var(--ease)}
.role button.on{border-color:var(--accent);color:var(--text);box-shadow:0 8px 20px rgba(201,112,102,.18),inset 0 1px 0 var(--spec-1)}
/* ============================================================
СВАЙП-ДЕЙСТВИЯ на строке записи (админка)
Администратор подтверждает десятки заявок за смену —
свайп быстрее, чем открыть карточку и закрыть.
============================================================ */
.swipe{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.swipe-acts{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:stretch;gap:1px;pointer-events:none}
.swipe-acts button{width:78px;display:grid;place-items:center;gap:5px;font-size:11px;font-weight:600;color:#fff;
pointer-events:auto;transition:filter var(--t-fast)}
.swipe-acts .ok{background:var(--success)}
.swipe-acts .call{background:var(--aa-blush-deep)}
.swipe-acts button:active{filter:brightness(.9)}
.swipe-front{position:relative;background:var(--bg);transition:transform 320ms var(--ease);will-change:transform;z-index:1}
.swipe.open .swipe-front{transform:translateX(-158px)}
.swipe .ap{border-bottom:0}
/* ---- скелет первой отрисовки ---- */
.sk-row{display:flex;gap:14px;padding:14px 0;align-items:center}
.sk-box{border-radius:16px;background:linear-gradient(100deg,var(--bg-2) 30%,var(--wash) 50%,var(--bg-2) 70%);
background-size:220% 100%;animation:skShine 1.4s linear infinite}
.sk-line{height:12px;border-radius:99px;background:linear-gradient(100deg,var(--bg-2) 30%,var(--wash) 50%,var(--bg-2) 70%);
background-size:220% 100%;animation:skShine 1.4s linear infinite}
/* ============================================================
СКВОЗНАЯ НАВИГАЦИЯ ПО КАРТОЧКАМ
Открыл услугу/врача/аппарат — листаешь стрелками и свайпом,
не возвращаясь в список.
============================================================ */
.pager{display:flex;align-items:center;gap:1px;margin-left:6px;flex:0 0 auto;
border-radius:var(--r-pill);padding:3px;
background:linear-gradient(158deg,var(--glass-top),var(--glass-bot));
border:1px solid var(--glass-stroke);box-shadow:inset 0 1px 0 var(--spec-1)}
.pager button{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);
transition:transform var(--t-fast) var(--spring),color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.pager button:active{transform:scale(.88);background:var(--wash);color:var(--accent-2)}
.pager button:disabled{opacity:.26;pointer-events:none}
.pager button.prev svg{transform:rotate(180deg)}
.pager .pg-n{font-size:11.5px;font-weight:600;color:var(--text-2);padding:0 4px;white-space:nowrap;
font-variant-numeric:tabular-nums}
.screen.slide-l{animation:slideL 320ms var(--ease) both}
.screen.slide-r{animation:slideR 320ms var(--ease) both}
@keyframes slideL{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
/* ⚠️ инлайн-