:root{
--wa:#C77DA8; --wa-dark:#6E4A6B; --wa-deep:#8A4E7E; --wa-soft:#F6ECF3;
/* Тёмный конец градиента линии жизни. В светлой теме — прежний
лиловый, в тёмной задан свой (7 сентября). */
--wa-dark2:#9A5C8C;
--bg:#FFFFFF; --panel:#F7F8FA;
/* --ink-1 — тот же цвет, что --ink. Он рассыпан по файлу больше сорока
раз, но объявлен не был: браузер молча подставлял чёрный по умолчанию,
и это сходило с рук, пока цвет не понадобился ФОНОМ — тёмное облачко
над «плюсом» вышло белым, а белый текст в нём стал невидимым. */
--ink:#111B21; --ink-1:#111B21; --ink-2:#667781; --ink-3:#9AA5AC; --line:#E9EDF0;
--amber:#F0A63C; --amber-soft:#FDF2E2;
--sleep:#6B7BE0; --food:#E8894A;
/* ===== ДВИЖЕНИЕ =====
1 сентября, слово хозяина: «возьми то, что упомянул, и поставь».
Правило из набора Эмиля Ковальски (Vercel, Linear): ПОЯВЛЕНИЕ —
ease-out, ИСЧЕЗНОВЕНИЕ — ease-in.
Почему так, а не наоборот. Появление должно начинаться быстро и
мягко тормозить у места — тогда вещь читается как приехавшая и
вставшая. Исчезновение наоборот: тронулось не спеша и ускорилось,
уходя, — глаз не тянут за уходящим. Браузер по умолчанию ставит
ease (медленно с обоих концов), и всё выглядит вязким: у нас в
файле без малого сорок переходов были именно такими.
--в — появление (сильный ease-out)
--из — исчезновение (ease-in)
--мяг — общий, для мелочей вроде цвета рамки */
--в:cubic-bezier(.16,1,.3,1);
--из:cubic-bezier(.4,0,1,1);
--мяг:cubic-bezier(.4,0,.2,1);
/* Мягкая тень вместо сплошной рамки — второе правило оттуда же.
Сплошная линия режет глаз и делает поверхность плоской; тень той же
силы отделяет мягче и даёт глубину. Держим в переменной, чтобы
менять в одном месте. */
--тень-1:0 1px 2px rgba(40,20,35,.06), 0 2px 8px rgba(40,20,35,.05);
--тень-2:0 4px 14px rgba(40,20,35,.10), 0 1px 3px rgba(40,20,35,.06);
}
/* ===== ТЁМНАЯ ТЕМА =====
16 августа. Раньше она делалась одной строкой: invert(1) hue-rotate(180deg)
на всю страницу. Это буквально негатив фотоплёнки — так оно и выглядело:
белое становилось чёрным, розовое ядовито-зелёным, а фотографии людей
превращались в рентген. Дёшево в работе, дёшево на вид.
Хуже того, поворот оттенка ломал сами снимки: лица в карусели, аватары,
нарисованные кадры — всё уходило в чужие цвета, а поправить это было
нельзя, потому что переворачивалась вся страница целиком.
Теперь тема сделана как положено — своими цветами. Правила подбора:
· фон не чёрный, а тёмно-сливовый: чистый чёрный на телефоне режет
глаз ночью и делает вид дешёвым;
· розовый пришлось поднять по светлоте — на тёмном фоне прежний
тонул и читался серым;
· текст не белый, а чуть тёплый: белое по тёмному «звенит»
и утомляет через минуту чтения;
· линии светлее фона, а не темнее: на тёмном разделители работают
наоборот.
Снимки при этом не трогаются вовсе — лица остаются лицами. */
/* ===== ТЁМНАЯ ТЕМА: ТЁПЛАЯ СЕРО-КОРИЧНЕВАЯ ОСНОВА =====
7 сентября, слово хозяина: «тёмная тема АЙЫЫ напоминает чернила,
вылившиеся на тетрадь — резкий жгучий запах вперемешку с
испорченной тетрадью. Скопируй тёмную тему Клода».
Он про фиолетово-чёрный #17121A с сиреневой примесью во всём:
в фоне, рамках, полутонах. Такой цвет и правда читается как пятно,
а не как бумага в темноте.
Основу беру тёплую серо-коричневую, как у Клода: тот же ход —
не «чёрный с оттенком», а тёмная бумага. Три ступени вместо двух:
ящик разговоров темнее полотна, полотно темнее карточек. Текст
кремовый, не голубоватый: на тёплом фоне холодный белый выглядит
синим пятном.
АКЦЕНТ ОСТАВЛЯЮ РОЗОВЫМ. У Клода он оранжевый, но розовый — это
сам АЙЫЫ: он в светлой теме, в знаке, на слайдах каруселей. Скопировать
и его значило бы одеть приложение в чужое лицо. Скажешь — поменяю
одной строкой. */
html[data-theme="dark"]{
/* ===== В ТЁМНОЙ ТЕМЕ РОЗОВОГО НЕТ =====
7 сентября, слово хозяина: «светлая и розовая — это из дома: мама
кормила нас кёрчэхом со смородиной, и ели мы это утром, в светлое
время. А тёмное время не до еды. Розовый убрать, а то несерьёзно».
Довод не про вкус, а про смысл, и он верный: у двух тем разные
роли. Светлая — дом и утро, там розовый на месте и остаётся
нетронутым. Тёмная — работа, ей нужен спокойный тёплый акцент.
19 октября, слово хозяина: «тёмная тема очень похожа на Claude» — перешли на фиолетовую гамму Superepost
(фон #0D0B14, акцент #7B5CFF). Ниже — прежнее объяснение терракоты, для истории.
Берём терракотовый, как у Клода: он из той же тёплой семьи, что
и фон (тон 15 против 60), поэтому не спорит с ним, а лежит рядом.
Розовый в самих каруселях это не трогает — там цвета рисуются
в кадре и живут своей жизнью. */
--wa:#7B5CFF; --wa-dark:#2A2140; --wa-deep:#B79BFF; --wa-dark2:#5A3FD9;
/* ЕЩЁ НА СТУПЕНЬ ТЕМНЕЕ. 7 сентября, второе слово хозяина: «у тебя
чернее, я же просил 1в1». Первый заход дал #1A1423 — средний
серый; у Клода полотно заметно глубже. Опускаем всё на ступень:
ящик почти чёрный, полотно тёмное, карточки на нём читаются как
карточки, а не сливаются с фоном. */
--bg:#0D0B14; --panel:#1A1625;
--ink:#F3EFF8; --ink-1:#F3EFF8; --ink-2:#C4BCD3; --ink-3:#A79FB8;
--line:#2A2535;
--amber:#F0A63C; --amber-soft:#231C31;
}
/* Мягкий подсвет: сплошной, а не прозрачный — прозрачный розовый на
тёмном даёт грязь. На тёплой основе он тоже тёплый. */
html[data-theme="dark"]{ --wa-soft:#221B33; --ink-3:#A79FB8; }
/* ПОЛОСА «АЙЫЫ СОБИРАЕТ» НА ТЁМНОМ. 14 сентября, снимок хозяина:
презентация собиралась, а на экране была пустая тёмная плашка —
«на тёмном фоне тёмный шрифт».
Так и есть. У .car-load фон берётся из --wa-soft, и на тёмной теме
он темнеет (строка выше), а текст стоит на --wa-dark — тёмно-сливовый
и в тёмной теме не меняется. Тёмное по тёмному. Кружок-вертушка
светлый, поэтому он один и был виден.
Тем же местом лечится и надпись «не получилось собрать»: правило
одно на обе. */
/* 9 октября, снимок хозяина: «почему в тёмной теме пишет светлой темой?» — розовый текст и розовое кольцо
вертушки — это светлая тема. В тёмной: светлый тёплый текст, кольцо серое с оранжевым. */
html[data-theme="dark"] .car-load{ color:#ECE6DE; }
html[data-theme="dark"] .car-spin{ border-color:#332846; border-top-color:#886AE0; }
/* Ящик разговоров на ступень темнее полотна — как у Клода: взгляд
сразу отделяет список от работы. */
/* Стоит ПОСЛЕ общего списка (строка ~116), иначе тот перебьёт: там
.chatlist получает --panel вместе с полусотней других карточек. */
/* Белые карточки прописаны цветом прямо в правилах — их больше сотни,
переписывать каждую значило бы месяц работы и новые ошибки. Здесь
подменяем разом: всё, что было белым, становится цветом панели. */
html[data-theme="dark"] .cmsg-b,
html[data-theme="dark"] .car-cell,
html[data-theme="dark"] .fb-box,
html[data-theme="dark"] .plan-i,
html[data-theme="dark"] .cl-me,
html[data-theme="dark"] .fcard,
html[data-theme="dark"] .lk-c,
html[data-theme="dark"] .mlb-c,
html[data-theme="dark"] .ab-note,
html[data-theme="dark"] .car-anim-b,
html[data-theme="dark"] .gd-card,
html[data-theme="dark"] .ab-tell,
html[data-theme="dark"] .insp-pro,
html[data-theme="dark"] .cfa-b,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .chatlist,
html[data-theme="dark"] .mld-b,
/* 23 августа, слово хозяина: всплывающие меню оставались белыми пятнами
посреди тёмного приложения. Оба выпадают поверх всего, и белый лист
в темноте бьёт по глазам сильнее любой другой карточки. */
html[data-theme="dark"] .dots-menu,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .brand-av.has{
background:var(--panel);
border-color:var(--line);
color:var(--ink);
}
html[data-theme="dark"] body{background:#0F0B11;}
html[data-theme="dark"] .pg,
html[data-theme="dark"] #phone{background:var(--bg);}
/* Поля ввода: на тёмном белое поле бьёт по глазам сильнее всего. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
background:var(--panel); color:var(--ink); border-color:var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--ink-3);}
/* РЯДЫ ВЫБОРА НА ТЁМНОМ. 4 сентября, снимок хозяина: «Саха тыла» и
«Харана» выбраны, а выглядят выключенными.
Мой недосмотр. У .seg и .seg3 фон написан цветом прямо — background:#fff,
а выбранной кнопке дан var(--wa-dark). В тёмной теме --wa-dark стал
почти чёрным (#2A1A28), и вышло наоборот: невыбранные светятся белым,
выбранная тонет в фоне. Подмена «всё белое → панель» до этих кнопок
не дошла: она перечисляет карточки поимённо, а рядов там не было.
Здесь всё переворачивается обратно: невыбранная — цвет панели,
выбранная — заметный розовый, на нём тёмные буквы. */
html[data-theme="dark"] .seg button,
html[data-theme="dark"] .seg3 button{
background:var(--panel); color:var(--ink-2); border-color:var(--line);
}
html[data-theme="dark"] .seg button.on,
html[data-theme="dark"] .seg3 button.on{
background:var(--wa); color:#1A121C; border-color:var(--wa);
}
/* Та же беда у одиночных кнопок настроек и у кнопок каруселей. */
html[data-theme="dark"] .s-key-btn,
html[data-theme="dark"] .car-btn,
html[data-theme="dark"] .car-edit{
background:var(--panel); color:var(--ink); border-color:var(--line);
}
html[data-theme="dark"] .car-btn.main{background:var(--wa); color:#1A121C; border-color:var(--wa);}
/* ===== БУКВЫ НА КНОПКАХ РЯДОВ В ТЁМНОЙ ТЕМЕ =====
5 сентября, слово хозяина: «может, белый шрифт в тёмной теме
в кнопках, а то нифига не видно же».
Так и есть. Общее правило тёмной темы задаёт этим кнопкам фон и
рамку — и только. Цвет текста у .car-f прописан числом (#5b4a56),
тёмная тема его не перекрывает, и тёмно-серые буквы остаются на
тёмном фоне. У выбранной кнопки то же с розовым #8d5b76, у подписи
ряда — с #9c8f98.
Это общая болезнь: цвета, записанные числом, а не переменной, тема
переключить не может. Правлю здесь три места, которые видно на
экране карусели, а не весь файл: разом переписывать сотню правил
значит завести десяток новых ошибок. */
html[data-theme="dark"] .car-f{color:var(--ink-1);}
/* Выбранная кнопка ряда: тёплая, а не розово-лиловая. Числа стояли
с 5 сентября, когда тема была фиолетовой (7 сентября). */
html[data-theme="dark"] .car-f.on{color:#D6CBF5; border-color:var(--wa);
background:#28223A;}
html[data-theme="dark"] .car-font-l{color:var(--ink-3);}
/* Пометка «!» у шрифта без якутских букв: тёмно-красный на тёмном
не читается. */
html[data-theme="dark"] .car-f i{color:#8F6FF0;}
/* ===== ТЁМНАЯ ТЕМА: ВШИТЫЕ ЦВЕТА ===== 4 сентября.
Хозяин прислал снимок: имя «Власий» почти чёрное на почти чёрном.
Причина общая, а не в одном месте. По приложению больше двухсот
правил, где фон написан словом — background:#fff, — и ещё шесть
десятков, где буквы заданы почти чёрным. Ранняя подмена «белое →
панель» перечисляла карточки поимённо, их там два десятка, и всё
остальное осталось белым или нечитаемым.
Список ниже собран по самой таблице стилей, не руками: каждое
правило с белым фоном и каждое с почти чёрными буквами. Поэтому он
полный. Действует только в тёмной теме — светлая не тронута.
Если где-то белый фон был осмысленным (значок на снимке), это будет
видно глазом, и такое место надо будет вынести отдельным правилом
НИЖЕ этого блока. */
html[data-theme="dark"] #pg-life,
html[data-theme="dark"] .ab-note,
html[data-theme="dark"] .ab-tell,
html[data-theme="dark"] .acc-sheet .acc-b,
html[data-theme="dark"] .ad-e-again,
html[data-theme="dark"] .ad-e-bottom,
html[data-theme="dark"] .ad-e-l input:focus,
html[data-theme="dark"] .ad-e-l textarea:focus,
html[data-theme="dark"] .ad-e-w,
html[data-theme="dark"] .adm-check button,
html[data-theme="dark"] .ai-row button.undo,
html[data-theme="dark"] .al-chat,
html[data-theme="dark"] .al-fin,
html[data-theme="dark"] .al-next,
html[data-theme="dark"] .arrow,
html[data-theme="dark"] .asb,
html[data-theme="dark"] .avc-sheet .avc-b,
html[data-theme="dark"] .bfilters .chip,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .brand-av img,
html[data-theme="dark"] .brand-av.has,
html[data-theme="dark"] .bs-btn,
html[data-theme="dark"] .burger i,
html[data-theme="dark"] .buy-minus,
html[data-theme="dark"] .buy-plus,
html[data-theme="dark"] .cam-intent,
html[data-theme="dark"] .cam-shoot-inner,
html[data-theme="dark"] .car-anim-b,
html[data-theme="dark"] .car-arrow,
html[data-theme="dark"] .car-edit,
html[data-theme="dark"] .car-f,
html[data-theme="dark"] .car-fail,
html[data-theme="dark"] .car-veil-d i,
html[data-theme="dark"] .car-view-edit button,
html[data-theme="dark"] .cb-1,
html[data-theme="dark"] .cb-a,
html[data-theme="dark"] .cbadge,
html[data-theme="dark"] .cbox,
html[data-theme="dark"] .cbox input:focus,
html[data-theme="dark"] .cbox textarea:focus,
html[data-theme="dark"] .cfa-b,
html[data-theme="dark"] .cfa-name,
html[data-theme="dark"] .cfa-when input,
html[data-theme="dark"] .chin input,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .chk,
html[data-theme="dark"] .ck2,
html[data-theme="dark"] .cl-load,
html[data-theme="dark"] .cl-me,
html[data-theme="dark"] .cl-menu,
html[data-theme="dark"] .clm-ev,
html[data-theme="dark"] .clm-in,
html[data-theme="dark"] .cmsg-ask button,
html[data-theme="dark"] .cmsg-paint button.stk-go,
html[data-theme="dark"] .cmsg-paint button:not(:first-child),
html[data-theme="dark"] .cofld input:focus,
html[data-theme="dark"] .cofld select:focus,
html[data-theme="dark"] .cp,
html[data-theme="dark"] .crnone button,
html[data-theme="dark"] .cs-inner,
html[data-theme="dark"] .cs-share button,
html[data-theme="dark"] .ct-search input,
html[data-theme="dark"] .cv-prog-b,
html[data-theme="dark"] .cv-prog-min,
html[data-theme="dark"] .cv-prog-stop,
html[data-theme="dark"] .cvq-i,
html[data-theme="dark"] .cw,
html[data-theme="dark"] .dc-btns button,
html[data-theme="dark"] .dmq,
html[data-theme="dark"] .dmsg,
html[data-theme="dark"] .dots-menu,
html[data-theme="dark"] .drop-hint span,
html[data-theme="dark"] .dt.on,
html[data-theme="dark"] .edfree,
html[data-theme="dark"] .edt,
html[data-theme="dark"] .ek,
html[data-theme="dark"] .eprow input,
html[data-theme="dark"] .ev-prod,
html[data-theme="dark"] .fb-box,
html[data-theme="dark"] .fb-send.light,
html[data-theme="dark"] .fba-i button,
html[data-theme="dark"] .fcard,
html[data-theme="dark"] .fld input:focus,
html[data-theme="dark"] .fld select:focus,
html[data-theme="dark"] .fld-b,
html[data-theme="dark"] .fr-card,
html[data-theme="dark"] .fr-sh-b,
html[data-theme="dark"] .fsc>svg,
html[data-theme="dark"] .gd-card,
html[data-theme="dark"] .geo button.on,
html[data-theme="dark"] .geoask,
html[data-theme="dark"] .glist button,
html[data-theme="dark"] .hact,
html[data-theme="dark"] .hdot,
html[data-theme="dark"] .ic-card,
html[data-theme="dark"] .in-card,
html[data-theme="dark"] .insp-pro,
html[data-theme="dark"] .iq-line,
html[data-theme="dark"] .iq-row .iq-next,
html[data-theme="dark"] .kl-act,
html[data-theme="dark"] .klf-x,
html[data-theme="dark"] .ksx,
html[data-theme="dark"] .lang-sheet .lang-b,
html[data-theme="dark"] .lang-sheet .lang-i,
html[data-theme="dark"] .lc-input,
html[data-theme="dark"] .lcm-good,
html[data-theme="dark"] .lfbtn,
html[data-theme="dark"] .lk-c,
html[data-theme="dark"] .llpi-act button,
html[data-theme="dark"] .llpop,
html[data-theme="dark"] .llz button,
html[data-theme="dark"] .lsearch:focus,
html[data-theme="dark"] .mcard2 .b1,
html[data-theme="dark"] .mchips .chip,
html[data-theme="dark"] .me-tag,
html[data-theme="dark"] .mf-ig,
html[data-theme="dark"] .mf-ws,
html[data-theme="dark"] .mic-lang,
html[data-theme="dark"] .mic-note button,
html[data-theme="dark"] .mk-add,
html[data-theme="dark"] .mk-way,
html[data-theme="dark"] .mk-why-r,
html[data-theme="dark"] .mlb-c,
html[data-theme="dark"] .mld-b,
html[data-theme="dark"] .mllay-mv button,
html[data-theme="dark"] .mlsh-o,
html[data-theme="dark"] .mset-b1,
html[data-theme="dark"] .msg .mb,
html[data-theme="dark"] .mypost-card,
html[data-theme="dark"] .nobirth button,
html[data-theme="dark"] .ob,
html[data-theme="dark"] .ob-fld-b,
html[data-theme="dark"] .ob-i:focus,
html[data-theme="dark"] .obsx,
html[data-theme="dark"] .of-course,
html[data-theme="dark"] .ordcard,
html[data-theme="dark"] .own .oi,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .pb-way,
html[data-theme="dark"] .pb1,
html[data-theme="dark"] .pbar,
html[data-theme="dark"] .pbbtns,
html[data-theme="dark"] .pbfld input:focus,
html[data-theme="dark"] .pbfld textarea:focus,
html[data-theme="dark"] .pchips .chip,
html[data-theme="dark"] .pe-b,
html[data-theme="dark"] .pe-b2,
html[data-theme="dark"] .pe-car,
html[data-theme="dark"] .pe-free:focus,
html[data-theme="dark"] .pe-row,
html[data-theme="dark"] .pe-sm,
html[data-theme="dark"] .pe-text input:focus,
html[data-theme="dark"] .pe-text textarea:focus,
html[data-theme="dark"] .pe-zoom-c,
html[data-theme="dark"] .plan-auto,
html[data-theme="dark"] .plan-btn,
html[data-theme="dark"] .plan-buy.org,
html[data-theme="dark"] .plan-pb,
html[data-theme="dark"] .plan-sheet .plan-b,
html[data-theme="dark"] .plan-sheet .plan-n i,
html[data-theme="dark"] .pline,
html[data-theme="dark"] .pline .arow .ck,
html[data-theme="dark"] .pm-cats button.on,
html[data-theme="dark"] .pnav,
html[data-theme="dark"] .pshare,
html[data-theme="dark"] .pv-sheet .pv-b,
html[data-theme="dark"] .qa-in input,
html[data-theme="dark"] .qa-m,
html[data-theme="dark"] .rail-arrow,
html[data-theme="dark"] .rl-price-bar,
html[data-theme="dark"] .s-key-btn,
html[data-theme="dark"] .save-sheet .ss-alt,
html[data-theme="dark"] .save-sheet .ss-b,
html[data-theme="dark"] .sb1,
html[data-theme="dark"] .se-card,
html[data-theme="dark"] .se-in:focus,
html[data-theme="dark"] .se-poshint button,
html[data-theme="dark"] .se-sizes button,
html[data-theme="dark"] .searchres,
html[data-theme="dark"] .seg button,
html[data-theme="dark"] .seg3 button,
html[data-theme="dark"] .self-card.self-ask,
html[data-theme="dark"] .setchip,
html[data-theme="dark"] .sh-btn,
html[data-theme="dark"] .sh-card,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .skcard.done,
html[data-theme="dark"] .slot .pl,
html[data-theme="dark"] .soon input:focus,
html[data-theme="dark"] .st-next,
html[data-theme="dark"] .st-prev,
html[data-theme="dark"] .stk-more-b,
html[data-theme="dark"] .story-seg-fill,
html[data-theme="dark"] .sw:after,
html[data-theme="dark"] .tb1,
html[data-theme="dark"] .tbtn.light,
html[data-theme="dark"] .td-more,
html[data-theme="dark"] .tday-g,
html[data-theme="dark"] .tk-done,
html[data-theme="dark"] .tok-p,
html[data-theme="dark"] .transfer,
html[data-theme="dark"] .two2 input:focus,
html[data-theme="dark"] .vt-sheet .vt-h1,
html[data-theme="dark"] .vt-sheet .vt-h2,
html[data-theme="dark"] .wch input,
html[data-theme="dark"] .wch-h button,
html[data-theme="dark"] .wch-row input{
background:var(--panel); border-color:var(--line);
}
/* Ящик разговоров на ступень темнее полотна — как у Клода: взгляд
сразу отделяет список от работы (7 сентября). */
html[data-theme="dark"] .chatlist{background:#0C0910;}
/* Карточка «Төһө бардын» была фиолетовой — последнее розово-лиловое
пятно в тёмной теме (7 сентября). Тёплая, из той же семьи, что фон
и акцент. */
html[data-theme="dark"] .mlnow{
background:linear-gradient(155deg,#221C33,#2E244A);}
/* СВОИ СООБЩЕНИЯ: ТЁМНЫЕ БУКВЫ НА РОЗОВОМ. Померено 7 сентября: белый
на розовом даёт контраст 2,4 при норме 4,5 — свой же вопрос читался
хуже всего на экране. Розовый оставляем, меняем буквы. */
html[data-theme="dark"] .cmsg.me .cmsg-b{color:var(--ink);}
/* Пузырь своего вопроса приглушаем. Сплошная яркая заливка на тёмном
занимает половину экрана и кричит громче ответа, ради которого
человек и пришёл. Оставляем розовый, но как подложку: цвет узнаётся,
а глаз ведёт к ответу. Светлой темы это не касается — там ты сказал,
что всё в порядке. */
html[data-theme="dark"] .cmsg.me .cmsg-b{background:#20192B;color:var(--ink);
border:1px solid #292139;}
/* ===== ПЛАШКА СООБЩЕНИЙ И ОШИБОК =====
7 сентября, слово хозяина: «когда ошибки выходят, они ужасно белого
цвета». Так и есть: плашка красится в --ink, а в тёмной теме это
почти белый — белые буквы на белом фоне, то есть сообщения об
ошибке не видно вовсе. Раньше --ink был тёмным, и правило работало.
В тёмной теме плашка тёмная, буквы светлые, рамка как у карточек. */
html[data-theme="dark"] .toast{background:#221A2E; color:var(--ink);
border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.45);}
/* ТА ЖЕ ЛОВУШКА ЕЩЁ В ДВУХ МЕСТАХ. Нашёл сплошным поиском по правилам:
фон красится в --ink, и в тёмной теме он светлый, а буквы белые.
Крестик на вложении и кнопки в окнах «скоро», «деньги», «защита». */
html[data-theme="dark"] .chat-att-x{background:#221B2E; color:var(--ink);}
html[data-theme="dark"] .soon > button,
html[data-theme="dark"] .money button,
html[data-theme="dark"] .guard button{background:var(--wa); color:#181424;}
/* ===== СТОПКА «СОБРАТЬ» =====
Кружки и подписи были фиолетово-розовыми числами (#3a2434) — с новой
тёплой темой они выпадали из общего вида (7 сентября). */
html[data-theme="dark"] .fab-item button{background:#221B2E;}
html[data-theme="dark"] .fab-item button:active{background:#2B223B;}
html[data-theme="dark"] .fab-l{background:rgba(20,20,18,.9); color:var(--ink-1);}
/* Зелёные кнопки пробовали 7 сентября — не пошли, вернули как было
в тот же час. Оставляю след, чтобы не заходить сюда второй раз:
зелёный на тёплом тёмном фоне спорит с терракотовым, и приложение
разом теряет собранность. */
/* РОЗОВЫЕ КНОПКИ: ТЁМНЫЕ БУКВЫ. Белым по #D793B6 выходит 2,4 при норме
4,5 — это все главные кнопки приложения разом: «Новый разговор»,
«Войти», «Добавить», «Сохранить», «Запомни это». Померено сплошным
проходом по экрану 7 сентября. */
html[data-theme="dark"] .cl-new,
html[data-theme="dark"] #h-login,
html[data-theme="dark"] .mladd-s,
html[data-theme="dark"] .ml-meet-b,
html[data-theme="dark"] #ml-meet-b,
html[data-theme="dark"] .save,
html[data-theme="dark"] .lrn-buy,
html[data-theme="dark"] .fb-send,
html[data-theme="dark"] .car-btn.main{color:#181424;}
html[data-theme="dark"] .cmsg.me .cmsg-b a{color:var(--wa-deep);}
/* Кнопка «Скопировать» была приглушена до .75 — на тёплом фоне это
4,1. Поднимаем: она нужна часто. */
html[data-theme="dark"] .cmsg-copy button{opacity:.9;}
html[data-theme="dark"] .ad-e-again,
html[data-theme="dark"] .ad-e-l input,
html[data-theme="dark"] .ad-e-l textarea,
html[data-theme="dark"] .ad-e-w,
html[data-theme="dark"] .ad-e-wait b,
html[data-theme="dark"] .adm-btns button.adm-off,
html[data-theme="dark"] .agecap,
html[data-theme="dark"] .authshare .asi b,
html[data-theme="dark"] .bfoot,
html[data-theme="dark"] .car-view-edit button,
html[data-theme="dark"] .care,
html[data-theme="dark"] .chbanner,
html[data-theme="dark"] .cmsg-ask button,
html[data-theme="dark"] .cmsg-paint button:not(:first-child),
html[data-theme="dark"] .dhead .from,
html[data-theme="dark"] .dnote.warn,
html[data-theme="dark"] .lfw,
html[data-theme="dark"] .note-t,
html[data-theme="dark"] .pe-b2,
html[data-theme="dark"] .pe-car,
html[data-theme="dark"] .pe-free,
html[data-theme="dark"] .pe-more,
html[data-theme="dark"] .pe-note.wall,
html[data-theme="dark"] .pe-sm,
html[data-theme="dark"] .pe-text input,
html[data-theme="dark"] .pe-text textarea,
html[data-theme="dark"] .pe-zoom-c,
html[data-theme="dark"] .ritual.night button,
html[data-theme="dark"] .sleeprow,
html[data-theme="dark"] .tfwarn,
html[data-theme="dark"] .tok-p span,
html[data-theme="dark"] .warn{
color:var(--ink);
}
/* Шапки страниц: имя в них наследовало тёмный цвет страницы. */
html[data-theme="dark"] .pbar,
html[data-theme="dark"] .pbi b{color:var(--ink);}
/* Знак АЙЫЫ тёмный по рисунку — на тёмном фоне его не видно.
Осветляем только его, снимков это не касается. */
html[data-theme="dark"] .aiyy-mark img,
html[data-theme="dark"] .aiyy-hero-mark{filter:invert(1) brightness(1.6);}
/* Montserrat — шрифт крупных чисел и служебных надписей.
Отсюда убраны .aiyy-logo и .ttl: они теперь набираются Stengazeta,
а это правило со своим !important перебивало бы её молча — самая
обидная порода ошибок, когда правка сделана, а на экране ничего
не меняется. */
.aiyy-brand, .ob-h, .ob-mark, .cw-hi,
.mln-v, .life-n, #life-n, .ob-big, .chat-logo, .aiyy-tag,
.mlnow-in .mln-v, .lifehead .myday b{
font-family:'Inter', sans-serif !important; letter-spacing:-.01em;
}
/* ЯКУТСКИЙ И MONTSERRAT НЕ ДРУЖАТ.
15 августа. В Montserrat нет ү, ҥ, ө, һ, ҕ — проверено по таблицам
глифов ещё в июле, потому его и не дают выбирать для карусели на саха.
Но правило выше набирает им приветствие (.aiyy-tag) и заголовки,
и с приходом якутской оболочки эти буквы посыпались бы: строка
«Күнүҥ хайдах ааспытын кэпсээ» половиной знаков ушла бы в подменный
шрифт, вразнобой по ширине и насыщенности.
Поэтому на якутском тут Inter — он якутские буквы держит. Признак
языка ставит langApply() в lang документа. */
html[lang="sah"] .aiyy-brand,
html[lang="sah"] .ob-h,
html[lang="sah"] .ob-mark,
html[lang="sah"] .cw-hi,
html[lang="sah"] .ob-big,
html[lang="sah"] .chat-logo,
html[lang="sah"] .aiyy-tag,
html[lang="sah"] .hdr .ttl,
html[lang="sah"] .rail-h b,
html[lang="sah"] .cl-head b,
html[lang="sah"] .fb-h b,
html[lang="sah"] .mlcap{
font-family:'Inter', sans-serif !important; letter-spacing:0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* Экран не должен ездить.
На телефоне страница жила как обычный сайт: адресная строка то пряталась,
то возвращалась, всё содержимое подпрыгивало, а при оттягивании вниз
появлялась пружина. Отсюда ощущение, что интерфейс «то сближается,
то двигается».
Лечится тремя вещами: страница прибита к окну и сама не прокручивается;
высота считается в dvh — она учитывает пропадающую адресную строку,
тогда как 100vh врёт на величину этой строки; и отключена пружина. */
html,body{margin:0;padding:0;background:#DDE3E7;height:100%;overflow:hidden;
overscroll-behavior:none;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',sans-serif;color:var(--ink);display:flex;justify-content:center;
position:fixed;inset:0;}
/* 11 октября, снимки хозяина (iPhone и Android, тёмная тема): снизу под полем ввода — светлая полоса. Это фон страницы
#DDE3E7 (серая рамка вокруг приложения для компьютера), он виден в нижней зоне телефона. На телефоне фон страницы —
цвет приложения; серая рамка остаётся только на широком экране. */
@media (max-width:1023px){ html,body{background:var(--bg) !important;} }
html[data-theme="dark"]{color-scheme:dark;}
#phone{width:100%;max-width:420px;height:100dvh;max-height:880px;background:var(--bg);
position:relative;overflow:hidden;display:flex;flex-direction:column;
overscroll-behavior:contain;}
/* Старым браузерам без dvh оставляем прежнюю высоту. */
@supports not (height: 100dvh){ #phone{height:100vh;} }
/* ВО ВЕСЬ ЭКРАН НА ЛЮБОМ ТЕЛЕФОНЕ. 30 сентября, снимок хозяина: на
большом айфоне (430 точек в ширину, 932 в высоту) приложение стояло
узкой коробкой 420×880 с пустыми полями по бокам и снизу. Рамка нужна
только на компьютере — там своя раскладка с 1024 точек. */
@media (max-width:1023px){ #phone{max-width:none;max-height:none;} }
button{font-family:'Inter',sans-serif;cursor:pointer;}
.tiny{font-size:12px;color:var(--ink-3);}
.hdr{background:var(--wa-dark);color:#fff;padding:15px 16px 0;flex:0 0 auto;}
.hdr .top{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;}
/* ЗАГОЛОВКИ ЭКРАНОВ — ТЕМ ЖЕ ШРИФТОМ, ЧТО «РАЗГОВОРЫ».
16 августа. Заголовок в фиолетовой шапке набирался Стенгазетой, а шапка
бокового меню — Montserrat. Рядом это читалось как два разных
приложения: Стенгазета плакатная, только прописные, узкая; Montserrat
мягче и приветливее.
Плакатный шрифт оставлен там, где он и уместен: знак, надпись АЙЫЫ на
пустом экране, слайды карусели. Разделам приложения он не нужен —
они не вывеска, а навигация. */
.hdr .ttl{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;
letter-spacing:-.01em;}
.hdr .ttl small{font-weight:500;font-size:10.5px;opacity:.5;margin-left:6px;}
.hright{display:flex;align-items:center;gap:4px;}
/* Кнопка входа рядом с лампой. Единственное цветное пятно в этом ряду:
остальное — серые значки, поэтому мимо неё не пройдёшь. Экран она не
загораживает — приложением можно пользоваться, не входя. */
.aiyy-right{display:flex;align-items:center;gap:8px;}
.h-login{border:none;border-radius:999px;background:var(--wa);color:#fff;
font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 15px;cursor:pointer;
white-space:nowrap;}
.h-login:active{background:var(--wa-deep);}
.hsearch{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;opacity:.85;}
.hdots{color:#fff;cursor:pointer;padding:4px 6px;display:flex;align-items:center;opacity:.85;}
.dots-menu{position:absolute;top:52px;right:8px;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:100;min-width:220px;overflow:hidden;}
.dm-item{padding:13px 18px;font-size:14.5px;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:10px;}
.dm-item:active{background:var(--panel);}
.dm-sep{height:1px;background:var(--line);margin:2px 0;}
/* НИЖНЯЯ НАВИГАЦИЯ */
.bottom-nav{position:absolute;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;z-index:35;padding-bottom:env(safe-area-inset-bottom,0);}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 8px;background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;}
.bnav-item span:last-child{font-size:10.5px;font-weight:600;color:var(--ink-3);}
.bnav-icon{width:24px;height:24px;color:var(--ink-3);display:block;}
.bnav-item.on .bnav-icon{color:var(--wa);}
.bnav-item.on span:last-child{color:var(--wa);}
/* AIYY — perplexity-стиль */
#pg-chat{padding-bottom:0 !important;}
#pg-chat.on{display:flex !important;flex-direction:column;position:absolute;inset:0;background:var(--bg);z-index:20;}
.aiyy-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
padding:14px 12px 12px;padding-top:calc(14px + env(safe-area-inset-top,0));}
.aiyy-tab{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-2);
font-family:'Inter',sans-serif;cursor:pointer;}
.aiyy-tab:active{background:var(--line);}
.aiyy-brand{font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--ink-3);}
/* Кнопка «Дневник» убрана 15 августа: разговоры переехали в боковое меню
слева, как заведено везде. Правило само по себе верное — соседи стоят
значками, а разговоры требовали слова, — но слово теперь стоит внутри
меню, над списком, где от него больше толку.
Сам класс .diary оставлен: на него ссылаются сохранённые сборки
оболочки, а весит он три строки. */
.aiyy-tab.diary{gap:7px;padding:8px 15px;color:var(--wa-deep);
background:var(--wa-soft);border-color:#EBD9E6;font-weight:700;}
.aiyy-tab.diary:active{background:#EFDFEC;}
.aiyy-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:0 16px;-webkit-overflow-scrolling:touch;}
.aiyy-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0;}
/* Заголовок пустого экрана набран Stengazeta — тем же шрифтом, что и знак
приложения. Так надпись и значок одной породы.
Рисованный знак пробовали 14 августа и отвергли: буквы вышли кривыми.
Montserrat перед этим тоже стоял здесь, но у Stengazeta кириллица
нарисована как своя, а не переделана из латиницы, и в ней есть все
якутские буквы.
Разрядка положительная: у Stengazeta узкие просветы, и без неё
«АЙЫЫ» слипается в частокол. */
.aiyy-logo{font-family:'Stengazeta','Inter',sans-serif;font-size:52px;font-weight:400;
letter-spacing:.02em;color:var(--ink-1);opacity:.92;}
/* Подпись под знаком: объясняет, что дерево нажимается. Мелко и
бледно — она подсказка, а не обещание, и не должна спорить с
главной строкой над ней. */
.aiyy-roots{margin-top:14px;font-size:11.5px;color:var(--ink-3);cursor:pointer;
text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);}
.aiyy-tag{font-size:14px;color:var(--ink-3);margin-top:10px;line-height:1.5;max-width:290px;}
/* Первая строка — та, что запоминают и повторяют: крупнее, темнее,
плотнее по буквам. Вторая поясняет и потому отступает. */
.aiyy-tag-1{display:block;font-size:17px;font-weight:700;color:var(--ink-2);
letter-spacing:-.01em;line-height:1.3;margin-bottom:5px;}
.aiyy-tag-2{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.45;}
/* Ряд языка под деревом (2 сентября). Цвет подписи, без рамок и фона —
он подсказка, а не кнопка; выбранный язык подчёркнут, как .aiyy-roots.
Класс .aiyy-lang проверен по разметке: index.html, блок .aiyy-hero. */
.aiyy-lang{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:2px;
font-size:12.5px;color:var(--ink-3);}
.aiyy-lang button{background:none;border:none;padding:6px 7px;margin:0;font:inherit;
font-size:12.5px;color:var(--ink-3);cursor:pointer;border-radius:8px;}
.aiyy-lang button.on{color:var(--ink-2);font-weight:700;
text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);}
.aiyy-lang i{font-style:normal;opacity:.55;}
/* «Что ты умеешь?» под деревом (3 сентября): тихая пилюля в цвет
подписи, не спорит с деревом и рядом языка. */
.aiyy-what{display:block;margin:14px auto 0;padding:8px 16px;border:1px solid var(--line);
border-radius:999px;background:var(--bg);font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;}
.aiyy-what:active{background:var(--bg-2);}
.aiyy-tips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;padding:0 24px;}
.aiyy-tips .aiyy-what{margin:0;}
/* Ряд времени и значков стоит ПОД пузырём, а не сбоку от него.
8 сентября: пузырь и ряд лежали в одной flex-строке, и значки
повисали справа от сообщения, посередине его высоты. Перенос
строки плюс полная ширина ряда ставят их на строку ниже,
прижатыми к тому же краю, что и сам пузырь. */
.cmsg{display:flex;flex-wrap:wrap;margin-bottom:14px;width:100%;}
.cmsg.me{justify-content:flex-end;}
/* Длинные ссылки не должны рвать пузырь.
Адрес вроде ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%B4... — это одно
«слово» без пробелов длиной в двести знаков. Браузер честно пытался
уместить его целиком и раздвигал пузырь за край экрана.
overflow-wrap разрешает переносить внутри такого слова, min-width:0
нужен, потому что пузырь лежит во flex-строке: без него он отказывается
сжиматься ниже своего содержимого, и перенос не спасает. */
.cmsg-b{max-width:82%;min-width:0;padding:11px 14px;border-radius:16px;
font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;}
.cmsg-b a{overflow-wrap:anywhere;}
.cmsg.me .cmsg-b{background:var(--wa);color:#fff;border-bottom-right-radius:5px;}
.cmsg.ai .cmsg-b{background:var(--panel);color:var(--ink-1);border-bottom-left-radius:5px;border:1px solid var(--line);}
/* Разметка внутри пузыря: жирный чуть плотнее обычного, моноширинный —
тонкой плашкой, чтобы не спорил с округлым пузырём. */
.cmsg-b b{font-weight:700;}
/* Пункт перечня в пузыре. Точка стоит в поле слева, текст с отступом —
тогда вторая строка пункта не подлезает под точку, а список читается
столбиком. Отступ сверху заменяет пустую строку: в узком пузыре она
съедала бы пол-экрана. */
.cmsg-b .md-li{display:block;position:relative;padding-left:16px;margin-top:7px;}
.cmsg-b .md-li::before{content:'•';position:absolute;left:2px;top:0;
color:var(--wa);font-weight:700;}
.cmsg-b .md-li:first-child{margin-top:0;}
/* Заголовок разделом: своей строкой, с воздухом сверху. Кегль тот же —
в узком пузыре разница в размерах только мешает (11 сентября). */
.cmsg-b .md-h{display:block;margin:12px 0 2px;font-weight:700;}
.cmsg-b .md-h:first-child{margin-top:0;}
/* Кнопки «собрать сторис по готовым сценариям» — под ответом АЙЫЫ.
11 сентября. Число кадров мелкой цифрой справа. */
.cmsg-scen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.cmsg-scen-b{padding:8px 12px;border-radius:10px;font-size:12.5px;
font-weight:700;line-height:1.25;cursor:pointer;white-space:nowrap;
border:1.5px solid var(--wa);background:var(--wa-soft);color:var(--wa-deep);}
.cmsg-scen-b i{font-style:normal;font-weight:600;opacity:.65;margin-left:4px;}
/* Карусель с другого устройства: только текст экранов. 11 сентября. */
.car-lite{display:flex;flex-direction:column;gap:8px;padding:2px 0 0;}
.car-lite-s{position:relative;padding:8px 10px 8px 30px;border-radius:10px;
background:var(--card);border:1px solid var(--line);}
.car-lite-s b{position:absolute;left:8px;top:8px;font-size:11px;font-weight:700;
color:var(--wa-deep);opacity:.8;}
.car-lite-s u{display:block;text-decoration:none;font-weight:700;font-size:13.5px;
line-height:1.3;}
.car-lite-s span{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2);
margin-top:3px;}
.car-lite-n{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
/* Волна по строкам субтитров: видно, что время переставлено по звуку.
11 сентября. */
@keyframes subFlash{
0%{background:transparent;}
30%{background:var(--wa-soft);}
100%{background:transparent;}
}
.sub-row{border-radius:10px;}
.sub-row.sub-flash{animation:subFlash .7s ease-out;}
.cmsg-b i{font-style:italic;}
.cmsg-b code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
background:rgba(0,0,0,.06);border-radius:5px;padding:1px 5px;}
.cmsg.me .cmsg-b code{background:rgba(255,255,255,.22);}
.cmsg-b img{max-width:100%;border-radius:10px;margin-bottom:6px;display:block;}
.cmsg-typing{display:flex;gap:4px;padding:4px;}
/* Курсор в конце пузыря, пока ответ идёт потоком (3 сентября). */
.cmsg-cursor{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
background:currentColor;opacity:.6;animation:cmsgCur 1s steps(2,start) infinite;}
@keyframes cmsgCur{to{opacity:0}}
.cmsg-typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:ctp 1.2s infinite;}
.cmsg-typing span:nth-child(2){animation-delay:.2s;}
.sh-apps{display:flex;gap:7px;margin-top:12px;}
.sh-app{flex:1;text-align:center;border:1px solid var(--line);border-radius:11px;padding:10px 6px;
font-size:12.5px;font-weight:700;color:var(--wa-deep);text-decoration:none;background:var(--wa-soft);}
.sh-app:active{opacity:.8;}
/* ===== ЗНАКОМСТВО ===== */
.ob-sex{display:flex;gap:8px;margin-bottom:14px;}
.obsx{flex:1;border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:12px;
height:46px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.obsx.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);}
.ob-hi{font-size:13px;color:var(--ink-3);margin-bottom:6px;font-weight:600;}
.ob-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:11px;}
.ob-bar-f{height:100%;background:var(--wa);border-radius:99px;}
.ob-echo-x{margin-top:11px !important;padding-top:11px;border-top:1px solid var(--line);
font-size:12.5px !important;color:var(--ink-3) !important;}
.ob-sign{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-top:16px;font-weight:600;}
/* ===== РЕДАКТОР СЛАЙДА ===== */
.car-cell{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;}
.car-edit{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:9px;
padding:6px 8px;font-size:11.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;width:152px;}
.car-edit:active{background:var(--wa-soft);color:var(--wa-deep);}
.se-prev.movable{cursor:grab;touch-action:none;}
.se-prev.movable:active{cursor:grabbing;}
.se-poshint{display:flex;align-items:center;gap:9px;margin:-6px 0 14px;padding:9px 11px;
background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:11px;}
.se-poshint span{flex:1;font-size:11.5px;line-height:1.4;color:var(--wa-dark);}
.se-poshint button{flex:0 0 auto;border:1px solid #E3C9DC;background:#fff;color:var(--wa-deep);
border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer;
font-family:'Inter',sans-serif;}
.slide-edit{position:absolute;inset:0;background:rgba(30,16,28,.55);z-index:150;
display:none;align-items:center;justify-content:center;padding:16px;}
.slide-edit.on{display:flex;}
.se-card{background:#fff;border-radius:18px;padding:20px 18px;width:100%;max-width:340px;
max-height:90%;overflow-y:auto;position:relative;animation:shIn .24s cubic-bezier(.22,1,.36,1) both;}
.se-step{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--wa);margin-bottom:11px;}
.se-prev{width:100%;border-radius:12px;display:block;margin-bottom:14px;border:1px solid var(--line);}
.se-lab{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);margin:0 0 5px;}
.se-lab span{font-weight:400;color:var(--ink-3);}
.se-in{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13.5px;
font-family:'Inter',sans-serif;margin-bottom:12px;background:var(--panel);resize:vertical;line-height:1.45;}
.se-in:focus{outline:none;border-color:var(--wa);background:#fff;}
.ai-row{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px;}
.ai-row button{border:1px solid #E3C9DC;background:var(--wa-soft);color:var(--wa-deep);
border-radius:9px;padding:6px 11px;font-size:11.5px;font-weight:700;cursor:pointer;
font-family:'Inter',sans-serif;}
.ai-row button:active{opacity:.75;}
.ai-row button[disabled]{opacity:.45;cursor:default;}
.ai-row button.undo{background:#fff;border-color:var(--line);color:var(--ink-3);
padding:6px 10px;font-size:13px;}
.se-in.thinking{opacity:.55;}
.se-row{display:flex;gap:8px;}
.se-row .sh-btn{margin-top:0;}
.sh-btn.del{color:#B4404A;border-color:#F0D5D8;}
/* ===== ПОДЕЛИТЬСЯ / ПРИНЯТЬ ЛИНИЮ ===== */
.sharebox, .incoming{position:absolute;inset:0;background:rgba(30,16,28,.55);z-index:150;
display:none;align-items:center;justify-content:center;padding:18px;}
.sharebox.on, .incoming.on{display:flex;}
.sh-card, .in-card{background:#fff;border-radius:18px;padding:20px 18px;width:100%;max-width:340px;
max-height:88%;overflow-y:auto;position:relative;animation:shIn .24s cubic-bezier(.22,1,.36,1) both;}
@keyframes shIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.sh-x{position:absolute;top:12px;right:12px;border:none;background:var(--panel);width:28px;height:28px;
border-radius:50%;color:var(--ink-2);font-size:13px;cursor:pointer;}
.sh-step, .in-step{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--wa);margin-bottom:7px;}
.in-step b{color:var(--wa-deep);}
.sh-card h3, .in-card h2{font-family:'Inter',sans-serif;font-weight:800;margin:0 0 5px;
letter-spacing:-.01em;line-height:1.2;}
.sh-card h3{font-size:20px;} .in-card h2{font-size:24px;}
.sh-card p, .in-card p{font-size:13px;color:var(--ink-2);margin:0 0 14px;line-height:1.5;}
.sh-link{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:11px;
font-family:monospace;color:var(--ink-2);background:var(--panel);resize:none;word-break:break-all;}
.sh-size{display:block;font-size:11px;color:var(--ink-3);margin:6px 0 12px;}
.sh-note, .in-note{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:0 0 14px;}
.sh-btn{width:100%;border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:12px;
height:44px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;margin-top:8px;}
.sh-btn.main{background:var(--wa);border-color:var(--wa);color:#fff;}
.sh-btn:active{opacity:.85;}
.in-list{max-height:220px;overflow-y:auto;margin-bottom:14px;}
.in-ev{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4;}
.in-ev:last-child{border-bottom:none;}
.in-ev span{flex:0 0 52px;color:var(--ink-3);font-size:11.5px;padding-top:2px;}
.in-ev b{font-weight:600;}
.in-empty{font-size:13px;color:var(--ink-3);padding:10px 0;}
/* ===== ИСТОРИЯ РАЗГОВОРОВ ===== */
/* РАЗГОВОРЫ — БОКОВЫМ ЯЩИКОМ.
Был экран во весь размер, открывался кнопкой посередине шапки. Теперь
выезжает слева от левой кнопки: сторона нажатия и сторона появления
совпадают, иначе человек не понимает, что откуда взялось.
Затемнение позади нужно, чтобы ящик читался как временный: полный экран
без него выглядит переходом, из которого не ясно, как вернуться. */
.cl-shade{position:absolute;inset:0;z-index:128;background:rgba(30,16,28,.34);
opacity:0;pointer-events:none;transition:opacity .24s var(--в);}
.cl-shade.on{opacity:1;pointer-events:auto;}
.chatlist{position:absolute;top:0;bottom:0;left:0;width:86%;max-width:340px;
background:var(--bg);z-index:130;display:flex;flex-direction:column;
transform:translateX(-102%);transition:transform .28s cubic-bezier(.32,.72,0,1);
box-shadow:6px 0 30px rgba(0,0,0,.18);}
.chatlist.on{transform:none;}
/* ПРОФИЛЬ ВНИЗУ ЯЩИКА. Прижат к низу, отделён чертой: это не ещё один
разговор в списке, а выход в другое место. */
.cl-me{margin-top:auto;flex:0 0 auto;display:flex;align-items:center;gap:11px;
padding:13px 16px;border:none;border-top:1px solid var(--line);
background:#fff;color:var(--ink);cursor:pointer;text-align:left;width:100%;}
.cl-me:active{background:var(--wa-soft);}
.cl-me-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--wa-soft);
color:var(--wa-deep);display:flex;align-items:center;justify-content:center;
font-size:15px;font-weight:800;overflow:hidden;}
.cl-me-av img{width:100%;height:100%;object-fit:cover;display:block;}
.cl-me-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cl-me-t b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-me-t i{font-style:normal;font-size:11.5px;color:var(--ink-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-me svg{flex:0 0 auto;color:var(--ink-3);}
/* ВЫВЕСКА ПОСЕРЕДИНЕ ШАПКИ. Не кнопка: имя приложения ничего не делает,
и делать вид, что делает, — обманывать нажатием. */
/* ВЫВЕСКА ПОСЕРЕДИНЕ — ЗНАК, а не слово. Дерево с корнями-дорожками
платы: живая память, растущая на цифре. Не кнопка намеренно.
Высоту задаём жёстко: знак — картинка, и до её разбора шапка иначе
дёрнулась бы, как это было с кадрами карусели. */
/* Название разговора посередине шапки. Одна строка с многоточием: имена
складываются из первых слов человека и бывают длинными, а переносить
шапку на две строки нельзя — она и так съедает высоту у разговора. */
.aiyy-mark{flex:1;min-width:0;border:none;background:none;padding:0 8px;
font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--ink);
text-align:center;cursor:pointer;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;}
.aiyy-mark:active{opacity:.6;}
/* Возврат из профиля к разговорам. Стоит в фиолетовой шапке панели,
слева от имени, как всякая кнопка «назад». */
/* Крестик мельче стрелки по рисунку — поднимаем кегль, иначе он выглядит
как точка в кружке (1 сентября). */
.p-back{border:none;background:rgba(255,255,255,.16);color:#fff;width:32px;height:32px;
border-radius:50%;font-size:15px;line-height:1;cursor:pointer;margin-bottom:10px;
display:flex;align-items:center;justify-content:center;}
.p-back:active{background:rgba(255,255,255,.28);}
/* Знак над приветствием. Уходит вместе со всем приветствием, как только
человек напишет первое слово, — этим занимается сам блок .aiyy-hero. */
/* Знак над приглашением. Стал крупнее, когда из-под него убрали слово
АЙЫЫ: теперь он один держит верх пустого экрана. Отступ снизу больше
прежнего — строка приглашения должна читаться отдельно от знака,
а не прилипать к корням. */
.aiyy-hero-mark{width:104px;height:104px;object-fit:contain;margin:0 auto 20px;
display:block;opacity:.92;}
/* Ряд правки под кадром. Правило «две кнопки поровну» писалось под пару
«Добавить фото» / «Добавить видео» — её слили в одну кнопку ещё 20
августа. С тех пор здесь стоят «Заменить» и «Ылар», разные по весу, а
растяжка на всю ширину осталась и разносила их к самым краям: ряд
выглядел не серединой, а двумя плитами. 14 сентября, слово хозяина.
Теперь кнопки по своему тексту, а середину держит justify-content
ряда. */
.car-view-edit button{flex:0 1 auto;min-width:0;}
.cl-head{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 16px 12px;}
.cl-head b{font-family:'Inter',sans-serif;font-size:21px;font-weight:800;display:block;letter-spacing:-.01em;}
.cl-head span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:3px;}
.cl-fold{display:none;}
.cl-x{border:none;background:var(--panel);width:32px;height:32px;border-radius:50%;
color:var(--ink-2);font-size:14px;cursor:pointer;flex:0 0 auto;}
.cl-new{margin:0 16px 14px;background:var(--wa);border:none;color:#fff;border-radius:12px;
height:44px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.cl-new:active{opacity:.85;}
.cl-items{flex:1;overflow-y:auto;padding:0 16px 24px;}
/* РАЗГОВОР — ОДНОЙ СТРОКОЙ.
Были плитки в пять строк с рамкой и тремя кнопками: на экран влезало
четыре разговора. Теперь строка — влезает пятнадцать, и список читается
сверху вниз одним взглядом, как ему и полагается.
Рамок нет, разделителей нет: в коротком списке они только рябят.
Нынешний разговор отмечен заливкой — этого достаточно. */
.cl-i{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:2px;
border-radius:10px;cursor:pointer;}
.cl-i.on{background:var(--wa-soft);}
.cl-i:active{background:var(--line);}
.cl-i-n{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-i.on .cl-i-n{color:var(--wa-deep);font-weight:700;}
.cl-when{font-size:11px;color:var(--ink-3);flex:0 0 auto;}
/* «⋯» — редкие действия. Видна всегда, а не по наведению: на телефоне
наведения нет, и спрятанная за него кнопка не существует вовсе. */
.cl-i-more{flex:0 0 auto;border:none;background:none;color:var(--ink-3);
width:26px;height:26px;border-radius:8px;font-size:15px;line-height:1;cursor:pointer;}
.cl-i-more:active{background:var(--line);color:var(--ink);}
.cl-menu{position:absolute;z-index:160;background:#fff;border:1px solid var(--line);
border-radius:12px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.16);
display:flex;flex-direction:column;min-width:158px;}
.cl-menu button{border:none;background:none;text-align:left;padding:10px 11px;
border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);
font-family:'Inter',sans-serif;cursor:pointer;}
.cl-menu button:active{background:var(--wa-soft);}
.cl-menu button.del{color:#B4404A;}
.cl-empty{text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.6;padding:40px 20px;}
.aiyy-brand{cursor:pointer;}
.makecar{margin:0 2px 8px;}
.makecar button{width:100%;border:none;background:var(--wa);color:#fff;border-radius:12px;
height:44px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:8px;
box-shadow:0 3px 12px rgba(199,125,168,.28);}
.makecar button span{font-size:13px;}
.makecar button:active{opacity:.85;}
/* ===== СОБЫТИЕ ЗАПИСАНО В ЛИНИЮ ===== */
.ev-added{margin-top:11px;padding:11px 12px;background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:12px;}
.ev-added b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--wa-deep);margin-bottom:7px;}
.ev-added b.upd{color:#B45309;margin-top:9px;}
.ev-added.kin{background:#F3EEF7;border-color:#E0D2EA;}
.ev-added b.new{color:#6E4A6B;}
.ev-added b.nm{display:inline;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);margin:0;}
.ev-added span{display:block;font-size:13px;line-height:1.5;color:var(--ink);margin-bottom:3px;}
.ev-added button{margin-top:7px;background:none;border:none;color:var(--wa-deep);font-size:12.5px;
font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;padding:0;}
/* при добавлении ребёнка поле даты смерти не показываем */
#kinform[data-kids="1"] .kin-death-lab,
#kinform[data-kids="1"] #kin-died{display:none;}
.cmsg-typing span:nth-child(3){animation-delay:.4s;}
/* ===== КАРУСЕЛЬ ДЛЯ INSTAGRAM ===== */
.car-wrap{width:100%;margin-bottom:14px;}
.car-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
color:var(--wa-deep);letter-spacing:.04em;text-transform:uppercase;margin-bottom:9px;}
/* ЛЕНТА СЛАЙДОВ ЕЗДИТ ТОЛЬКО ВБОК.
15 августа, вечер. На телефоне карусель «уезжала вверх и пропадала».
Причина не в ленте, а в том, как браузер понимает косой смах: палец
редко идёт строго вбок, и без явного указания браузер считает движение
вертикальным. Он прокручивает весь разговор, а лента остаётся на месте —
человек видит, как карусель уходит вверх, хотя листал вправо.
touch-action:pan-x говорит прямо: на этом месте бывает только движение
вбок. Вертикальную часть смаха браузер отбрасывает, и лента слушается
с первого раза.
overscroll-behavior-x:contain — про край: долистал до последнего слайда
и тянешь дальше, а браузер начинает уводить страницу назад по истории.
Здесь этого быть не должно.
Прилипание сменил с mandatory на proximity: жёсткое иногда доводит
слайд до края само, и палец будто отбирают. */
.car-track{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;
/* pan-x pan-y (31 августа, слово хозяина): лента занимает пол-экрана,
и вертикальный смах по ней должен листать РАЗГОВОР, а не умирать.
Горизонталь по-прежнему листает слайды — браузер выбирает ось по
первому движению пальца. */
scroll-snap-type:x proximity;touch-action:pan-x pan-y;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;scroll-behavior:smooth;cursor:grab;scrollbar-width:none;}
.car-track.drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.car-track::-webkit-scrollbar{display:none;}
.car-slide{flex:0 0 auto;width:152px;scroll-snap-align:start;border-radius:13px;overflow:hidden;
border:1px solid var(--line);background:var(--panel);box-shadow:0 3px 14px rgba(110,74,107,.10);
cursor:zoom-in;position:relative;}
/* ВЫСОТА КАДРА ЗАДАНА ЗАРАНЕЕ.
15 августа. Смена шрифта (а также стиля, языка, числа экранов) роняла
разговор в самый низ. Виноват был не переход вниз — его мы давно
стережём, — а вот эта строка: у картинки задана только ширина.
Слайды приходят как data:-адреса, и браузер узнаёт их размер не сразу,
а после разбора. В эти доли секунды ряд слайдов имеет нулевую высоту,
весь разговор становится короче экрана, и сохранённая высота прокрутки
уже не помещается — браузер прижимает её к концу. Человек видел прыжок
вниз и думал, что виноват шрифт.
Соотношение сторон известно заранее: 4:5 для публикации, 9:16 для
истории. Место под кадр держится до разбора, и прокрутке некуда падать. */
.car-slide img{width:100%;display:block;margin:0;border-radius:0;pointer-events:none;
aspect-ratio:4/5;object-fit:cover;background:var(--wa-soft);}
.car-track.car-9x16 .car-slide img{aspect-ratio:9/16;}
/* Презентация 16:9 (3 сентября): миниатюры шире, чем выше, и ряд из них
занимает по два экрана в кадре, иначе слайд превращается в щель. */
.car-track.car-16x9 .car-slide img{aspect-ratio:16/9;}
/* 4 сентября, вторая правка. Первый раз я расширил ДО 260 только сам
слайд, а его ячейку (.car-cell, 152) и кнопку «Уларыт» (.car-edit, 152)
оставил прежними: слайд вылезал из своей ячейки на сто точек и наезжал
на соседнюю карточку, закрывая ей левую половину. Ровно то, что хозяин
назвал «уродски». Ширина задаётся всем троим разом. */
.car-track.car-16x9 .car-cell{width:260px;}
.car-track.car-16x9 .car-slide{width:260px;min-width:260px;}
.car-track.car-16x9 .car-edit{width:260px;}
/* КОНЦОВКА У ПРЕЗЕНТАЦИИ. 4 сентября, слово хозяина: «смотрится уродски».
Раньше карточке задавалась только ширина, а высоту она брала от соседней
плитки — вместе с рядом кнопки «Уларыт» под ней. Выходил широкий низкий
прямоугольник, в котором большой ✦ и длинная надпись расползались по
краям.
Теперь карточка — того же вида, что и слайд рядом: 16:9 и по верхнему
краю, а не растянута на всю колонку. Знак меньше, надпись переносится
по словам и не вылезает за края. */
Ширину карточке НЕ раздуваем до слайда: широкая и низкая, она наполовину
срезается правым краем ленты, и человек видит обрубок — ровно то, на что
хозяин показал. Оставляем узкой (как у карусели), но по высоте равняем на
соседний слайд и ставим по верхнему краю: получается опрятная плитка
«дописать» рядом с широкими слайдами. */
.car-track.car-16x9 .car-add-cell{align-self:flex-start;}
.car-track.car-16x9 .car-add{height:146px;flex:0 0 auto;padding:12px 16px;gap:6px;}
.car-track.car-16x9 .car-add-p{font-size:26px;}
.car-track.car-16x9 .car-add-t{font-size:12px;max-width:100%;}
.car-slide b{position:absolute;top:7px;left:7px;background:rgba(52,28,48,.62);color:#fff;
font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.03em;}
.car-slide{transition:transform .14s var(--в),opacity .14s var(--в);}
.car-slide.dragging{opacity:.4;transform:scale(.95);}
.car-slide.over{transform:translateY(-5px);box-shadow:0 0 0 2px var(--wa), 0 6px 18px rgba(110,74,107,.22);}
.car-vid{position:absolute;top:7px;right:7px;background:rgba(52,28,48,.78);color:#fff;
font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.02em;}
.car-move{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:5px;
opacity:0;transition:opacity .15s var(--в);}
.car-slide:hover .car-move{opacity:1;}
.car-move button{width:22px;height:22px;border-radius:50%;border:none;background:rgba(52,28,48,.72);
color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0;display:flex;
align-items:center;justify-content:center;}
.car-move button:active{background:var(--wa);}
/* Крестик «убрать экран» в углу слайда.
Виден всегда, а не по наведению, как стрелки перестановки: на телефоне
наведения нет вовсе, и такие кнопки там просто не существуют.
Тёмный кружок со светлым ободком читается и на светлом кадре,
и на тёмном — слайды бывают всякие. */
.car-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.5);background:rgba(30,16,28,.72);color:#fff;
font-size:12px;line-height:1;padding:0;cursor:pointer;z-index:3;
display:flex;align-items:center;justify-content:center;}
.car-del:active{background:rgba(30,16,28,.95);}
.car-hint{font-size:11.5px;color:var(--ink-3);margin-top:7px;}
/* стрелки над лентой */
.car-nav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.car-arrow{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;
color:var(--wa-deep);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
cursor:pointer;padding:0;font-weight:700;}
.car-arrow:active{background:var(--wa-soft);}
.car-arrow[disabled]{opacity:.32;cursor:default;}
/* полноэкранный просмотр слайда */
/* 3 сентября, по снимку хозяина: на мониторе ящик разговоров (z 130)
торчал поверх превью (z 120). Превью — самое верхнее из всего, что
не окно-лист: над ящиком, под листами (155–165). */
.car-view{position:absolute;inset:0;background:rgba(30,16,28,.94);z-index:150;display:none;
flex-direction:column;align-items:center;justify-content:center;padding:16px;}
.car-view.on{display:flex;}
.car-view img{max-width:100%;max-height:74vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
/* Видео на весь слайд, надписи поверх. Пропорции держит обёртка,
чтобы кадр и слой надписей совпадали пиксель в пиксель. */
/* КОРОБКУ НЕ СЖИМАТЬ. 25 августа, беда хозяина: в открытом слайде
надписи стоят выше и шире, чем в карусели. Причина здесь: .car-view —
колонка-флекс, и коробка, которой задана высота 677 точек, ужималась
флексом до 585 — ширина при этом оставалась прежней. Кадр из 4:5
становился почти квадратным, а слой надписей, растянутый на ту же
коробку, съезжал вверх и вширь. flex:0 0 auto держит заданный
размер; высоту под свободное место считает carPaintView. */
#car-view-vwrap{position:relative;display:none;border-radius:12px;overflow:hidden;touch-action:none;
flex:0 0 auto;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#000;margin:0 auto;}
#car-view-vid{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;
display:block;background:#000;border-radius:0;max-width:none;max-height:none;}
/* Родные кнопки плеера в webview лезут поверх слайда — гасим их. */
#car-view-vid::-webkit-media-controls,
#car-view-vid::-webkit-media-controls-enclosure,
#car-view-vid::-webkit-media-controls-panel,
#car-view-vid::-webkit-media-controls-start-playback-button{display:none !important;
-webkit-appearance:none;}
#car-view-ov{position:absolute;inset:0;width:100%;height:100%;display:block;
pointer-events:none;max-width:none;max-height:none;border-radius:0;box-shadow:none;}
#car-view-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:62px;height:62px;border-radius:50%;background:rgba(20,10,18,.5);
backdrop-filter:blur(3px);color:#fff;font-size:24px;display:none;
align-items:center;justify-content:center;padding-left:4px;pointer-events:none;}
.car-view-bar{display:flex;align-items:center;gap:16px;margin-top:16px;}
.car-view-bar button{width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);
color:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.car-view-bar button:active{background:rgba(255,255,255,.28);}
.car-view-n{color:#fff;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;min-width:52px;text-align:center;}
/* Нижний ряд просмотрщика: правка и выгрузка. Верхний (car-view-edit) —
чем наполнить кадр: фото и видео. Разделено 15 августа: человек решает
тут две разные задачи, и мешать их в одну строку значило заставлять
его читать все кнопки подряд каждый раз. */
.car-view-dl{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap;justify-content:center;}
.car-view-dl button{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);
color:#fff;border-radius:11px;padding:10px 15px;font-size:12.5px;font-weight:700;
font-family:'Inter',sans-serif;cursor:pointer;width:auto;height:auto;}
.car-view-dl button.all{background:var(--wa);border-color:var(--wa);}
/* Мягкий свет включён — кнопка залита. Без отметки человек жмёт второй
раз, ожидая «ещё мягче», а получает возврат. */
.car-view-dl button.on{background:var(--wa);border-color:var(--wa);color:#fff;}
.car-view-dl button:active{opacity:.82;}
/* Белое на 16% прозрачности пропадало: слайд светлый, крестик белый —
человек не находил, куда нажать. Теперь тёмный кружок со светлым
ободком: читается и поверх светлого слайда, и поверх тёмного фона. */
.car-view-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.55);background:rgba(30,16,28,.78);color:#fff;
font-size:21px;line-height:1;cursor:pointer;z-index:5;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 10px rgba(0,0,0,.35);}
.car-view-x:active{background:rgba(30,16,28,.95);}
.car-num{position:absolute;}
.car-cap{background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:13px;
padding:11px 13px;font-size:13.5px;line-height:1.55;color:var(--ink);margin-top:11px;white-space:pre-wrap;}
.car-tags{color:var(--wa-deep);font-weight:600;margin-top:6px;display:block;font-size:12.5px;}
.car-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.car-btn{flex:1;min-width:120px;border:none;border-radius:11px;padding:11px 12px;font-size:13px;
font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;display:flex;
align-items:center;justify-content:center;gap:6px;}
.car-btn.main{background:var(--wa);color:#fff;}
.car-btn.ghost{background:var(--panel);color:var(--ink-2);border:1px solid var(--line);}
.car-btn:active{opacity:.82;}
.car-load{display:flex;align-items:center;gap:9px;padding:13px;background:var(--wa-soft);
border-radius:13px;font-size:13.5px;color:var(--wa-dark);font-weight:600;}
.car-spin{width:15px;height:15px;border:2px solid #E3C9DC;border-top-color:var(--wa);
border-radius:50%;animation:carspin .7s linear infinite;flex:0 0 auto;}
@keyframes carspin{to{transform:rotate(360deg);}}
@keyframes ctp{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}
/* position:relative — точка отсчёта для облачка-подсказки над «плюсом». */
.aiyy-input-wrap{position:relative;flex:0 0 auto;padding:8px 12px calc(14px + env(safe-area-inset-bottom,0));}
.chips-wrap{position:relative;}
.chips-wrap::after{content:'';position:absolute;top:0;right:0;bottom:9px;width:34px;
background:linear-gradient(90deg, rgba(251,246,249,0), var(--bg) 70%);
pointer-events:none;opacity:0;transition:opacity .2s var(--в);}
.chips-wrap.more::after{opacity:1;}
.chips-wrap::before{content:'';position:absolute;top:0;left:0;bottom:9px;width:26px;
background:linear-gradient(270deg, rgba(251,246,249,0), var(--bg) 70%);
pointer-events:none;opacity:0;transition:opacity .2s var(--в);z-index:1;}
.chips-wrap.back::before{opacity:1;}
.chat-chips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 9px;
-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;scroll-behavior:smooth;}
.chat-chips.drag{cursor:grabbing;scroll-behavior:auto;}
.chat-chips::-webkit-scrollbar{display:none;}
.chat-chip{flex:0 0 auto;background:var(--wa-soft);color:var(--wa-dark);border:none;border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
.chat-chip:active{opacity:.7;}
.aiyy-input{display:flex;align-items:flex-end;gap:8px;background:var(--panel);border:1.5px solid var(--line);border-radius:26px;padding:6px 6px 6px 12px;}
.aiyy-photo{flex:0 0 auto;background:none;border:none;color:var(--ink-3);cursor:pointer;padding:4px;display:flex;}
.aiyy-input textarea{flex:1;min-width:0;border:none;background:none;outline:none;font-size:15px;
font-family:'Inter',sans-serif;color:var(--ink-1);padding:8px 0;margin:0;
line-height:1.45;resize:none;overflow-y:auto;max-height:168px;display:block;}
.aiyy-input textarea::-webkit-scrollbar{width:0;}
.aiyy-input button{flex:0 0 auto;margin-bottom:1px;}
.aiyy-send{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--wa);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.aiyy-mic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:none;border:none;color:var(--ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.aiyy-mic:active{color:var(--wa);}
.aiyy-mic.rec{background:var(--wa);color:#fff;animation:micpulse 1s infinite;}
.mic-note{margin:0 2px 8px;padding:11px 13px;background:#FFF6E8;border:1px solid #F0DFC0;
border-radius:12px;font-size:12.5px;line-height:1.55;color:#7A5A28;}
.mic-note b{font-family:monospace;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-weight:600;}
.mic-note button{display:block;margin-top:9px;border:1px solid #E4CFA8;background:#fff;color:#7A5A28;
border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.mic-live{display:flex;align-items:center;gap:9px;margin:0 2px 8px;padding:9px 12px;
background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:12px;}
.mic-dot{width:9px;height:9px;border-radius:50%;background:#D1495B;flex:0 0 auto;
animation:micpulse 1.1s infinite;}
.mic-live-t{flex:1;min-width:0;font-size:12.5px;color:var(--wa-dark);line-height:1.35;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic;}
.mic-lang{flex:0 0 auto;border:1px solid #E3C9DC;background:#fff;color:var(--wa-deep);
border-radius:8px;padding:4px 9px;font-size:11px;font-weight:800;cursor:pointer;
font-family:'Inter',sans-serif;letter-spacing:.04em;}
.mic-stop{flex:0 0 auto;border:none;background:var(--wa);color:#fff;border-radius:8px;
padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.mic-stop:active{opacity:.85;}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(199,125,168,.5);}50%{box-shadow:0 0 0 8px rgba(199,125,168,0);}}
.chat-attach{margin:0 2px 8px;padding:9px 10px;background:var(--wa-soft);border-radius:12px;}
.chat-att-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.chat-att-row::-webkit-scrollbar{display:none;}
/* Размер задаёт сама плитка, а не картинка внутри: у видео без снятой
обложки картинки нет вовсе, и раньше плитка схлопывалась в точку. */
.chat-att-i{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:9px;
overflow:hidden;cursor:grab;transition:transform .13s var(--в),opacity .13s var(--в);}
.chat-att-i.vid{background:linear-gradient(150deg,#4a3a45,#2b2029);}
.chat-att-pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
color:#fff;font-size:17px;opacity:.85;}
.chat-att-i.dragging{opacity:.35;transform:scale(.9);cursor:grabbing;}
.chat-att-i.over{transform:translateY(-4px);box-shadow:0 0 0 2px var(--wa);border-radius:9px;}
.chat-att-i.vid img{filter:brightness(.82);}
.chat-att-v{position:absolute;top:3px;left:3px;background:rgba(52,28,48,.82);color:#fff;
font-size:9px;font-weight:700;border-radius:99px;padding:2px 6px;line-height:1.4;letter-spacing:.02em;}
.chat-att-mv{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center;gap:3px;
opacity:0;transition:opacity .15s var(--в);}
.chat-att-i:hover .chat-att-mv{opacity:1;}
.chat-att-mv button{width:17px;height:17px;border-radius:50%;border:none;background:rgba(52,28,48,.78);
color:#fff;font-size:10px;line-height:1;cursor:pointer;padding:0;display:flex;
align-items:center;justify-content:center;}
.chat-att-mv button:active{background:var(--wa);}
.chat-att-i img{width:52px;height:52px;border-radius:9px;object-fit:cover;display:block;}
.chat-att-n{position:absolute;left:3px;bottom:3px;background:rgba(52,28,48,.72);color:#fff;
font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 5px;line-height:1.5;}
.chat-att-x{position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;
background:var(--ink);border:2px solid var(--wa-soft);color:#fff;font-size:9px;
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;}
.chat-att-add{flex:0 0 auto;width:52px;height:52px;border-radius:9px;border:1.5px dashed #D9BFD2;
background:none;color:var(--wa);font-size:19px;cursor:pointer;line-height:1;}
.chat-att-add:active{background:rgba(199,125,168,.10);}
.chat-attach > span{display:block;font-size:12.5px;color:var(--wa-dark);line-height:1.3;margin-top:8px;}
/* Две кнопки под пачкой снимков (8 сентября). Рядом, поровну: ни одна
из дорог не главнее другой, и выбирать человек должен глазами, а не
угадывать по величине кнопки. */
.chat-att-go{display:flex;gap:8px;margin-top:9px;}
.chat-att-go button{flex:1 1 0;min-width:0;padding:10px 8px;border-radius:12px;
border:1.5px solid var(--wa);background:#fff;color:var(--wa-deep);
font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;
line-height:1.2;transition:background .15s var(--в);}
.chat-att-go button:active{background:var(--wa-soft);}
html[data-theme="dark"] .chat-att-go button{background:transparent;color:var(--wa);}
.cmsg-imgs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px;}
.cmsg-v{position:relative;display:inline-block;line-height:0;}
.cmsg-v b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
color:#fff;font-size:20px;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.cmsg-imgs img{width:78px;height:78px;object-fit:cover;border-radius:9px;margin:0;display:block;}
/* Одиночное вложение раньше рисовалось без размеров: чёрная
обложка растягивалась на весь пузырь. Теперь оно в той же сетке. */
.cmsg-v img{width:78px;height:78px;object-fit:cover;border-radius:9px;display:block;}
/* Видео без снятой обложки: тёмная плитка со стрелкой вместо битой картинки */
.cmsg-v.noposter{width:78px;height:78px;border-radius:9px;
background:linear-gradient(150deg,#4a3a45,#2b2029);display:inline-block;}
.cmsg-v u{position:absolute;right:4px;bottom:4px;text-decoration:none;color:#fff;
font-size:10px;line-height:1;background:rgba(0,0,0,.45);border-radius:5px;padding:2px 4px;}
.aiyy-send:active{opacity:.85;}
.h-aiyy{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);
border:none;color:#fff;border-radius:999px;padding:6px 12px 6px 8px;
font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;margin-right:10px;}
.h-aiyy:active{opacity:.75;}
/* скрываем старый fab */
.fab-wrap{display:none!important;}
#body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin-bottom:70px;}
#body::-webkit-scrollbar{display:none;}
.pg{display:none;padding-bottom:24px;}
.pg.on{display:block;}
@keyframes slInR{from{transform:translateX(28px);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes slInL{from{transform:translateX(-28px);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes slInF{from{opacity:.5}to{opacity:1}}
.pg.slin-r{animation:slInR .26s cubic-bezier(.32,.72,0,1);}
.pg.slin-l{animation:slInL .26s cubic-bezier(.32,.72,0,1);}
.pg.slin-f{animation:slInF .2s var(--в);}
.pg.on{display:block;}
.sect{padding:20px 16px 8px;font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase;}
.clock{background:var(--panel);border-radius:18px;margin:16px 16px 0;padding:16px 12px 12px;touch-action:none;}
.clock .ch{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 10px;}
.clock .ch b{font-size:14px;}
.clock svg{display:block;width:100%;cursor:grab;}
.clock svg:active{cursor:grabbing;}
.clock .hl{background:var(--amber-soft);border-radius:12px;padding:11px 13px;margin-top:10px;}
.clock .hl .d{font-size:11px;color:var(--amber);font-weight:800;margin-bottom:3px;letter-spacing:.04em;}
.clock .hl p{margin:0;font-size:13.5px;line-height:1.5;}
.clock .legend{display:flex;gap:13px;flex-wrap:wrap;padding:10px 4px 0;}
.clock .legend span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);}
.clock .legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.hour-row{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:flex-start;}
/* per-person day lines */
.pline{margin:0 16px 12px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;}
.pline.mine{border:1.5px dashed #C5CCD3;background:var(--panel);}
.pline .ph2{display:flex;align-items:center;gap:11px;padding:13px 14px 9px;}
.pline .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto;}
.pline .nm{flex:1;min-width:0;}
.pline .nm b{font-size:15px;display:block;line-height:1.25;}
.pline .nm span{font-size:12px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pline .cnt{font-size:12px;font-weight:800;color:var(--ink-3);flex:0 0 auto;}
.pline .cnt.full{color:var(--wa);}
.pline .x{width:26px;height:26px;border-radius:8px;background:var(--panel);border:none;color:var(--ink-3);font-size:16px;flex:0 0 auto;line-height:1;padding-bottom:2px;}
.pline .mini{padding:0 14px 10px;}
.pline .mini svg{display:block;width:100%;}
.pline .arow{display:flex;gap:11px;padding:11px 14px;align-items:flex-start;border-top:1px solid var(--line);}
.pline .arow.done{background:#FBFDFC;}
.pline .arow .hh2{flex:0 0 44px;font-size:12.5px;font-weight:800;color:var(--ink-2);padding-top:1px;}
.pline .arow.done .hh2{color:var(--ink-3);}
.pline .arow .aa{flex:1;font-size:14px;line-height:1.45;}
.pline .arow.done .aa{color:var(--ink-3);text-decoration:line-through;}
.pline .arow .ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;background:#fff;display:flex;align-items:center;justify-content:center;color:transparent;font-size:14px;font-weight:800;line-height:1;}
.pline .arow .ck.on{background:var(--wa);border-color:var(--wa);color:#fff;}
.foodtag{display:inline-block;font-size:10px;font-weight:800;color:var(--food);background:#FDF0E7;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:1px;}
.slot{display:flex;gap:11px;padding:11px 14px;align-items:center;border-top:1px solid var(--line);color:var(--ink-3);}
.slot .hh2{flex:0 0 44px;font-size:12.5px;font-weight:800;}
.slot .aa{flex:1;font-size:14px;}
.slot .pl{width:24px;height:24px;border-radius:8px;background:#fff;border:1.5px dashed #C5CCD3;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink-3);flex:0 0 auto;line-height:1;padding-bottom:2px;}
.mhint{padding:11px 14px;font-size:12.5px;color:var(--ink-3);line-height:1.5;border-top:1px solid var(--line);}
.hour-row.done{background:#FBFDFC;}
.hour-row .hh{flex:0 0 46px;font-size:13px;font-weight:800;color:var(--ink-2);padding-top:1px;}
.hour-row.done .hh{color:var(--ink-3);}
.hour-row .mid{flex:1;}
.hour-row .act{font-size:15px;line-height:1.45;}
.hour-row.done .act{color:var(--ink-3);text-decoration:line-through;}
.hour-row .src{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:5px;}
.hour-row .src .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;background:#fff;display:flex;align-items:center;justify-content:center;color:transparent;font-size:14px;margin-top:2px;}
.chk.on{background:var(--wa);border-color:var(--wa);color:#fff;}
.invite{margin:16px;background:var(--wa-soft);border-radius:16px;padding:18px 16px;text-align:center;}
.invite b{font-size:15px;display:block;margin-bottom:5px;}
.invite p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.invite button{background:var(--wa);color:#fff;border:none;border-radius:12px;padding:12px 22px;font-size:14px;font-weight:700;}
/* life */
.life{padding:0 16px;}
.life .hero{text-align:center;padding:20px 0 4px;}
.life .hero .n{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;}
.life .hero .c{font-size:13px;color:var(--ink-2);margin-top:6px;}
.board{background:var(--panel);border-radius:18px;padding:16px 12px 12px;margin-top:12px;}
.board svg{display:block;width:100%;cursor:grab;}
.life svg{display:block;width:100%;cursor:grab;}
.hl{background:var(--amber-soft);border-radius:12px;padding:11px 13px;margin-top:10px;}
.hl .d{font-size:11px;color:var(--amber);font-weight:800;margin-bottom:3px;letter-spacing:.04em;}
.hl p{margin:0;font-size:13.5px;line-height:1.5;}
/* график на странице контакта — те же поля что у .life */
#ctl-board{margin:12px 16px 0;}
#ofl-board{margin:12px 16px 0;}
/* geo ask */
.geoask{position:absolute;inset:0;background:#fff;z-index:70;display:none;flex-direction:column;justify-content:center;padding:30px 26px;}
.geoask.on{display:flex;}
.gic{font-size:44px;text-align:center;margin-bottom:14px;}
.geoask h3{font-size:25px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px;text-align:center;}
.geoask p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0 0 26px;text-align:center;}
.gbtn{width:100%;background:var(--wa);color:#fff;border:none;border-radius:13px;height:50px;font-size:15px;font-weight:700;}
.gor{text-align:center;font-size:12px;color:var(--ink-3);margin:16px 0 12px;font-weight:600;}
.glist{display:flex;flex-direction:column;gap:8px;}
.glist button{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px;font-size:15px;font-weight:600;color:var(--ink);text-align:left;display:flex;justify-content:space-between;align-items:center;font-family:'Inter',sans-serif;}
.glist button small{font-size:12px;color:var(--ink-3);font-weight:500;}
/* header search */
.hsearch{background:none;border:none;color:#fff;font-size:24px;padding:0 4px;opacity:.9;line-height:1;font-weight:400;}
.searchbar{display:none;gap:8px;padding:0 0 10px;}
.searchbar.on{display:flex;}
.searchbar input{flex:1;border:none;border-radius:10px;padding:11px 13px;font-size:15px;font-family:'Inter',sans-serif;outline:none;background:rgba(255,255,255,.16);color:#fff;}
.searchbar input::placeholder{color:rgba(255,255,255,.55);}
.searchbar button{background:none;border:none;color:#fff;font-size:17px;padding:0 6px;opacity:.8;}
/* birthday strip */
.bday{display:flex;align-items:center;gap:11px;margin:0 16px 14px;background:#FFF6E5;border-radius:14px;padding:12px 13px;cursor:pointer;border:1px solid #FBE3B8;}
.bday.mourn{background:#F2F4F6;border-color:#E2E6EA;}
.bday .be{font-size:21px;flex:0 0 auto;line-height:1;}
.bday .bt{flex:1;min-width:0;}
.bday .bt b{font-size:13.5px;display:block;line-height:1.35;}
.bday .bt span{font-size:12px;color:var(--ink-2);display:block;margin-top:2px;line-height:1.4;}
.bday .bc{color:var(--ink-3);font-size:17px;flex:0 0 auto;}
/* slider */
.slider{margin:0 16px 14px;position:relative;overflow:hidden;}
.slides{display:flex;transition:transform .35s cubic-bezier(.32,.72,0,1);}
.slide{flex:0 0 100%;display:flex;align-items:center;gap:11px;border-radius:14px;padding:13px;border:1px solid;cursor:pointer;box-sizing:border-box;}
.slide .se{font-size:21px;flex:0 0 auto;line-height:1;}
.slide .st{flex:1;min-width:0;}
.slide .st b{font-size:13.5px;display:block;line-height:1.35;}
.slide .st span{font-size:12px;color:var(--ink-2);display:block;margin-top:2px;line-height:1.4;}
.slide .sc{color:var(--ink-3);font-size:17px;flex:0 0 auto;}
.dots{display:flex;justify-content:center;gap:5px;margin-top:8px;}
.sd{width:5px;height:5px;border-radius:50%;background:var(--border-strong,#D4DAE0);cursor:pointer;transition:all .2s var(--в);}
.sd.on{width:16px;border-radius:3px;background:var(--wa);}
/* promo — слайдер призывов (баннеры) */
.promo{margin:2px 16px 16px;position:relative;overflow:hidden;}
.promo-track{display:flex;transition:transform .35s cubic-bezier(.32,.72,0,1);}
.promo-card{flex:0 0 100%;display:flex;align-items:center;gap:12px;border-radius:16px;padding:15px;cursor:pointer;box-sizing:border-box;color:#fff;}
.pc-e{font-size:26px;flex:0 0 auto;line-height:1;}
.pc-t{flex:1;min-width:0;}
.pc-t b{font-size:15px;font-weight:800;display:block;line-height:1.25;}
.pc-t span{font-size:12px;opacity:.85;display:block;margin-top:3px;line-height:1.4;}
.pc-arr{font-size:22px;opacity:.9;flex:0 0 auto;}
.promo-dots{display:flex;justify-content:center;gap:5px;margin-top:9px;}
.pd{width:5px;height:5px;border-radius:50%;background:var(--border-strong,#D4DAE0);cursor:pointer;transition:all .2s var(--в);}
.pd.on{width:16px;border-radius:3px;background:var(--wa);}
/* market cats */
.mchips{display:flex;gap:7px;overflow-x:auto;padding:0 0 14px;}
.mchips::-webkit-scrollbar{display:none;}
.mchips .chip{width:auto!important;height:auto!important;font-size:12.5px!important;padding:8px 13px!important;border-radius:999px!important;border:1.5px solid var(--line)!important;background:#fff!important;color:var(--ink-2)!important;white-space:nowrap;flex:0 0 auto;font-weight:600!important;font-family:'Inter',sans-serif;}
.mchips .chip.on{background:var(--wa-dark)!important;color:#fff!important;border-color:var(--wa-dark)!important;}
.care{margin:0 14px 10px;background:#FDECEC;border-radius:10px;padding:9px 11px;font-size:11.5px;color:#8C2F2F;line-height:1.45;}
/* world events */
.lx{margin:10px 0 12px;}
.lxbar{height:6px;background:var(--panel);border-radius:99px;overflow:hidden;margin-bottom:6px;}
.lxfill{height:100%;background:var(--wa);border-radius:99px;}
.lxrow{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);}
.lxrow b{color:var(--wa-deep);font-weight:800;}
.lx{cursor:pointer;}
.lxleft{font-size:11.5px;color:var(--ink-3);margin-top:6px;}
.lsub{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 12px;}
.wsect{display:flex;align-items:baseline;justify-content:space-between;padding:6px 16px 10px;}
.wsect span{font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;}
.wsect small{font-size:11px;color:var(--ink-3);}
.wscroll{display:flex;gap:10px;overflow-x:auto;padding:0 16px 14px;}
.wscroll::-webkit-scrollbar{display:none;}
.wcard{flex:0 0 152px;border-radius:16px;padding:13px;display:flex;flex-direction:column;cursor:pointer;}
.wcard:active{opacity:.85;}
.wtag{font-size:9.5px;font-weight:800;letter-spacing:.06em;margin-bottom:6px;}
.wemo{font-size:24px;margin-bottom:7px;line-height:1;}
.wcard b{font-size:14px;line-height:1.3;margin-bottom:4px;}
.wmeta{font-size:11.5px;color:var(--ink-2);line-height:1.4;}
.lcap{font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;padding:8px 16px 10px;}
.lcap small{display:block;font-size:10.5px;font-weight:600;color:var(--ink-3);opacity:.7;letter-spacing:0;text-transform:none;margin-top:3px;}
.ehero{padding:14px 16px 0;}
.eh{border-radius:16px;padding:16px;}
.ehe{font-size:30px;display:block;margin-bottom:8px;line-height:1;}
.eh p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);}
.edisc{margin:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:12px;color:var(--ink-3);line-height:1.55;}
/* life: list */
.lifehead{padding:16px 16px 12px;}
.myday{display:flex;align-items:baseline;gap:7px;margin-bottom:12px;}
.myday span{font-size:13px;color:var(--ink-2);}
.myday b{font-size:26px;font-weight:800;letter-spacing:-.03em;}
.lsearch{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:12px;padding:12px 14px;font-size:15px;font-family:'Inter',sans-serif;outline:none;}
.lsearch:focus{border-color:var(--wa);background:#fff;}
.prsn{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;}
.prsn:active{background:var(--panel);}
.prsn .pav{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex:0 0 auto;overflow:hidden;}
.prsn .pav.has{background:var(--panel)!important;}
.pav-img{border-radius:50%;}
.pbav{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto;overflow:hidden;}
.pbav.has{background:var(--panel)!important;}
.prsn .pin{flex:1;min-width:0;}
.prsn .pin b{font-size:15px;display:block;line-height:1.3;}
.prsn .pin span{font-size:12.5px;color:var(--ink-2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prsn .pdays{text-align:right;flex:0 0 auto;}
.prsn .pdays b{font-size:13px;font-weight:800;display:block;}
.prsn .pdays span{font-size:10.5px;color:var(--ink-3);}
.prsn .pdays.alive b{color:var(--wa-deep);}
.lempty{padding:40px 24px;text-align:center;color:var(--ink-3);font-size:14px;}
/* creators */
.crow{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;}
.crow:active{background:var(--panel);}
.crank{width:22px;font-size:13px;font-weight:800;color:var(--ink-3);flex:0 0 auto;text-align:center;}
.crank.gold{color:var(--wa-deep);}
.cfol{text-align:right;flex:0 0 auto;}
.cfol b{font-size:14px;font-weight:800;display:block;color:var(--wa-deep);}
.cfol span{font-size:10px;color:var(--ink-3);}
.ctop{margin:12px 16px 0;background:var(--wa-dark);color:#fff;border-radius:14px;padding:14px;cursor:pointer;}
.ctop b{font-size:14.5px;display:block;margin-bottom:3px;}
.ctop span{font-size:12.5px;opacity:.75;}
/* creator page */
.crwrap{padding:16px;}
.crtop{display:flex;justify-content:center;margin-bottom:14px;}
.crav{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;}
.crbio{font-size:14px;line-height:1.65;color:var(--ink);margin:0 0 18px;}
.crday{border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.crh{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;gap:10px;}
.crh b{font-size:14.5px;display:block;}
.crh span{font-size:12px;color:var(--ink-3);display:block;margin-top:2px;line-height:1.4;}
.crprice{font-size:16px;font-weight:800;color:var(--wa-deep);flex:0 0 auto;}
.cra{display:flex;gap:11px;padding:10px 14px;border-top:1px solid var(--line);}
.cra .crt{flex:0 0 44px;font-size:12.5px;font-weight:800;color:var(--ink-2);}
.cra .crx{flex:1;font-size:13.5px;line-height:1.45;}
.crbtns{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);}
.cb-1{flex:1;background:#fff;border:1.5px solid var(--wa);color:var(--wa-deep);border-radius:11px;height:44px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;}
.cb-2{flex:1.2;background:var(--wa);border:none;color:#fff;border-radius:11px;height:44px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;}
.crnone{background:var(--panel);border-radius:16px;padding:18px;text-align:center;}
.crnone b{font-size:15px;display:block;margin-bottom:6px;}
.crnone p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 14px;}
.crnone button{background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:11px 20px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;color:var(--ink);}
.cfol.off b{color:var(--ink-3);}
/* CHECKOUT */
.colist{flex:1;overflow-y:auto;padding:4px 16px 16px;-webkit-overflow-scrolling:touch;}
.colist::-webkit-scrollbar{display:none;}
.cosum{margin-bottom:16px;}
.cosh{border:1px solid var(--line);border-radius:13px;padding:11px 12px;margin-bottom:8px;}
.coshh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.coshh b{font-size:13.5px;}
.coshh span{font-size:11px;color:var(--ink-3);}
.coit{display:flex;align-items:center;gap:8px;padding:5px 0;}
.coe{font-size:15px;flex:0 0 auto;}
.con{flex:1;font-size:13px;}
.cop{font-size:13px;font-weight:700;}
.colab{font-size:12.5px;color:var(--ink-2);font-weight:700;display:block;margin:14px 0 8px;}
.cofld{margin-bottom:8px;}
.cofld input, .cofld select{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:11px;padding:13px;font-size:15px;font-family:'Inter',sans-serif;outline:none;color:var(--ink);}
.cofld input:focus, .cofld select:focus{border-color:var(--wa);background:#fff;}
.two2{display:flex;gap:8px;margin-bottom:8px;}
.two2 input{flex:1;background:var(--panel);border:1.5px solid transparent;border-radius:11px;padding:13px;font-size:15px;font-family:'Inter',sans-serif;outline:none;min-width:0;}
.two2 input:focus{border-color:var(--wa);background:#fff;}
.cowhen, .copay{display:flex;gap:8px;margin:14px 0 4px;}
.cw, .cp{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 8px;font-size:13px;font-weight:700;color:var(--ink-2);font-family:'Inter',sans-serif;display:flex;flex-direction:column;gap:2px;align-items:center;}
.cw.on, .cp.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);}
.cw small{font-size:10.5px;font-weight:600;opacity:.7;}
.cototal{margin-top:18px;padding:13px;background:var(--panel);border-radius:13px;}
.cor{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;}
.cor span{font-size:13px;color:var(--ink-2);}
.cor b{font-size:13.5px;font-weight:700;}
.cor.big{border-top:1px solid var(--border-strong,#DDE1E6);margin-top:6px;padding-top:9px;}
.cor.big span{font-size:14px;color:var(--ink);font-weight:600;}
.cor.big b{font-size:19px;font-weight:800;}
.conote{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin:12px 0 6px;}
.cobtns{display:flex;gap:9px;padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.cb-a{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:12px;height:48px;font-size:13.5px;font-weight:700;color:var(--ink);font-family:'Inter',sans-serif;}
.cb-b{flex:1.6;background:var(--wa);border:none;border-radius:12px;height:48px;font-size:14px;font-weight:700;color:#fff;font-family:'Inter',sans-serif;}
.odi{width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
/* market stories */
.mstories{display:flex;gap:12px;overflow-x:auto;padding:4px 0 14px;}
.mstories::-webkit-scrollbar{display:none;}
.msc-in{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;}
/* МАРКЕТ ВОСПОМИНАНИЙ */
.mkhead{padding:18px 16px 10px;}
.mkhead b{font-size:22px;font-weight:800;display:block;letter-spacing:-.02em;line-height:1.2;}
.mkhead span{font-size:13px;color:var(--ink-2);display:block;margin-top:4px;}
.mkshare{display:flex;align-items:center;gap:12px;margin:4px 16px 16px;padding:14px;border-radius:16px;background:linear-gradient(120deg,#6E4A6B,#8A4E7E);color:#fff;cursor:pointer;}
.mks-e{font-size:24px;flex:0 0 auto;line-height:1;}
.mks-t{flex:1;min-width:0;}
.mks-t b{font-size:15px;font-weight:800;display:block;line-height:1.25;}
.mks-t span{font-size:12px;opacity:.85;display:block;margin-top:3px;line-height:1.4;}
.mks-arr{font-size:22px;opacity:.9;flex:0 0 auto;}
.mkcats{display:flex;gap:9px;overflow-x:auto;padding:2px 16px 12px;}
.mkcats::-webkit-scrollbar{display:none;}
.mkcat{flex:0 0 auto;border:1px solid var(--line);border-radius:14px;padding:12px;width:110px;cursor:pointer;}
.mkcat-e{font-size:22px;display:block;margin-bottom:6px;}
.mkcat b{font-size:13px;font-weight:800;display:block;line-height:1.2;}
.mkcat span{font-size:11px;color:var(--ink-3);display:block;margin-top:3px;line-height:1.3;}
.mkitem{margin:0 16px 14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.mki-mem{padding:14px 14px 6px;font-size:14px;line-height:1.6;color:var(--ink);font-style:italic;}
.mki-by{padding:0 14px 12px;font-size:11.5px;color:var(--ink-3);font-weight:600;}
.mki-prod{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel);border-top:1px solid var(--line);}
.mki-e{font-size:22px;flex:0 0 auto;line-height:1;}
.mki-info{flex:1;min-width:0;}
.mki-info b{font-size:14px;display:block;line-height:1.25;}
.mki-info span{font-size:11.5px;color:var(--ink-3);}
.mki-r{flex:0 0 auto;text-align:right;}
.mki-p{font-size:15px;font-weight:800;display:block;line-height:1.2;}
.mki-btn{margin-top:5px;background:var(--wa);border:none;color:#fff;border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;display:block;width:100%;}
/* тёмный слайд в карусели */
.slide.dark{color:#fff;}
.slide.dark .st span{color:rgba(255,255,255,.8);}
.slide.dark .sc{color:rgba(255,255,255,.7);}
/* КОНТАКТЫ */
.cth-sub{padding:10px 16px 4px;font-size:13px;color:var(--ink-2);}
.ct-sync{margin:12px 16px;padding:28px 20px;border:1.5px dashed var(--line);border-radius:16px;text-align:center;}
.cts-i{font-size:36px;margin-bottom:12px;}
.ct-sync b{font-size:16px;display:block;margin-bottom:8px;}
.ct-sync p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 16px;}
.ct-sync button{background:var(--wa);border:none;color:#fff;border-radius:12px;padding:13px 24px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.ct-search{padding:10px 16px 4px;}
.ct-search input{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 14px;font-size:14px;font-family:'Inter',sans-serif;color:var(--ink);background:#fff;box-sizing:border-box;}
.ct-section{padding:16px 16px 6px;font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;}
.ctcard{display:flex;align-items:flex-start;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;}
.ctcard:active{background:var(--panel);}
.ctcard.ctout{cursor:default;opacity:.7;}
.ctav-story-wrap{flex:0 0 auto;border-radius:50%;padding:2px;background:transparent;}
.ctav-story-wrap.has-story{background:linear-gradient(135deg,var(--wa),#C77DA8);cursor:pointer;}
.ctav-story-wrap .ctav-wrap{border:2px solid #fff;border-radius:50%;}
.ctav-wrap{width:46px;height:46px;border-radius:50%;overflow:hidden;}
.ctav-wrap svg,.ctav-wrap img{display:block;width:100%;height:100%;}
.ctlav .ctav-wrap{width:36px;height:36px;}
.ctinfo{flex:1;min-width:0;}
.cttop{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:3px;}
.cttop b{font-size:15px;}
.ctago{font-size:11.5px;color:var(--ink-3);}
.ctmem{font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ctprod{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--wa-deep);}
.ctp{color:var(--ink);font-weight:700;}
.ctname-row{display:flex;align-items:center;gap:6px;}
.ct-emojis{font-size:13px;letter-spacing:1px;opacity:.75;}
.ct-empty{padding:20px 16px;color:var(--ink-3);font-size:13px;}
/* страница линии контакта */
.ctpost{margin:0 16px 14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.ctp-mem{padding:14px 14px 6px;font-size:14px;line-height:1.6;font-style:italic;color:var(--ink);}
.ctp-prod{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--panel);border-top:1px solid var(--line);}
.ctp-e{font-size:22px;flex:0 0 auto;}
.ctp-i{flex:1;min-width:0;}
.ctp-i b{font-size:14px;display:block;line-height:1.25;}
.ctp-i span{font-size:11.5px;color:var(--ink-3);}
.ctp-buy{background:var(--wa);border:none;color:#fff;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;flex:0 0 auto;cursor:pointer;}
/* сторисы в контактах */
.ct-stories{padding:14px 0 4px;}
.cts-row{display:flex;gap:14px;overflow-x:auto;padding:0 16px 10px;}
.cts-row::-webkit-scrollbar{display:none;}
.cts-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;}
.cts-ring{width:56px;height:56px;border-radius:50%;overflow:hidden;border:2.5px solid var(--wa);display:inline-flex;flex:0 0 auto;}
.cts-ring svg{display:block;width:56px;height:56px;}
.cts-item span{font-size:11px;color:var(--ink-2);font-weight:600;max-width:60px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* гео маркета */
.mkgeo-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px;}
#mk-geo-label{font-size:13px;font-weight:700;color:var(--ink-2);}
.mkgeo-tabs{display:flex;gap:6px;}
.mkgeo-tabs button{background:var(--panel);border:none;color:var(--ink-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.mkgeo-tabs button.on{background:var(--wa);color:#fff;}
.mkgeo-item{display:flex;align-items:center;gap:11px;margin:0 16px 8px;border:1px solid var(--line);border-radius:13px;padding:12px;cursor:pointer;transition:border-color .15s var(--мяг);}
.mkgeo-item:active{border-color:var(--wa);}
.mkg-add{display:block;font-size:11px;font-weight:700;color:var(--wa-deep);margin-top:3px;text-align:right;}
.mkg-e{font-size:22px;flex:0 0 auto;line-height:1;}
.mkg-i{flex:1;min-width:0;}
.mkg-i b{font-size:14px;display:block;line-height:1.25;}
.mkg-i span{font-size:11.5px;color:var(--ink-3);}
.mkg-r{text-align:right;flex:0 0 auto;}
.mkg-n{display:block;font-size:11.5px;color:#B8722A;font-weight:700;}
.mkg-p{display:block;font-size:15px;font-weight:800;}
/* КОРЗИНА */
.cart-head{padding:18px 16px 10px;}
.cart-head b{font-size:22px;font-weight:800;display:block;}
.cart-head span{font-size:13px;color:var(--ink-2);}
#cart-empty{padding:50px 20px;text-align:center;}
.cart-empty-i{font-size:48px;display:block;margin-bottom:14px;}
#cart-empty b{font-size:17px;display:block;margin-bottom:8px;}
#cart-empty p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0;}
.cgrp{margin:0 16px 16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.cgrp-h{display:flex;align-items:baseline;justify-content:space-between;padding:13px 14px 10px;border-bottom:1px solid var(--line);background:var(--panel);}
.cgrp-h b{font-size:15px;font-weight:800;}
.cgrp-h span{font-size:12px;color:var(--wa-deep);font-weight:700;}
.citem{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);}
.ci-e{font-size:20px;flex:0 0 auto;line-height:1;}
.ci-i{flex:1;min-width:0;}
.ci-i b{font-size:14px;display:block;line-height:1.25;}
.ci-ref{font-size:11px;color:var(--wa-deep);font-weight:600;display:block;}
.ci-p{font-size:14px;font-weight:800;flex:0 0 auto;}
.ci-rm{background:none;border:none;color:var(--ink-3);font-size:20px;flex:0 0 auto;cursor:pointer;padding:0 0 0 6px;line-height:1;}
.cgrp-total{display:flex;justify-content:space-between;align-items:baseline;padding:11px 14px;border-bottom:1px solid var(--line);}
.cgrp-total span{font-size:13px;color:var(--ink-2);}
.cgrp-total b{font-size:16px;font-weight:800;}
.cgrp-btn{width:100%;background:var(--wa);border:none;color:#fff;padding:14px;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.cbadge{background:#fff;color:var(--wa-dark);border-radius:999px;font-size:10px;font-weight:800;padding:1px 6px;margin-left:4px;display:inline-block;vertical-align:middle;}
/* слайдер рекомендаций */
.cart-suggest-wrap{overflow:hidden;}
.cart-suggest-scroll{display:flex;gap:10px;overflow-x:scroll;padding:4px 16px 16px;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;}
.cart-suggest-scroll::-webkit-scrollbar{display:none;}
.csug-card{flex:0 0 140px;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:4px;}
.csug-e{font-size:24px;line-height:1;display:block;}
.csug-card b{font-size:13.5px;line-height:1.25;display:block;}
.csug-card span{font-size:11px;color:var(--ink-3);display:block;}
.csug-p{font-size:14px;font-weight:800;color:var(--ink)!important;margin-top:4px;}
.csug-btn{margin-top:6px;width:100%;background:var(--wa-soft);border:none;color:var(--wa-deep);border-radius:8px;padding:7px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
/* мои топ-посты */
.mypost-card{flex:0 0 160px;scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:5px;background:#fff;}
.mypost-e{font-size:26px;line-height:1;display:block;margin-bottom:3px;}
.mypost-card b{font-size:13px;font-weight:800;line-height:1.3;display:block;}
.mypost-stats{display:flex;flex-direction:column;gap:2px;}
.mypost-stats span{font-size:11px;color:var(--ink-3);}
.mypost-share{margin-top:6px;width:100%;background:var(--wa);border:none;color:#fff;border-radius:9px;padding:8px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
/* универсальный экран контакта */
.wantlike-btn{display:block;width:calc(100% - 32px);margin:4px 16px 8px;background:var(--wa);border:none;color:#fff;border-radius:14px;height:48px;font-size:15px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;transition:background .2s var(--мяг);}
.wantlike-btn.active{background:var(--panel);color:var(--wa-deep);border:1.5px solid var(--wa);}
.ctpbio{padding:12px 16px 4px;}
.ctpbio p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;}
.ctpsect{margin:14px 16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
/* ОНБОРДИНГ */
.ob{position:absolute;inset:0;z-index:120;background:#fff;display:none;}
.ob.on{display:block;}
.ob-in{position:relative;height:100%;}
/* Экран знакомства прокручивается.
Без прокрутки на Android второй шаг обрывался: там крупное число,
карточка с рекордом, четыре строки подписи и кнопка — на экране
с адресной строкой браузера всё это выше, чем высота окна, и кнопка
«Начать» оказывалась за нижним краем без всякой возможности до неё
добраться. Человек упирался в тупик на втором экране приложения.
Заодно это лечит любой телефон пониже и любой шрифт покрупнее:
не влезло — прокрутил. */
.ob-step{position:absolute;inset:0;display:none;flex-direction:column;
padding:64px 28px calc(28px + env(safe-area-inset-bottom));opacity:0;
overflow-y:auto;-webkit-overflow-scrolling:touch;}
.ob-step.on{display:flex;animation:obIn .45s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes obIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.ob-back{position:absolute;top:22px;left:20px;width:34px;height:34px;border-radius:50%;
background:var(--panel);color:var(--ink-2);font-size:20px;display:flex;
align-items:center;justify-content:center;cursor:pointer;}
.ob-mark{font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:var(--wa);margin-bottom:auto;}
.ob-h{font-size:36px;font-weight:800;line-height:1.12;letter-spacing:-.02em;
color:var(--ink-1);margin:0 0 12px;}
.ob-p{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0;}
.ob-i{width:100%;margin-top:26px;background:var(--panel);border:1.5px solid transparent;
border-radius:14px;padding:16px;font-size:19px;font-family:'Inter',sans-serif;
outline:none;color:var(--ink-1);}
.ob-i:focus{border-color:var(--wa);background:#fff;}
.ob-hint{font-size:13px;color:var(--wa-dark);margin-top:12px;min-height:18px;font-weight:600;}
.ob-sp{flex:1;min-height:24px;}
/* Кнопке нельзя ужиматься: в тесной колонке flex сплющивал её до полоски
в несколько пикселей, и она была видна, но не нажималась. */
.ob-b{width:100%;flex:0 0 auto;background:var(--wa);border:none;color:#fff;border-radius:15px;
height:54px;font-size:16px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.ob-b:active{opacity:.85;}
.ob-skip{width:100%;background:none;border:none;color:var(--ink-3);font-size:13.5px;
font-family:'Inter',sans-serif;padding:14px 0 2px;cursor:pointer;}
/* Верхний отступ был auto — число прижималось к середине экрана. В колонке
с прокруткой такой отступ уводит содержимое ВЫШЕ начала прокрутки, и
докрутить до него нельзя. Заменён на обычный: вниз кнопку по-прежнему
отжимает распорка .ob-sp, а на высоких экранах вид почти не меняется. */
.ob-big{font-size:66px;font-weight:800;letter-spacing:-.03em;color:var(--wa-dark);
line-height:1;margin:18px 0 6px;font-variant-numeric:tabular-nums;}
.ob-card{margin-top:22px;background:var(--wa-soft);border-radius:16px;padding:16px 18px;}
.ob-card b{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--wa-dark);margin-bottom:6px;}
.ob-card p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-1);}
.ob-list{margin-top:28px;display:flex;flex-direction:column;gap:18px;}
.ob-li{display:flex;gap:14px;align-items:flex-start;}
.ob-li>span{font-size:24px;flex:0 0 auto;line-height:1.1;}
.ob-li b{display:block;font-size:15px;font-weight:700;color:var(--ink-1);}
.ob-li div>span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.45;margin-top:2px;}
#ctl-ads-block{border-color:var(--wa);}
.meal-hi{border-color:#F0A63C;background:#FFFCF6;}
.meal-hi .ctps-h b{color:#B45309;}
/* МОЙ РОД */
.kin-intro{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:0 0 12px;}
.kin-empty{font-size:13px;color:var(--ink-3);line-height:1.5;padding:16px;
background:var(--panel);border-radius:14px;text-align:center;}
.kin-card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;cursor:pointer;}
.kid-card{border-color:var(--wa);background:linear-gradient(135deg,var(--wa-soft),#fff);}
.self-card{border-color:var(--wa-dark);background:linear-gradient(135deg,var(--wa-soft),#fff);}
.self-card .kin-hd{margin-bottom:9px;}
.ov-arr{margin-left:auto;font-size:22px;color:var(--wa);flex:0 0 auto;}
.kin-card:active{background:var(--panel);}
.kin-hd{display:flex;align-items:center;gap:11px;margin-bottom:9px;}
.kin-av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:flex;
align-items:center;justify-content:center;font-size:17px;font-weight:800;}
.kin-i{min-width:0;}
.kin-i b{display:block;font-size:14.5px;font-weight:700;color:var(--ink-1);}
.kin-i span{display:block;font-size:12px;color:var(--ink-3);margin-top:1px;}
.kin-proud{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0 0 12px;font-style:italic;}
.kin-track{position:relative;height:26px;margin:6px 2px 4px;}
.kin-line{position:absolute;top:12px;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--kc),var(--kc));opacity:.25;border-radius:2px;}
.kin-dot{position:absolute;top:9px;width:8px;height:8px;border-radius:50%;
background:var(--kc);transform:translateX(-50%);}
.kin-me{position:absolute;top:6px;width:14px;height:14px;border-radius:50%;
background:#F0A63C;border:2.5px solid #fff;box-shadow:0 0 0 1.5px #F0A63C;
transform:translateX(-50%);z-index:2;}
.kin-echo{font-size:12px;color:var(--wa-dark);background:var(--wa-soft);
border-radius:10px;padding:8px 11px;margin-top:10px;line-height:1.45;}
/* страница предка */
.kl-hd-av{width:36px;height:36px;border-radius:50%;flex:0 0 auto;color:#fff;
display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;}
.kl-del-b{background:none;border:none;color:var(--danger,#C0392B);font-size:13px;
font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;margin-left:auto;flex:0 0 auto;}
.kl-proud-b{font-size:14.5px;color:var(--ink-1);line-height:1.55;font-style:italic;
margin:0;padding:13px 14px;background:var(--wa-soft);border-radius:13px;}
.kl-ev{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);}
.kl-d{flex:0 0 62px;font-size:12px;font-weight:700;color:var(--ink-3);}
.kl-t{flex:1;font-size:14px;color:var(--ink-1);line-height:1.4;}
.kl-take{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--wa-dark);
background:var(--wa-soft);border-radius:8px;padding:6px 11px;cursor:pointer;}
.kl-you{display:flex;align-items:center;gap:9px;padding:11px 4px;
font-size:12.5px;font-weight:700;color:#B45309;}
.kl-proud-row{display:flex;align-items:flex-start;gap:9px;margin:16px 0 18px;}
.kl-proud-row.empty{margin:14px 0 16px;}
.kl-proud-row.empty .kl-edit-info{flex:1;background:none;border:1px dashed var(--line);
color:var(--ink-3);padding:11px;font-weight:600;}
.kl-proud-row .kl-proud-b{flex:1;}
.kl-edit-info{flex:0 0 auto;background:var(--wa-soft);color:var(--wa-dark);border:none;
border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700;
font-family:'Inter',sans-serif;cursor:pointer;margin-top:2px;}
.kl-ev-acts{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
.kl-post{background:var(--wa-soft);color:var(--wa-dark);border:none;border-radius:8px;
padding:6px 9px;font-size:11.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
.kl-ev-edit,.kl-ev-del{width:26px;height:26px;border-radius:7px;border:none;background:var(--panel);
color:var(--ink-3);font-size:12px;cursor:pointer;flex:0 0 auto;}
.kl-ev-del:active{background:#F3D6D6;color:#C0392B;}
.kinev-hint{font-size:12px;color:var(--ink-3);line-height:1.4;margin:8px 0 0;}
.kin-death-lab span{font-weight:400;color:var(--ink-3);font-size:11.5px;}
.kin-sex{display:flex;gap:8px;margin-bottom:4px;}
.ksx{flex:1;padding:11px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
font-size:14px;font-weight:600;font-family:'Inter',sans-serif;color:var(--ink-2);cursor:pointer;}
.ksx.on{border-color:var(--wa);background:var(--wa-soft);color:var(--wa-dark);}
.kl-you span{width:12px;height:12px;border-radius:50%;background:#F0A63C;
border:2.5px solid #fff;box-shadow:0 0 0 1.5px #F0A63C;flex:0 0 auto;}
/* линия предка сверху */
.kl-track2{margin:0 2px 20px;}
.klt-line{position:relative;height:16px;margin-bottom:10px;}
.klt-line::before{content:'';position:absolute;top:6px;left:0;right:0;height:4px;
background:var(--line);border-radius:2px;}
.klt-fill{position:absolute;top:6px;left:0;height:4px;border-radius:2px;
background:#F0A63C;z-index:1;}
.klt-dot{position:absolute;top:4px;width:8px;height:8px;border-radius:50%;
background:var(--kc);transform:translateX(-50%);z-index:2;}
.klt-me{position:absolute;top:0;width:16px;height:16px;border-radius:50%;
background:#F0A63C;border:3px solid #fff;box-shadow:0 0 0 1.5px #F0A63C;
transform:translateX(-50%);z-index:3;}
.klt-ax{position:relative;height:18px;font-size:10.5px;color:var(--ink-3);}
.klt-a1{position:absolute;left:0;}
.klt-a2{position:absolute;right:0;}
.klt-you{position:relative;height:16px;margin-top:3px;}
.klt-you span{position:absolute;transform:translateX(-50%);color:#B45309;font-weight:700;
font-size:10.5px;white-space:nowrap;}
.ctl{background:var(--panel);border:1px solid var(--line);border-radius:16px;
padding:6px 4px 2px;margin:0 0 12px;}
.ctl svg{width:100%;display:block;touch-action:none;}
.lcmp{margin:0 0 18px;}
.lcmp-b{background:#FFF6E8;border:1px solid #F2E0C0;border-radius:14px;padding:13px 14px;}
.lcmp-b > b{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:#B45309;margin-bottom:9px;}
.lcmp-b p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-1);}
.cmp-two{display:flex;flex-direction:column;gap:10px;}
.cmp-side{padding-left:11px;border-left:3px solid #E4C89A;}
.cmp-side.me{border-left-color:#F0A63C;}
.cmp-who{display:block;font-size:10.5px;font-weight:700;letter-spacing:.03em;
color:var(--ink-3);text-transform:none;margin-bottom:2px;}
.cmp-side b{display:block;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink-1);}
.cmp-when{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;}
.ev-who{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.ev-who button{border:1px solid var(--line);background:var(--wa-soft);color:var(--wa-deep);
border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;
font-family:'Inter',sans-serif;}
.ev-who button:active{opacity:.8;}
.nobirth{background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:14px;}
.nobirth b{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:5px;}
.nobirth p{margin:0 0 11px;font-size:12.5px;line-height:1.5;color:var(--ink-3);}
.nobirth button{border:1px solid var(--line);background:#fff;color:var(--wa-deep);border-radius:9px;
padding:8px 13px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.shared{background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:16px;
padding:14px;margin:0 0 20px;}
.shared-h{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--wa-deep);margin-bottom:10px;}
.shared-i{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid rgba(199,125,168,.20);}
.shared-i:last-child{border-bottom:none;}
.shared-i span{flex:0 0 64px;font-size:11px;color:var(--ink-3);padding-top:2px;}
.shared-i b{font-weight:600;font-size:13.5px;line-height:1.4;}
.shared-sub{font-weight:400;font-size:11px;color:var(--ink-3);margin-top:2px;}
.kl-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 28px;}
.kl-act{display:flex;align-items:center;justify-content:center;gap:7px;
border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:12px;
height:44px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.kl-act span{font-size:13px;opacity:.7;}
.kl-act.main{grid-column:1 / -1;background:var(--wa);border-color:var(--wa);color:#fff;}
.kl-act.main span{opacity:1;}
.kl-act.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);}
.kl-act:active{opacity:.85;}
.dv-json{font-size:10px;line-height:1.45;max-height:180px;}
.ctad{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;cursor:pointer;}
.ctad + .ctad{border-top:1px solid var(--line);}
.ctad:active{background:var(--wa-soft);}
.ctad-e{font-size:20px;flex:0 0 auto;line-height:1.2;}
.ctad-i{flex:1;min-width:0;}
.ctad-i b{display:block;font-size:14px;font-weight:700;color:var(--ink-1);line-height:1.3;}
.ctad-i span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.4;}
.ctad-m{font-size:11px !important;color:var(--ink-3) !important;margin-top:3px !important;}
.ctad-r{flex:0 0 auto;text-align:right;}
.ctad-r b{display:block;font-size:14px;font-weight:800;color:var(--ink-1);white-space:nowrap;}
.ctad-r span{display:block;font-size:10.5px;color:var(--ink-3);}
.ctpsect.ctps-comm{border-color:#F0A63C;background:#FFF8EE;}
.ctps-h{display:flex;align-items:baseline;justify-content:space-between;padding:13px 14px 8px;border-bottom:1px solid var(--line);background:var(--panel);}
.ctps-h b{font-size:15px;font-weight:800;}
.ctps-h span{font-size:12px;color:var(--ink-3);}
.ctpa{display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);}
.ctpa-t{font-size:12px;font-weight:700;color:var(--ink-3);flex:0 0 46px;}
.ctpa-x{font-size:13.5px;line-height:1.45;flex:1;}
.ctpa-more{display:block;width:100%;background:none;border:none;padding:10px 14px;font-size:13px;color:var(--wa-deep);font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;text-align:left;}
.ctpa-hidden{}
.ctps-btn{display:block;width:calc(100% - 28px);margin:12px 14px;background:var(--panel);border:1.5px solid var(--line);color:var(--ink);border-radius:12px;height:44px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.ctps-btn.green{background:var(--wa);border-color:var(--wa);color:#fff;}
.ctps-note{font-size:11.5px;color:var(--ink-3);text-align:center;padding:0 14px 12px;margin:0;}
.ctps-desc{font-size:13px;color:var(--ink-2);padding:10px 14px;margin:0;line-height:1.5;}
.ctmi{display:flex;align-items:baseline;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);}
.ctmi-h{font-size:11.5px;font-weight:700;color:var(--ink-3);flex:0 0 46px;}
.ctmi-t{font-size:13.5px;flex:1;line-height:1.4;}
.ctmi-k{font-size:11.5px;color:var(--ink-3);flex:0 0 auto;}
.tseller{display:flex;align-items:center;gap:11px;margin:0 16px 8px;border:1px solid var(--line);border-radius:13px;padding:12px;}
.tsel-av{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex:0 0 auto;}
.tsel-i{flex:1;min-width:0;}
.tsel-i b{font-size:14px;display:block;line-height:1.25;}
.tsel-i span{font-size:12px;color:var(--ink-3);}
.tsel-r{flex:0 0 auto;text-align:right;}
.tl-av{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:6px;flex:0 0 auto;}
/* ЭКРАН ВЫБОРА НАМЕРЕНИЯ */
.cam-intent{position:absolute;inset:0;background:#fff;display:none;flex-direction:column;z-index:2;}
.ci-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--wa-dark);}
.ci-hdr span{color:#fff;font-size:16px;font-weight:800;}
.ci-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 16px;}
.ci-choice{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:18px;padding:20px 16px;cursor:pointer;transition:border-color .15s var(--мяг),background .15s var(--мяг);}
.ci-choice:active{border-color:var(--wa);background:var(--wa-soft);}
.ci-buy{border-color:#B8722A;background:#FFF8EE;}
.ci-buy:active{background:#FDEBD0;}
.ci-icon{font-size:32px;flex:0 0 auto;line-height:1;}
.ci-text{flex:1;}
.ci-text b{font-size:17px;font-weight:800;display:block;line-height:1.25;}
.ci-text span{font-size:13px;color:var(--ink-2);display:block;margin-top:4px;line-height:1.4;}
.ci-arr{font-size:22px;color:var(--ink-3);flex:0 0 auto;}
/* ЭКРАН ПОКУПКИ */
.buy-body{flex:1;overflow-y:auto;padding:16px;}
.buy-intro{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 16px;}
.buy-field textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px;font-size:15px;font-family:'Inter',sans-serif;color:var(--ink);resize:none;box-sizing:border-box;line-height:1.55;}
.buy-field textarea:focus{outline:none;border-color:var(--wa);}
.buy-price-block{margin-top:16px;background:var(--panel);border-radius:14px;padding:14px;}
.buy-price-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.buy-price-label b{font-size:14px;font-weight:800;}
.buy-ai-hint{font-size:11.5px;color:var(--wa-deep);font-weight:600;}
.buy-price-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.buy-minus,.buy-plus{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:20px;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;}
.buy-price-val{font-size:24px;font-weight:800;color:var(--ink);}
.buy-slider{width:100%;accent-color:var(--wa);margin-bottom:10px;}
.buy-note{font-size:12px;color:var(--ink-3);line-height:1.5;margin:0;}
.buy-when{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.buy-when-label{font-size:13px;font-weight:700;color:var(--ink-2);flex:0 0 auto;}
.buy-send{width:100%;margin-top:20px;background:var(--wa);border:none;color:#fff;border-radius:14px;height:52px;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.buy-send:disabled{opacity:.4;cursor:default;}
.cam-overlay{position:absolute;inset:0;background:#000;z-index:100;display:none;flex-direction:column;}
.cam-overlay.on{display:flex;}
.cam-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);}
.cam-close,.cam-flip{background:none;border:none;color:#fff;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;}
.cam-close{font-size:20px;}
.cam-hdr span{color:#fff;font-size:16px;font-weight:800;}
.cam-view{flex:1;position:relative;overflow:hidden;}
#cam-video{width:100%;height:100%;object-fit:cover;}
.cam-hints{position:absolute;top:80px;left:0;right:0;display:flex;justify-content:center;z-index:3;pointer-events:none;}
.cam-hint-bubble{background:rgba(0,0,0,.75);color:#fff;border-radius:20px;padding:10px 18px;font-size:14px;font-weight:600;max-width:80%;text-align:center;line-height:1.4;backdrop-filter:blur(8px);}
.cam-scan{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;pointer-events:none;}
.cam-scan-line{width:70%;height:2px;background:var(--wa);border-radius:2px;animation:scanMove 1.5s ease-in-out infinite alternate;box-shadow:0 0 12px var(--wa);}
@keyframes scanMove{from{transform:translateY(-60px)}to{transform:translateY(60px)}}
.cam-scan span{color:#fff;font-size:13px;font-weight:700;margin-top:16px;background:rgba(0,0,0,.5);padding:6px 14px;border-radius:999px;}
.cam-found{position:absolute;bottom:0;left:0;right:0;z-index:4;background:linear-gradient(to top,rgba(0,0,0,.92) 55%,transparent);padding:20px 16px 16px;max-height:76%;overflow-y:auto;}
.cf-prod{background:rgba(255,255,255,.12);border-radius:16px;padding:14px;margin-bottom:12px;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);}
.cf-btns{display:flex;gap:10px;}
.cf-sell{flex:1;background:var(--wa);border:none;color:#fff;border-radius:12px;height:48px;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.cf-skip{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:12px;height:48px;padding:0 18px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
.cf-ai{color:rgba(255,255,255,.85);font-size:13px;line-height:1.5;margin-bottom:12px;}
.cf-item{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.cf-e{font-size:34px;line-height:1;flex:0 0 auto;}
.cf-ii b{color:#fff;font-size:17px;font-weight:800;display:block;}
.cf-ii span{color:rgba(255,255,255,.6);font-size:12.5px;}
.cf-found-label{color:rgba(255,255,255,.55);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;}
.cf-sellers{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.cf-seller{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.08);border:1.5px solid transparent;cursor:pointer;}
.cf-seller.on{border-color:var(--wa);background:rgba(37,211,102,.16);}
.cf-sn b{color:#fff;font-size:13.5px;font-weight:700;display:block;line-height:1.2;}
.cf-sn span{color:rgba(255,255,255,.55);font-size:11.5px;}
.cf-sp{color:#fff;font-size:15px;font-weight:800;}
.cf-markup{background:rgba(255,255,255,.08);border-radius:13px;padding:12px;margin-bottom:12px;}
.cf-mk-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.cf-mk-head span{color:rgba(255,255,255,.7);font-size:12.5px;font-weight:600;}
.cf-mk-head b{color:var(--wa);font-size:18px;font-weight:800;}
.cf-mk-slider{width:100%;accent-color:var(--wa);margin-bottom:10px;}
.cf-mk-rows{display:flex;flex-direction:column;gap:5px;}
.cf-mk-row{display:flex;align-items:baseline;justify-content:space-between;}
.cf-mk-row span{color:rgba(255,255,255,.6);font-size:12px;}
.cf-mk-row b{color:#fff;font-size:14px;font-weight:800;}
.cf-mk-row.green b{color:var(--wa);}
.cf-story{color:rgba(255,255,255,.65);font-size:12.5px;font-style:italic;line-height:1.5;}
.cs-earn{background:var(--wa-soft);color:var(--wa-deep);border-radius:11px;padding:10px 12px;margin-bottom:12px;font-size:13px;}
.cs-earn b{font-size:15px;}
.cam-or{color:rgba(255,255,255,.5);font-size:12px;font-weight:600;}
.cam-shoot{width:72px;height:72px;border-radius:50%;background:transparent;border:3px solid #fff;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cam-shoot-inner{width:100%;height:100%;background:#fff;border-radius:50%;}
.cam-manual-links{display:flex;gap:16px;}
.cam-manual-links button{background:none;border:none;color:rgba(255,255,255,.75);font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;padding:4px;}
.cam-success{position:absolute;inset:0;background:rgba(0,0,0,.92);z-index:5;display:flex;align-items:center;justify-content:center;}
.cs-inner{background:#fff;border-radius:24px;padding:28px 22px;margin:20px;text-align:center;}
.cs-ok{width:60px;height:60px;background:var(--wa);border-radius:50%;color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.cs-inner b{font-size:20px;display:block;margin-bottom:8px;}
.cs-inner p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 16px;}
.cs-link{background:var(--panel);border-radius:11px;padding:11px 13px;margin-bottom:14px;font-size:13px;color:var(--ink-2);}
.cs-share{display:flex;gap:10px;margin-bottom:14px;}
.cs-share button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:12px;height:44px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.cs-done{width:100%;background:var(--wa);border:none;color:#fff;border-radius:12px;height:48px;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.mf-choices{padding:4px 16px 20px;display:flex;flex-direction:column;gap:10px;}
.mf-choice{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;transition:border-color .15s var(--мяг);}
.mf-choice:active{border-color:var(--wa);}
.mf-choice.accent{border-color:#F0A63C;background:#FFF8EE;}
.mfc-e{font-size:26px;flex:0 0 auto;line-height:1;}
.mfc-t{flex:1;min-width:0;}
.mfc-t b{font-size:15px;font-weight:800;display:block;line-height:1.25;}
.mfc-t span{font-size:12.5px;color:var(--ink-2);display:block;margin-top:3px;line-height:1.4;}
.mfc-arr{color:var(--ink-3);font-size:20px;flex:0 0 auto;}
.mf-back-h{display:flex;align-items:center;gap:10px;padding:8px 16px 12px;}
.mf-back{background:none;border:none;font-size:22px;color:var(--ink-2);cursor:pointer;flex:0 0 auto;padding:0;font-family:'Inter',sans-serif;}
.mf-back-h>div{min-width:0;}
.mf-back-h b{font-size:17px;display:block;line-height:1.2;}
.mf-back-h span{font-size:12.5px;color:var(--ink-2);}
.mf-field{padding:0 16px 10px;}
.mf-field textarea,.mf-field input{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px;font-size:15px;font-family:'Inter',sans-serif;color:var(--ink);resize:none;box-sizing:border-box;line-height:1.55;transition:border-color .15s var(--мяг);}
.mf-field textarea:focus,.mf-field input:focus{outline:none;border-color:var(--wa);}
.mf-chars{text-align:right;font-size:11px;color:var(--ink-3);margin-top:5px;}
.mf-match-label{font-size:12px;font-weight:700;color:var(--wa-deep);padding:0 16px 7px;}
.mfp-card{display:flex;align-items:center;gap:11px;margin:0 16px 10px;background:var(--wa-soft);border:1.5px solid #C9EED8;border-radius:14px;padding:13px;}
.mfp-e{font-size:24px;flex:0 0 auto;line-height:1;}
.mfp-i{flex:1;min-width:0;}
.mfp-i b{font-size:14.5px;display:block;line-height:1.25;}
.mfp-i span{font-size:12px;color:var(--wa-deep);font-weight:600;display:block;margin-top:2px;}
.mfp-p{font-size:17px;font-weight:800;flex:0 0 auto;color:var(--ink);}
.mf-skip{background:none;border:none;color:var(--ink-3);font-size:12.5px;font-family:'Inter',sans-serif;padding:0 16px 12px;cursor:pointer;display:block;}
.mf-actions{padding:4px 16px 20px;}
.mf-btn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:14px;height:52px;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;transition:opacity .15s var(--в);}
.mf-btn:disabled{opacity:.4;cursor:default;}
.mf-hint{font-size:12px;color:var(--ink-3);text-align:center;margin:10px 0 0;line-height:1.4;}
/* запрос к продавцам */
.mfr-opts{padding:0 16px 14px;}
.mfr-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.mfr-row>span{font-size:13px;font-weight:700;color:var(--ink-2);flex:0 0 70px;}
.mfr-btns{display:flex;gap:7px;flex-wrap:wrap;}
.mfr-btns button{background:var(--panel);border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.mfr-btns button.on{background:var(--wa);border-color:var(--wa);color:#fff;}
/* успех запроса */
.mf-success{padding:20px 16px 28px;text-align:center;}
.mf-ok{width:60px;height:60px;background:var(--wa);border-radius:50%;color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.mf-success b{font-size:20px;display:block;margin-bottom:8px;}
.mf-success p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 18px;}
.mf-link{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:11px;padding:11px 13px;margin-bottom:16px;}
.mf-link span{flex:1;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
.mf-link button{background:none;border:none;color:var(--wa-deep);font-size:13px;font-weight:700;font-family:'Inter',sans-serif;flex:0 0 auto;cursor:pointer;}
.mf-share-row{display:flex;gap:10px;margin-bottom:16px;}
.mf-ws,.mf-ig{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:12px;height:46px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;color:var(--ink);}
.mf-done{width:100%;background:var(--wa);border:none;color:#fff;border-radius:12px;height:48px;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.mfr-live{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;font-size:13px;color:#B8722A;font-weight:700;}
.mfrl-dot{width:8px;height:8px;border-radius:50%;background:#F0A63C;animation:pulse 1.5s infinite;}
.fsc{width:60px;height:60px;border-radius:50%;overflow:hidden;padding:2.5px;background:linear-gradient(135deg,var(--c),#fff);box-sizing:border-box;}
.fsc>svg{border-radius:50%;background:#fff;}
.fstory span{font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px;font-weight:600;}
.fhead{padding:16px 16px 10px;display:flex;align-items:center;gap:12px;}
.fhead .fhtxt{flex:1;min-width:0;}
.fhead b{font-size:19px;font-weight:800;display:block;letter-spacing:-.02em;}
.fhead span{font-size:13px;color:var(--ink-2);}
.fplus{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--wa);border:none;color:#fff;font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;font-family:'Inter',sans-serif;cursor:pointer;}
.meal2{margin:0 16px 8px;border:1px solid var(--line);border-radius:13px;padding:12px 13px;}
.m2h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px;}
.m2t{font-size:12.5px;font-weight:800;color:var(--ink-2);}
.m2s{font-size:11px;color:var(--ink-3);}
.m2b{margin:0;font-size:14px;line-height:1.45;}
.sect2{padding:22px 16px 6px;font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;}
.fcap{padding:0 16px;font-size:13px;color:var(--ink-2);margin:0 0 12px;line-height:1.5;}
.lfood{margin:0 16px 10px;border:1px solid var(--line);border-radius:15px;padding:14px;}
.lfh{display:flex;align-items:center;gap:11px;margin-bottom:9px;}
.lfe{font-size:24px;flex:0 0 auto;line-height:1;}
.lfi{flex:1;min-width:0;}
.lfi b{font-size:15px;display:block;line-height:1.3;}
.lfi span{font-size:12px;color:var(--ink-3);}
.lfp{font-size:15px;font-weight:800;flex:0 0 auto;}
.lfd{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-2);}
.lfw{background:#FDECEC;border-radius:9px;padding:8px 10px;font-size:11.5px;color:#8C2F2F;line-height:1.45;margin-bottom:10px;}
.lfb{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.lfs{font-size:11.5px;color:var(--ink-3);}
.lfbtn{background:#fff;border:1.5px solid var(--wa);color:var(--wa-deep);border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;flex:0 0 auto;}
.lfbtn.on{background:var(--wa);color:#fff;}
.cartbox{margin:14px 16px 0;background:var(--wa-dark);border-radius:16px;padding:14px;color:#fff;}
.cbh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px;}
.cbh b{font-size:15px;}
.cbh span{font-size:12px;opacity:.65;}
.cbi{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid rgba(255,255,255,.12);}
.cbe{font-size:16px;flex:0 0 auto;}
.cbn{flex:1;font-size:13px;min-width:0;}
.cbn i{display:block;font-style:normal;font-size:10.5px;opacity:.55;margin-top:1px;}
.cbp{font-size:13px;font-weight:700;flex:0 0 auto;}
.cbx{background:none;border:none;color:rgba(255,255,255,.5);font-size:16px;flex:0 0 auto;line-height:1;padding:0 0 0 4px;}
.cbt{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-top:1px solid rgba(255,255,255,.2);margin-top:4px;}
.cbt span{font-size:13px;opacity:.7;}
.cbt b{font-size:19px;font-weight:800;}
.cbbtn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:11px;height:46px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;}
.cbn2{font-size:11px;opacity:.6;text-align:center;margin:8px 0 0;}
.shop{display:flex;align-items:center;gap:11px;margin:0 16px 8px;border:1px solid var(--line);border-radius:13px;padding:12px;cursor:pointer;transition:border-color .15s var(--мяг);}
.shop:active{border-color:var(--wa);}
.lfood{cursor:pointer;}
/* ---- ЭКРАН НАСТРОЕНИЙ ---- */
.fq{padding:18px 16px 4px;}
.fq b{font-size:20px;font-weight:800;display:block;letter-spacing:-.02em;line-height:1.25;}
.fq span{font-size:13.5px;color:var(--ink-2);display:block;margin-top:5px;line-height:1.45;}
.moodgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 6px;}
.moodc{border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .15s var(--мяг),transform .1s var(--в);}
.moodc:active{border-color:var(--wa);transform:scale(.98);}
.moode{font-size:28px;line-height:1;margin-bottom:5px;}
.moodc b{font-size:15px;font-weight:800;line-height:1.25;}
.moodd{font-size:12px;color:var(--ink-2);line-height:1.4;flex:1;}
.moodsh{font-size:11px;font-weight:700;margin-top:6px;}
.fqcap{text-align:center;font-size:12.5px;color:var(--ink-3);margin:10px 16px 4px;}
/* ---- КОНСТРУКТОР ---- */
.bldhead{padding:16px 16px 4px;}
.bldback{background:none;border:none;color:var(--ink-2);font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;padding:0 0 10px;cursor:pointer;}
.bldsh{display:flex;align-items:center;gap:11px;}
.bldsh .shav{width:44px;height:44px;border-radius:12px;}
.bldsh .shi b{font-size:16px;}
.bldsh .shi span{font-size:12px;color:var(--wa-deep);font-weight:700;}
.bldq{display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 8px;}
.bldq b{font-size:16px;font-weight:800;}
.bldq span{font-size:12px;color:var(--ink-3);}
.bldi{display:flex;align-items:center;gap:10px;margin:0 16px 7px;background:var(--wa-soft);border-radius:12px;padding:11px 13px;}
.bldi-e{font-size:19px;flex:0 0 auto;line-height:1;}
.bldi-n{flex:1;font-size:14px;font-weight:600;min-width:0;}
.bldi-p{font-size:13.5px;font-weight:700;flex:0 0 auto;}
.bldi-x{background:none;border:none;color:var(--ink-3);font-size:19px;line-height:1;flex:0 0 auto;padding:0 0 0 3px;cursor:pointer;}
.bldmenu-t{padding:16px 16px 8px;font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;}
.mni{display:flex;align-items:center;gap:11px;margin:0 16px 7px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:border-color .15s var(--мяг);}
.mni.on{border-color:var(--wa);background:var(--wa-soft);}
.mni:active{border-color:var(--wa);}
.mni-e{font-size:20px;flex:0 0 auto;line-height:1;}
.mni-t{flex:1;min-width:0;}
.mni-t b{font-size:14px;font-weight:600;display:block;line-height:1.3;}
.mni-t span{font-size:11.5px;color:var(--ink-3);display:block;}
.mni-p{font-size:13.5px;font-weight:700;flex:0 0 auto;}
.mni-b{width:26px;height:26px;border-radius:50%;background:var(--wa);color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1;}
.bldbar{margin:16px 16px 24px;background:var(--wa-dark);border-radius:16px;padding:14px;color:#fff;}
.bldbar-l{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.bldbar-l span{font-size:13px;opacity:.7;}
.bldbar-l b{font-size:22px;font-weight:800;}
.bldbar-btn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:11px;height:48px;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.bldbar-save{width:100%;margin-top:9px;background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:11px;height:44px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
/* set banner on Life */
.setbanner{display:flex;align-items:center;gap:12px;margin:14px 16px 0;padding:14px;border-radius:16px;background:linear-gradient(120deg,#6E4A6B,#8A4E7E);color:#fff;cursor:pointer;}
.setb-l{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.setb-e{font-size:26px;flex:0 0 auto;line-height:1;}
.setb-t{min-width:0;}
.setb-t b{font-size:15px;font-weight:800;display:block;line-height:1.25;}
.setb-t span{font-size:12px;opacity:.85;display:block;margin-top:2px;line-height:1.35;}
.setb-arr{font-size:22px;opacity:.9;flex:0 0 auto;}
/* saveset gain + mysets + my-set cards */
.ssgain{display:flex;gap:10px;align-items:flex-start;background:var(--wa-soft);border-radius:12px;padding:12px;margin-bottom:14px;font-size:12.5px;line-height:1.5;color:var(--wa-dark);}
.ssgain-e{font-size:18px;flex:0 0 auto;}
.mysets-intro{margin:14px 16px;padding:12px 14px;background:var(--wa-soft);border-radius:12px;font-size:12.5px;color:var(--wa-dark);line-height:1.5;}
.mset{margin:0 16px 12px;border:1px solid var(--line);border-radius:16px;padding:14px;}
.mset-h{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.mset-hi{flex:1;min-width:0;}
.mset-hi b{font-size:15px;display:block;line-height:1.25;}
.mset-hi span{font-size:12px;color:var(--ink-3);}
.mset-p{font-size:16px;font-weight:800;flex:0 0 auto;}
.mset-d{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.5;}
.mset-stats{display:flex;gap:8px;margin-bottom:12px;}
.mset-st{flex:1;background:var(--panel);border-radius:11px;padding:9px;text-align:center;}
.mset-st b{font-size:16px;font-weight:800;display:block;}
.mset-st span{font-size:10.5px;color:var(--ink-3);}
.mset-link{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel);border-radius:10px;padding:10px 12px;margin-bottom:10px;cursor:pointer;}
.mset-link span{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mset-link em{font-size:11px;font-style:normal;font-weight:700;color:var(--wa-deep);flex:0 0 auto;}
.mset-btns{display:flex;gap:9px;}
.mset-b1{flex:1;background:#fff;border:1.5px solid var(--line);color:var(--ink);border-radius:11px;height:42px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.mset-b2{flex:1.3;background:var(--wa);border:none;color:#fff;border-radius:11px;height:42px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.msempty{margin:20px 16px;padding:32px 22px;text-align:center;border:1.5px dashed var(--line);border-radius:16px;}
.mse-e{font-size:34px;display:block;margin-bottom:10px;}
.msempty b{font-size:16px;display:block;margin-bottom:6px;}
.msempty p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 16px;}
.msempty button{background:var(--wa);border:none;color:#fff;border-radius:11px;padding:12px 22px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
/* partner pitch split */
.ptsplit{margin:0 0 18px;border:1px solid var(--line);border-radius:14px;padding:14px;}
.pts-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.pts-row span{font-size:13px;color:var(--ink-2);}
.pts-row b{font-size:22px;font-weight:800;color:var(--wa-dark);}
.pts-bar{height:8px;background:var(--panel);border-radius:99px;overflow:hidden;margin-bottom:9px;}
.pts-bar i{display:block;height:100%;background:var(--wa);border-radius:99px;}
.pts-note{font-size:11.5px;color:var(--ink-3);line-height:1.5;}
/* PARTNER MODE (inDrive-style) */
#partnermode{background:#EDF1F3;}
.pmh{background:var(--wa-dark);color:#fff;padding:14px 14px 12px;flex:0 0 auto;}
.pmh-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pmh-top .chback{color:#fff;}
.pmh-i{flex:1;min-width:0;}
.pmh-i b{font-size:16px;display:block;line-height:1.2;}
.pmh-i span{font-size:12px;opacity:.7;}
.pmh-live{font-size:11px;font-weight:700;color:#7CF0A8;flex:0 0 auto;}
.pm-cats{display:flex;gap:7px;padding:8px 12px 4px;overflow-x:auto;}
.pm-cats::-webkit-scrollbar{display:none;}
.pm-cats button{flex:0 0 auto;background:rgba(255,255,255,.12);border:none;color:rgba(255,255,255,.75);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.pm-cats button.on{background:#fff;color:var(--wa-dark);}
.ordcard-realty{border-color:#B8722A!important;background:#FFF8EE;}
.ord-take-realty{background:#B8722A!important;}
.pmgeo{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px;}
.pmgeo::-webkit-scrollbar{display:none;}
.pmgeo button{flex:0 0 auto;background:rgba(255,255,255,.12);border:none;color:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
.pmgeo button.on{background:var(--wa);}
.pmstat{display:flex;gap:8px;}
.pm-st{flex:1;background:rgba(255,255,255,.1);border-radius:11px;padding:9px 8px;text-align:center;}
.pm-st b{font-size:16px;font-weight:800;display:block;line-height:1.1;}
.pm-st span{font-size:9.5px;opacity:.7;display:block;margin-top:2px;line-height:1.2;}
.pmbody{flex:1;overflow-y:auto;padding:12px 14px 24px;}
.pmbody::-webkit-scrollbar{display:none;}
.ordcard{background:#fff;border-radius:15px;padding:13px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.ord-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px;}
.ord-who b{font-size:14.5px;display:block;line-height:1.25;}
.ord-who span{font-size:11.5px;color:var(--ink-3);}
.ord-pay{text-align:right;flex:0 0 auto;}
.ord-pay b{font-size:17px;font-weight:800;color:var(--wa-deep);display:block;line-height:1;}
.ord-pay span{font-size:10px;color:var(--ink-3);}
.ord-items{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.ord-chip{font-size:11.5px;background:var(--panel);border-radius:999px;padding:5px 10px;color:var(--ink-2);font-weight:600;}
.ord-f{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ord-total{font-size:11.5px;color:var(--ink-3);}
.ord-take{background:var(--wa);border:none;color:#fff;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;flex:0 0 auto;cursor:pointer;}
.pm-empty{text-align:center;color:var(--ink-3);font-size:13px;padding:40px 20px;line-height:1.5;}
.pm-takenh{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;margin:2px 0 8px;}
.takencard{display:flex;align-items:center;gap:10px;background:var(--wa-soft);border-radius:12px;padding:11px 13px;margin-bottom:8px;}
.tk-i{flex:1;min-width:0;}
.tk-i b{font-size:13.5px;display:block;line-height:1.2;}
.tk-i span{font-size:11px;color:var(--ink-3);}
.tk-p{font-size:14px;font-weight:800;color:var(--wa-deep);flex:0 0 auto;}
.tk-done{background:#fff;border:1.5px solid var(--wa);color:var(--wa-deep);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;flex:0 0 auto;cursor:pointer;}
.shop2placeholder{display:flex;align-items:center;gap:11px;margin:0 16px 8px;border:1px solid var(--line);border-radius:13px;padding:12px;}
.shav{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:0 0 auto;}
.shi{flex:1;min-width:0;}
.shi b{font-size:14px;display:block;line-height:1.3;}
.shi span{font-size:12px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shd{font-size:11px;color:var(--wa-deep);font-weight:700;flex:0 0 auto;}
.fdisc{margin:20px 16px 30px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:11.5px;color:var(--ink-3);line-height:1.55;}
.ptcta{margin:16px 16px 4px;padding:16px;border-radius:16px;background:var(--wa-soft);border:1px solid #C9EED8;cursor:pointer;}
.ptcta-top{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
.ptcta-e{font-size:24px;flex:0 0 auto;}
.ptcta-t{min-width:0;}
.ptcta-t b{font-size:15.5px;font-weight:800;display:block;line-height:1.25;color:var(--ink);}
.ptcta-t span{font-size:12.5px;color:var(--wa-dark);display:block;margin-top:2px;font-weight:600;}
.ptcta-p{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-2);}
.ptcta-b{display:inline-block;background:var(--wa);color:#fff;font-size:13.5px;font-weight:700;padding:10px 18px;border-radius:11px;}
.ptpain{margin:2px 0 12px;border-radius:14px;border:1px solid var(--line);padding:14px;}
.ptpain-h{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:11px;}
.ptpain-h b{color:var(--ink);}
.ptpain-list{display:flex;flex-direction:column;gap:7px;margin-bottom:11px;}
.ptpain-i{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);font-weight:600;}
.ptpain-i span{font-size:16px;flex:0 0 auto;width:20px;text-align:center;}
.ptpain-sum{font-size:12.5px;color:#9C3A34;font-weight:700;line-height:1.4;padding-top:10px;border-top:1px solid var(--line);}
.ptwin{margin:0 0 18px;border-radius:14px;background:var(--wa-dark);color:#fff;padding:16px;display:flex;align-items:center;gap:14px;}
.ptwin-big{flex:0 0 auto;text-align:center;line-height:1;}
.ptwin-big b{font-size:38px;font-weight:800;display:block;letter-spacing:-.03em;}
.ptwin-big span{font-size:11px;opacity:.75;display:block;margin-top:2px;}
.ptwin-txt{font-size:12.5px;line-height:1.5;opacity:.92;}
.ptwin-txt b{color:#B8F5D0;opacity:1;}
.tab{font-size:11.5px!important;}
/* SPINE — вертикальный день */
.spine{padding:6px 16px 4px;}
.hrow{display:flex;gap:0;min-height:34px;position:relative;}
.hrow.sleep .hlab{color:#A9B0D8;}
.hrow.sleep .hline:before{background:#E3E6F5;}
.hlab{flex:0 0 34px;font-size:11px;font-weight:800;color:var(--ink-3);padding-top:2px;letter-spacing:-.02em;}
.hrow.now .hlab{color:var(--amber);}
.hline{flex:0 0 20px;position:relative;display:flex;justify-content:center;}
.hline:before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--line);}
.hrow:first-child .hline:before{top:8px;}
.hrow:last-child .hline:before{bottom:calc(100% - 8px);}
.hdot{width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid var(--line);margin-top:4px;position:relative;z-index:2;}
.hdot.has{width:11px;height:11px;background:var(--wa);border-color:var(--wa);margin-top:3px;}
.hrow.now .hdot{border-color:var(--amber);box-shadow:0 0 0 3px #FDF2E2;}
.hbody{flex:1;min-width:0;padding:0 0 8px 8px;}
.hempty{font-size:11.5px;color:#C9CFD6;padding:3px 0;cursor:pointer;}
.hempty:active{color:var(--wa);}
.hact{border:1px solid var(--line);border-left:3px solid;border-radius:10px;padding:9px 11px;margin-bottom:6px;background:#fff;}
.hact.done{background:#FBFDFC;}
.ha-t{cursor:pointer;}
.ha-t b{font-size:12px;font-weight:800;color:var(--ink-2);display:block;margin-bottom:2px;}
.ha-t span{font-size:13.5px;line-height:1.4;display:block;}
.hact.done .ha-t span{color:var(--ink-3);text-decoration:line-through;}
.ha-b{display:flex;align-items:center;justify-content:space-between;margin-top:7px;}
.ha-s{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:5px;}
.ha-s i{width:6px;height:6px;border-radius:50%;display:inline-block;}
.ha-x{display:flex;gap:6px;}
.ck2{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:transparent;font-size:12px;font-weight:800;line-height:1;padding:0;}
.ck2.on{background:var(--wa);border-color:var(--wa);color:#fff;}
.rm2{width:24px;height:24px;border-radius:7px;border:none;background:var(--panel);color:var(--ink-3);font-size:15px;line-height:1;padding:0 0 2px 0;}
/* publish day */
.pubday{display:flex;align-items:center;gap:12px;margin:14px 16px 12px;background:var(--wa-dark);border-radius:15px;padding:14px;cursor:pointer;}
.pubday .pdi{flex:1;min-width:0;}
.pubday .pdi b{font-size:14.5px;display:block;color:#fff;line-height:1.3;}
.pubday .pdi span{font-size:12.5px;color:rgba(255,255,255,.7);display:block;margin-top:2px;line-height:1.4;}
.pdb{background:var(--wa);border:none;color:#fff;border-radius:11px;padding:11px 16px;font-size:13.5px;font-weight:700;flex:0 0 auto;font-family:'Inter',sans-serif;}
.pblist{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 16px;}
.pblist::-webkit-scrollbar{display:none;}
.pbfld{margin-bottom:14px;}
.pbfld label{font-size:12.5px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:6px;}
.pbfld input, .pbfld textarea{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:11px;padding:12px 13px;font-size:15px;font-family:'Inter',sans-serif;outline:none;resize:none;line-height:1.5;}
.pbfld input:focus, .pbfld textarea:focus{border-color:var(--wa);background:#fff;}
.pblab{font-size:12.5px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:8px;}
.pbacc{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.pbopt{border:1.5px solid var(--line);border-radius:13px;padding:12px 13px;cursor:pointer;}
.pbopt.on{border-color:var(--wa);background:var(--wa-soft);}
.pbo-h{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.pbo-e{font-size:16px;}
.pbo-h b{font-size:14px;flex:1;}
.pbo-c{color:transparent;font-weight:800;font-size:14px;}
.pbopt.on .pbo-c{color:var(--wa);}
.pbo-d{font-size:12.5px;color:var(--ink-2);line-height:1.45;display:block;}
.pbnote{font-size:12px;color:var(--ink-3);line-height:1.5;margin:0 0 6px;}
.pbbtns{display:flex;gap:9px;padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:0 0 auto;background:#fff;}
.pb1{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:12px;height:48px;font-size:13.5px;font-weight:700;color:var(--ink);font-family:'Inter',sans-serif;}
.pb2{flex:1.4;background:var(--wa);border:none;border-radius:12px;height:48px;font-size:13.5px;font-weight:700;color:#fff;font-family:'Inter',sans-serif;}
.bvid{display:flex;align-items:center;gap:9px;margin-top:10px;background:var(--panel);border-radius:10px;padding:9px 11px;text-decoration:none;color:var(--ink);}
.bvi{width:22px;height:22px;border-radius:6px;background:#DC2626;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.bvt{flex:1;font-size:12.5px;font-weight:600;}
.bvc{color:var(--ink-3);font-size:15px;}
#pscrim2{z-index:81;}
/* meal tier */
.sleeprow{display:flex;align-items:center;gap:8px;background:#EEF0FB;border-radius:10px;padding:9px 11px;margin-bottom:12px;font-size:12.5px;color:#3A3F6B;}
.slp-e{font-size:15px;}
.sleeprow b{font-weight:800;}
.mealitems{margin-bottom:14px;}
.mi{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);}
.mi:first-child{border-top:none;}
.mi-h{flex:0 0 58px;font-size:12px;font-weight:800;color:var(--ink-2);padding-top:1px;}
.mi-b{flex:1;min-width:0;}
.mi-t{font-size:13px;line-height:1.4;display:block;}
.mi-k{font-size:11px;color:var(--ink-3);display:block;margin-top:2px;}
/* night ritual */
.ritual{display:none;}
.ritual.on{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12.5px;}
.ritual.night{background:linear-gradient(90deg,#1A1F4A,#2D3468);color:#fff;}
.ritual.morn{background:linear-gradient(90deg,#FDF2E2,#FBE9C8);color:#7A5A20;}
.ritual span{flex:1;line-height:1.4;}
.ritual button{flex:0 0 auto;border:none;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.ritual.night button{background:rgba(255,255,255,.9);color:#1A1F4A;}
.ritual.morn button{background:#7A5A20;color:#fff;}
/* base + editor */
.bfilters{display:flex;gap:7px;overflow-x:auto;padding:12px 16px 8px;}
.bfilters::-webkit-scrollbar{display:none;}
.bfilters .chip{width:auto!important;height:auto!important;font-size:12.5px!important;padding:8px 12px!important;border-radius:999px!important;border:1.5px solid var(--line)!important;background:#fff!important;color:var(--ink-2)!important;white-space:nowrap;flex:0 0 auto;font-weight:600!important;font-family:'Inter',sans-serif;}
.bfilters .chip.on{background:var(--wa-dark)!important;color:#fff!important;border-color:var(--wa-dark)!important;}
.bcard{margin:0 16px 10px;border:1px solid var(--line);border-radius:14px;padding:14px;}
.bch{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.bce{font-size:16px;flex:0 0 auto;line-height:1;}
.bch b{font-size:14.5px;flex:1;line-height:1.3;}
.bcx{background:none;border:none;color:var(--ink-3);font-size:18px;flex:0 0 auto;line-height:1;padding:0;}
.bcard p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);}
.bfoot{margin:16px;padding:12px 14px;background:var(--wa-soft);border-radius:12px;font-size:12.5px;color:#0F5132;line-height:1.5;}
.edhead{padding:16px 16px 10px;}
.edhead b{font-size:17px;display:block;margin-bottom:3px;}
.edhead span{font-size:13px;color:var(--ink-2);}
.edtypes{display:flex;gap:8px;overflow-x:auto;padding:0 16px 14px;}
.edtypes::-webkit-scrollbar{display:none;}
.edt{flex:0 0 auto;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:'Inter',sans-serif;min-width:74px;}
.edt:active{background:var(--panel);}
.edte{font-size:20px;line-height:1;}
.edtl{font-size:11.5px;font-weight:700;color:var(--ink-2);}
.ednone{margin:0 16px;padding:30px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;border:1.5px dashed var(--line);border-radius:14px;line-height:1.5;}
.edprice{margin:18px 16px 0;padding:14px;background:var(--panel);border-radius:14px;}
.edprice label{font-size:12.5px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:8px;}
.eprow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.eprow input{flex:1;background:#fff;border:1.5px solid transparent;border-radius:11px;padding:12px;font-size:16px;font-weight:700;font-family:'Inter',sans-serif;outline:none;}
.eprow span{font-size:16px;font-weight:700;color:var(--ink-2);}
.edfree{background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:13px;font-weight:700;color:var(--ink-2);font-family:'Inter',sans-serif;flex:0 0 auto;}
.edfree.on{background:var(--wa);color:#fff;border-color:var(--wa);}
.edprice p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.5;}
.edpub{margin:14px 16px 30px;width:calc(100% - 32px);background:var(--wa);border:none;color:#fff;border-radius:12px;height:50px;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;}
.nch{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.nch span{font-size:22px;}
.nch b{font-size:18px;font-weight:800;}
.cbox textarea{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:11px;padding:12px 13px;font-size:15px;font-family:'Inter',sans-serif;outline:none;margin-bottom:14px;resize:none;line-height:1.5;}
.cbox textarea:focus{border-color:var(--wa);background:#fff;}
/* tiers */
.tiers{display:flex;flex-direction:column;gap:12px;}
.tier{display:flex;gap:11px;}
.tnum{width:26px;height:26px;border-radius:50%;background:var(--panel);color:var(--ink-3);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:14px;}
.tier.main .tnum{background:var(--wa);color:#fff;}
.tbody{flex:1;min-width:0;border:1px solid var(--line);border-radius:16px;padding:14px;}
.tier.main .tbody{border:1.5px solid var(--wa);background:linear-gradient(180deg,#F3FDF7,#fff);}
.thead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;}
.thead b{font-size:15px;display:block;line-height:1.3;}
.thead span{font-size:12.5px;color:var(--ink-2);display:block;margin-top:3px;line-height:1.45;}
.tprice{font-size:15px;font-weight:800;color:var(--ink);flex:0 0 auto;white-space:nowrap;}
.tprice.big{font-size:17px;color:var(--wa-deep);}
.tacts{margin-bottom:12px;}
.tmore{font-size:12.5px;color:var(--wa-deep);font-weight:700;padding:8px 0 2px;cursor:pointer;}
.thidden{display:none;}
.thidden.on{display:block;}
.gitems{display:flex;flex-direction:column;gap:11px;margin-bottom:14px;}
.gi{display:flex;gap:10px;align-items:flex-start;}
.gie{font-size:16px;flex:0 0 auto;line-height:1.3;}
.gi b{font-size:13.5px;display:block;margin-bottom:2px;}
.gi span{font-size:12.5px;color:var(--ink-2);line-height:1.5;display:block;}
.tbtn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:11px;height:44px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;}
.tbtn.light{background:#fff;border:1.5px solid var(--line);color:var(--ink);}
.tnote{font-size:11.5px;color:var(--ink-3);margin:8px 0 0;text-align:center;}
/* сет блогера — на странице креатора */
.tier.setmain .tnum{background:#F0A63C;color:#fff;font-size:15px;}
.tier.setmain .tbody{border:1.5px solid #F0A63C;background:linear-gradient(180deg,#FFF8EE,#fff);}
.tier.setinvite .tnum{background:var(--wa-soft);color:var(--wa-deep);font-size:18px;}
.setdishes{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;}
.setchip{font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--ink-2);font-weight:600;}
.setstat{display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:11px;}
.setstat>span:first-child{font-weight:700;color:#B8722A;}
.setok{color:var(--wa-deep);font-weight:700;}
.setfree{color:#B8722A;font-weight:700;background:#FDF0DC;border-radius:999px;padding:3px 9px;}
/* витрина сетов блогеров в ЕДЕ */
.blogset{margin:0 16px 12px;border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;transition:border-color .15s var(--мяг);}
.blogset:active{border-color:#F0A63C;}
.bs-h{display:flex;align-items:center;gap:11px;margin-bottom:9px;}
.bs-av{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex:0 0 auto;}
.bs-hi{flex:1;min-width:0;}
.bs-hi b{font-size:15px;display:block;line-height:1.25;}
.bs-hi span{font-size:12px;color:var(--ink-3);}
.bs-p{font-size:16px;font-weight:800;flex:0 0 auto;}
.bs-d{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-2);}
.bs-f{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.bs-ord{font-size:12px;font-weight:700;color:#B8722A;}
.bs-taken{font-size:11.5px;color:var(--wa-deep);font-weight:700;}
.bs-free{font-size:11.5px;color:#B8722A;font-weight:700;background:#FDF0DC;border-radius:999px;padding:3px 9px;}
.bs-btn{margin-left:auto;background:#fff;border:1.5px solid var(--wa);color:var(--wa-deep);border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;flex:0 0 auto;cursor:pointer;}
/* claim + platform chips */
.pchips{display:flex;gap:7px;overflow-x:auto;padding:12px 16px 4px;}
.pchips::-webkit-scrollbar{display:none;}
.pchips .chip{width:auto!important;height:auto!important;font-size:12.5px!important;padding:8px 13px!important;border-radius:999px!important;border:1.5px solid var(--line)!important;background:#fff!important;color:var(--ink-2)!important;white-space:nowrap;flex:0 0 auto;font-weight:600!important;font-family:'Inter',sans-serif;}
.pchips .chip.on{background:var(--wa-dark)!important;color:#fff!important;border-color:var(--wa-dark)!important;}
.claim{background:var(--wa-soft);border:1.5px solid #BFE9D2;border-radius:16px;padding:16px;}
.cl-h{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;}
.cl-e{font-size:22px;flex:0 0 auto;line-height:1;}
.cl-h b{font-size:16px;display:block;margin-bottom:3px;}
.cl-h span{font-size:13px;color:var(--ink-2);line-height:1.5;display:block;}
.cl-list{margin:0 0 14px;padding-left:18px;}
.cl-list li{font-size:13px;color:var(--ink);line-height:1.6;margin-bottom:4px;}
.cl-list b{color:var(--wa-deep);font-weight:800;}
.cl-btn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:12px;height:46px;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;}
.cl-note{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin:10px 0 0;text-align:center;}
/* my line */
.prsn.myline{background:linear-gradient(90deg,var(--wa-soft),#fff);}
.mlwrap{padding:16px;}
.ct-chat{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:50%;
background:var(--wa-soft);font-size:15px;cursor:pointer;align-self:center;
display:flex;align-items:center;justify-content:center;margin-left:6px;}
.ct-chat:active{opacity:.65;}
.llsave{margin:0 0 6px;}
.llsv-row{display:flex;gap:8px;}
.llsv-b{flex:1;border:1.5px solid var(--line);background:var(--panel);color:var(--ink-1);
border-radius:12px;padding:12px 8px;font-size:13px;font-weight:700;
font-family:'Inter',sans-serif;cursor:pointer;}
.llsv-b.prim{background:var(--wa-soft);border-color:transparent;color:var(--wa-dark);}
.llsv-b:active{opacity:.7;}
.llsv-h{font-size:11px;color:var(--ink-3);margin:7px 2px 0;line-height:1.4;}
.lifeline{margin:0 0 18px;min-height:120px;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.lifeline svg{cursor:grab;}
.lifeline svg:active{cursor:grabbing;}
.llbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 6px;}
.llz{display:flex;align-items:center;gap:2px;background:#F2F5F7;border-radius:9px;padding:2px;}
.llz button{width:26px;height:24px;border:none;background:#fff;border-radius:7px;
font-size:15px;font-weight:800;color:var(--ink-1);cursor:pointer;line-height:1;
box-shadow:0 1px 2px rgba(0,0,0,.06);}
.llz button:disabled{opacity:.35;box-shadow:none;background:transparent;cursor:default;}
.llz span{font-size:10.5px;font-weight:700;color:var(--ink-3);padding:0 7px;min-width:56px;text-align:center;}
.llrst{border:none;background:var(--wa-soft);color:var(--wa-dark);border-radius:8px;
padding:5px 10px;font-size:10.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.llhint{font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:4px;}
.llpop{background:#fff;border:1px solid var(--line);border-radius:14px;
margin-top:10px;padding:6px 10px 10px;box-shadow:0 6px 22px rgba(110,74,107,.10);
animation:llPopIn .26s cubic-bezier(.22,1,.36,1) both;}
@keyframes llPopIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.llpop-h{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 8px;}
.llpop-h b{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--wa-deep);}
.llpop-x{border:none;background:none;color:var(--ink-3);font-size:15px;cursor:pointer;padding:0 2px;line-height:1;}
.llpi{display:flex;align-items:flex-start;gap:11px;padding:10px 2px;}
.llpi + .llpi{border-top:1px solid var(--line);}
.llpi-e{font-size:15px;flex:0 0 auto;width:32px;height:32px;border-radius:9px;
display:flex;align-items:center;justify-content:center;}
.llpi-i{min-width:0;flex:1;}
.llpi-i b{display:block;font-size:13.5px;font-weight:700;color:var(--ink-1);line-height:1.35;}
.llpi-i span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;}
.llpi-act{display:flex;gap:7px;margin-top:9px;}
.llpi-act button{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:8px;
padding:6px 11px;font-size:11.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.llpi-act button.post{background:var(--wa-soft);border-color:#EBD9E6;color:var(--wa-deep);}
.llpi-act button.del{color:#B4404A;border-color:#F0D5D8;}
.llpi-act button.del.armed{background:#B4404A;border-color:#B4404A;color:#fff;}
.llpi-act button:active{opacity:.8;}
.ll-node.sel circle{filter:drop-shadow(0 2px 8px rgba(154,92,140,.4));}
.ll-birth{animation:llPop .4s var(--в) .2s both;}
.ll-now{animation:llPop .5s var(--в) 1s both;}
@keyframes llPop{from{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}
.ll-birth,.ll-now{transform-box:fill-box;transform-origin:center;}
.ll-node{animation:llNode .5s cubic-bezier(.3,1.4,.5,1) both;transform-box:fill-box;transform-origin:${'center bottom'};}
@keyframes llNode{from{opacity:0;transform:translateY(8px) scale(.4)}to{opacity:1;transform:translateY(0) scale(1)}}
.mlnow{background:linear-gradient(155deg,#4A3248,#6E4A6B);border-radius:18px;padding:20px;color:#fff;margin-bottom:20px;}
.mln-k{font-size:11px;opacity:.6;font-weight:800;letter-spacing:.08em;display:block;margin-bottom:6px;}
.mln-v{font-size:38px;font-weight:800;letter-spacing:-.03em;display:block;line-height:1;margin-bottom:8px;}
.mln-d{font-size:13px;opacity:.8;}
.mln-bar{margin-top:13px;cursor:pointer;}
.mln-bar-t{height:4px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;}
.mln-bar-f{height:100%;background:rgba(255,255,255,.75);border-radius:99px;}
.mln-bar-c{display:block;font-size:11.5px;opacity:.72;margin-top:7px;font-weight:600;}
/* РИТМ РАЗДЕЛОВ.
15 августа, вечер. Экран был свален в кучу: заголовки, карточки и ряды
шли подряд с разными отступами, без единой черты. Глазу не за что
зацепиться, и непонятно, где кончается одно и начинается другое.
Правило одно на все разделы: перед заголовком тонкая черта и воздух,
после заголовка — содержимое вплотную. Тогда заголовок читается как
начало своего куска, а не как подпись к предыдущему.
Первый заголовок черты не получает: над ним и так строка со счётом,
а линия под самой шапкой выглядела бы обрывком. */
.mlcap{font-size:11.5px;font-weight:800;color:var(--ink-3);letter-spacing:.06em;
text-transform:uppercase;margin:0 0 12px;padding-top:22px;
border-top:1px solid var(--line);}
/* Пояснение под заголовком раздела. Заголовки набраны прописными и
коротки — в них не объяснишь, что раздел хранит вещи, а не принимает
их по одному разу. Отбивку сверху снимаем: подпись идёт вплотную
к заголовку, иначе она читается как отдельный раздел. */
.mlsub{margin:-8px 0 12px;font-size:12px;line-height:1.4;color:var(--ink-3);}
/* Само правило .mlcap-row (раскладка в строку) объявлено ниже, рядом с
кнопкой «Добавить». Здесь только отбивка, и её нельзя писать там же:
два объявления одного класса в разных местах — верный способ потом
полдня искать, почему правка не применяется. Проверено на себе. */
.mlcap-row .mlcap{padding-top:0;border-top:none;margin-bottom:0;}
.ml-sum + .mlcap{padding-top:0;border-top:none;}
/* Пояснение под заголовком: черту берёт на себя заголовок, у пояснения
её быть не должно — иначе линия рисуется дважды. */
.mlcap + .mlcap-s{margin-top:-8px;}
.mlcap-s + div{margin-top:0;}
.mlcap + div{margin-bottom:4px;}
#ml-self, #ov-self{margin-bottom:26px;}
/* ЧТО СОБРАЛОСЬ — строка со счётом под шапкой раздела. Приподнята
цветом: это не подпись к чему-то, а сам смысл экрана. */
.ml-sum{margin:0 0 24px;}
.ml-sum-b{background:var(--wa-soft);border-radius:14px;padding:13px 15px;
font-size:13px;line-height:1.5;color:var(--wa-deep);font-weight:600;}
.ml-sum-b span{display:block;margin-top:3px;font-weight:400;color:var(--ink-3);font-size:12px;}
/* ДНИ РОЖДЕНИЯ БЛИЗКИХ. Карточка узкая: имя, кто это и когда. Лица тут
нет намеренно — у своих людей снимка чаще всего нет, а буква в кружке
честнее пустого серого прямоугольника. */
/* pan-x pan-y, а не просто pan-x. 31 августа, слово хозяина: «в твои
даты мышь перестала скроллиться, люди подумают что это баг».
Запрет pan-x гасит вертикальное движение НАД лентой: и палец на
телефоне, и колесо мыши на мониторе. Лента широкая, промахнуться
мимо неё легко — человек просто упирается в мёртвую полосу. Ось
браузер выбирает сам по первому движению: вбок листает даты, вниз
листает раздел. Ту же болезнь чинили в карусели 30 августа. */
.mlb-rail{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;margin-bottom:22px;
touch-action:pan-x pan-y;overscroll-behavior-x:contain;}
.mlb-c{flex:0 0 140px;width:140px;background:#fff;border:1px solid var(--line);
border-radius:13px;padding:12px;cursor:pointer;}
.mlb-c:active{border-color:var(--wa);}
.mlb-c.soon{border-color:var(--wa);background:var(--wa-soft);}
/* Род даты подписан прямо на карточке. Без этого «Ушёл брат Николай»
стоял рядом с чьим-то днём рождения и читался как повод праздновать. */
.mlb-k{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;}
.mlb-c.праздник .mlb-k{color:var(--wa-deep);}
.mlb-c.память .mlb-k{color:#8A929B;}
/* Память — приглушённо и без заливки: этой карточке нельзя выглядеть
праздничной, даже когда дата завтра. */
.mlb-c.память{background:#FAFAFB;}
.mlb-c.память.soon{background:#FAFAFB;border-color:var(--line);}
.mlb-c.память .mlb-av{background:#EFEFF2;color:#8A929B;}
.mlb-c.память u{color:#8A929B;}
.mlb-av{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;background:var(--wa-soft);color:var(--wa-deep);
font-size:15px;font-weight:800;margin-bottom:9px;}
.mlb-c.soon .mlb-av{background:var(--wa);color:#fff;}
.mlb-c b{display:block;font-size:13px;font-weight:700;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mlb-c i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
margin-top:3px;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mlb-c u{display:block;text-decoration:none;font-size:11px;font-weight:800;
color:var(--wa-deep);margin-top:8px;text-transform:uppercase;letter-spacing:.04em;}
/* СВОДКА ПО ДАТЕ. Открывается нажатием на карточку: что за дата, когда
была, каким днём твоей жизни, что случилось рядом. Дальше — в разговор
или назад. Разбор устроен как у новости, чтобы человек не учил
второй порядок действий. */
.mld-sheet{position:absolute;inset:0;z-index:140;background:rgba(30,16,28,.42);
display:none;align-items:flex-end;}
.mld-sheet.on{display:flex;}
.mld-b{width:100%;max-height:86%;overflow-y:auto;background:#fff;
border-radius:20px 20px 0 0;padding:14px 18px 22px;
animation:mldIn .24s cubic-bezier(.32,.72,0,1) both;}
@keyframes mldIn{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
.mld-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.mld-h span{font-size:11px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);}
.mld-back{border:none;background:var(--panel);width:30px;height:30px;border-radius:50%;
color:var(--ink-2);font-size:17px;line-height:1;cursor:pointer;}
.mld-b h3{font-size:19px;font-weight:800;line-height:1.3;margin:0 0 6px;}
.mld-when{font-size:13px;color:var(--wa-deep);font-weight:700;margin-bottom:14px;}
.mld-facts{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;}
.mld-facts div{display:flex;justify-content:space-between;gap:12px;font-size:13px;}
.mld-facts b{font-weight:600;color:var(--ink-3);flex:0 0 auto;}
.mld-facts span{color:var(--ink);text-align:right;}
.mld-near{background:var(--wa-soft);border-radius:12px;padding:12px 13px;margin-bottom:16px;}
.mld-near b{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--wa-deep);margin-bottom:7px;}
.mld-near div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
color:var(--ink-2);padding:3px 0;}
.mld-near div span{color:var(--ink-3);flex:0 0 auto;}
.mld-go{width:100%;border:none;background:var(--wa);color:#fff;border-radius:12px;
height:46px;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.mld-x{width:100%;border:none;background:none;color:var(--ink-3);
height:40px;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
.mlb-empty{background:var(--panel);border-radius:13px;padding:14px 15px;
font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.mlb-empty button{display:block;margin-top:10px;border:none;background:var(--wa);color:#fff;
border-radius:10px;padding:9px 16px;font-size:12.5px;font-weight:700;
font-family:'Inter',sans-serif;cursor:pointer;}
/* Пояснение под заголовком раздела: у дней рождения оно объясняет метку
«память», и без него она читается как чья-то ошибка. */
.mlcap-s{font-size:12px;color:var(--ink-3);margin:-8px 0 10px;line-height:1.45;}
.mlcap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-top:22px;border-top:1px solid var(--line);margin-bottom:12px;}
.mladd-s{border:none;background:var(--wa);color:#fff;border-radius:9px;
padding:8px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;
cursor:pointer;letter-spacing:0;text-transform:none;flex:0 0 auto;}
.mladd-s:active{opacity:.8;}
.mlev{border:1px solid var(--line);border-left:3px solid;border-radius:12px;padding:13px;margin-bottom:10px;}
.mlev-h{display:flex;align-items:flex-start;gap:10px;}
.mlev-e{font-size:19px;flex:0 0 auto;line-height:1.2;}
.mlev-i{flex:1;min-width:0;}
.mlev-i b{font-size:15px;display:block;line-height:1.3;}
.mlev-i span{font-size:12px;color:var(--ink-3);display:block;margin-top:2px;}
.mlev-h{cursor:pointer;}
.mlev-ed{background:none;border:1px solid var(--line);color:var(--ink-3);border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;margin-right:4px;}
.mlev-x{background:none;border:none;color:var(--ink-3);font-size:18px;flex:0 0 auto;line-height:1;padding:0;}
.mlev-m{margin-top:11px;padding:10px 12px;background:var(--panel);border-radius:10px;cursor:pointer;}
.mlev-m span{font-size:10.5px;color:var(--ink-3);font-weight:700;letter-spacing:.03em;text-transform:uppercase;display:block;margin-bottom:3px;}
.mlev-m b{font-size:13px;line-height:1.4;color:var(--ink);font-weight:600;}
.mlempty{padding:24px;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.55;border:1.5px dashed var(--line);border-radius:14px;}
.mladd{width:100%;background:var(--wa);border:none;color:#fff;border-radius:12px;height:48px;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;margin-top:14px;}
.ml-divider{height:1px;margin:26px 4px 20px;background:linear-gradient(90deg,transparent,var(--wa) 20%,var(--wa) 80%,transparent);opacity:.5;position:relative;}
.ml-divider::after{content:'✦';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg);color:var(--wa);font-size:12px;padding:0 10px;}
.mlhint{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:12px 0 0;text-align:center;}
.ekinds{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.ek{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);font-family:'Inter',sans-serif;}
.ek.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);}
/* life: person bar */
.pbar{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:9;}
.pback{width:34px;height:34px;border-radius:10px;border:none;background:var(--panel);color:var(--ink);font-size:21px;font-weight:600;flex:0 0 auto;line-height:1;padding-bottom:3px;}
.pbi{flex:1;min-width:0;}
/* Полоса «‹ Свои люди» / «‹ О тебе» и дерево в шапке линии живут
только на мониторе (см. блок широких экранов). На телефоне их
работу делает фиолетовая шапка. */
.zone-bar{display:none;}
.zone-tree{display:none;}
.pbi b{font-size:15.5px;display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pbi span{font-size:11.5px;color:var(--ink-3);}
.pnav{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);font-size:18px;font-weight:600;flex:0 0 auto;line-height:1;padding-bottom:2px;}
/* geo filter */
.geo{display:flex;gap:6px;margin-top:14px;background:var(--panel);padding:4px;border-radius:13px;}
.geo button{flex:1;padding:9px 4px;border-radius:10px;border:none;background:transparent;font-size:12.5px;font-weight:700;color:var(--ink-2);font-family:'Inter',sans-serif;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2;}
.geo button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.geo button small{font-size:10px;font-weight:600;color:var(--ink-3);}
.geo button.on small{color:var(--wa-deep);}
/* idol switcher with arrows */
.switcher{display:flex;align-items:center;gap:8px;margin-top:14px;}
.arrow{width:36px;height:36px;border-radius:11px;border:1.5px solid var(--line);background:#fff;color:var(--ink);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;line-height:1;padding-bottom:3px;}
.arrow:active{background:var(--panel);}
.chipwrap{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
.chipwrap::-webkit-scrollbar{display:none;}
.chips{display:flex;gap:8px;width:max-content;}
.chip{font-size:13px;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-2);background:#fff;white-space:nowrap;flex:0 0 auto;font-weight:600;}
.chip.on{background:var(--wa-dark);color:#fff;border-color:var(--wa-dark);}
.ev{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.ev .mk{width:10px;height:10px;border-radius:50%;flex:0 0 auto;margin-top:5px;}
/* товар между событиями */
.ev-prod{margin:0 0 1px;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;background:#fff;}
.evp-ctx{display:block;padding:10px 13px 6px;font-size:12.5px;color:var(--ink-2);font-style:italic;line-height:1.45;}
.evp-row{display:flex;align-items:center;gap:10px;padding:9px 13px 11px;border-top:1px solid var(--line);background:var(--panel);}
.evp-e{font-size:20px;flex:0 0 auto;line-height:1;}
.evp-i{flex:1;min-width:0;}
.evp-i b{font-size:13.5px;display:block;line-height:1.25;}
.evp-i span{font-size:11px;color:var(--ink-3);}
.evp-r{flex:0 0 auto;text-align:right;}
.evp-p{font-size:14px;font-weight:800;display:block;line-height:1.2;}
.evp-mem{display:block;font-size:10px;color:var(--wa-deep);font-style:italic;margin-top:1px;opacity:.8;}
.evp-btn{margin-top:5px;background:var(--wa);border:none;color:#fff;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
.ev .tx{flex:1;font-size:14.5px;line-height:1.45;}
.ev .wh{font-size:12px;color:var(--ink-3);margin-top:3px;}
.nowline{display:flex;align-items:center;gap:9px;padding:8px 0;}
.nowline .l{flex:1;height:1.5px;background:var(--amber);border-radius:2px;}
.nowline span{font-size:11px;font-weight:800;color:var(--amber);letter-spacing:.06em;}
/* total days on earth */
.total{background:#111B21;color:#fff;border-radius:18px;padding:18px 16px;margin-top:12px;}
.total .row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px;}
.total .col .k{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.04em;margin-bottom:3px;}
.total .col .v{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.total .col.me .v{color:var(--amber);}
.total .bar{height:8px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;position:relative;}
.total .bar .fill{height:100%;background:var(--amber);border-radius:99px;}
.total .note{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.5;margin:11px 0 0;}
.total .note b{color:#fff;font-weight:700;}
/* diet */
.meal{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.meal .t{flex:0 0 62px;font-size:12px;font-weight:800;color:var(--food);padding-top:2px;}
.meal .w{flex:1;font-size:14px;line-height:1.5;}
.dnote{background:#FFF8E8;border-left:3px solid var(--amber);border-radius:0 10px 10px 0;padding:11px 13px;margin-top:12px;font-size:13px;line-height:1.55;color:#7A5510;}
.dnote.warn{background:#FDECEC;border-left-color:#E85D5D;color:#8C2F2F;}
/* fab + sheet */
.fab-wrap{position:absolute;right:18px;bottom:24px;display:flex;align-items:center;gap:10px;z-index:30;}
.fab{width:58px;height:58px;border-radius:19px;background:var(--wa);color:#fff;border:none;font-size:32px;font-weight:300;line-height:1;padding-bottom:4px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,.42);flex:0 0 auto;cursor:pointer;}
.fab-hint{background:var(--wa-dark);color:#fff;font-size:13px;font-weight:700;padding:9px 14px;border-radius:12px;white-space:nowrap;transition:opacity .3s var(--в);box-shadow:0 4px 12px rgba(0,0,0,.18);}
.fab-hint::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--wa-dark);}
/* корзина: покупают сегодня */
.cart-trending{margin:20px 0 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-align:left;}
.ctr-h{padding:11px 14px;font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;background:var(--panel);border-bottom:1px solid var(--line);}
.ctr-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s var(--мяг);}
.ctr-item:last-child{border-bottom:none;}
.ctr-item:active{background:var(--wa-soft);}
.ctr-e{font-size:22px;flex:0 0 auto;line-height:1;}
.ctr-i{flex:1;min-width:0;}
.ctr-i b{font-size:13.5px;display:block;line-height:1.25;}
.ctr-i span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:2px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ctr-r{flex:0 0 auto;text-align:right;}
.ctr-p{font-size:14px;font-weight:800;display:block;}
.ctr-add{display:block;margin-top:4px;width:28px;height:28px;background:var(--wa);color:#fff;border-radius:8px;font-size:18px;line-height:28px;text-align:center;font-weight:300;}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .22s var(--в);z-index:40;}
.scrim.on{opacity:1;pointer-events:auto;}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;z-index:41;transform:translateY(102%);transition:transform .22s var(--из);max-height:82%;display:flex;flex-direction:column;overflow:hidden;}
.sheet.on{transform:none;transition:transform .32s var(--в);}
#publish{z-index:82;}
#orderdone{z-index:86;}
#partner{z-index:88;}
#saveset{z-index:88;}
#ssscrim{z-index:87;}
#mfscrim{z-index:89;}
#memflow{z-index:90;}
.grab{width:38px;height:4px;border-radius:99px;background:#D8DEE3;margin:10px auto 4px;flex:0 0 auto;}
.sheet .sh{padding:8px 16px 12px;flex:0 0 auto;}
.sheet .sh b{font-size:17px;display:block;}
.sheet .sh span{font-size:13px;color:var(--ink-2);}
.sheet .list{overflow-y:auto;padding-bottom:20px;}
.sheet .list::-webkit-scrollbar{display:none;}
.cap{margin:0 16px 10px;background:var(--amber-soft);color:#9A6212;border-radius:12px;padding:10px 13px;font-size:12.5px;line-height:1.45;}
.prow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);}
.prow .ava{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex:0 0 auto;}
.prow .mid{flex:1;min-width:0;}
.prow b{font-size:15px;display:block;}
.prow span{font-size:12.5px;color:var(--ink-2);display:block;line-height:1.4;}
.sq{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:400;line-height:1;border:none;font-family:'Inter',sans-serif;padding:0 0 3px 0;}
.sq.plus{background:var(--wa);color:#fff;}
.sq.minus{background:#E85D5D;color:#fff;}
.sq.off{background:var(--panel);color:#C9CFD6;}
.toast{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 17px;border-radius:12px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .22s var(--в);z-index:60;white-space:nowrap;max-width:88%;text-align:center;}
.toast.show{opacity:1;}
/* hamburger + settings */
.burger{display:flex;flex-direction:column;gap:3.5px;padding:4px;cursor:pointer;}
.burger i{display:block;width:18px;height:2px;background:#fff;border-radius:2px;}
.hleft{display:flex;align-items:center;gap:12px;}
/* z-index поднят выше ящика разговоров (130): профиль открывается ИЗ него
и должен лечь поверх, иначе панель уезжает под список и выглядит
не открывшейся. */
.panel{position:absolute;top:0;bottom:0;left:0;width:84%;max-width:330px;background:#fff;z-index:150;transform:translateX(-102%);transition:transform .22s var(--из);display:flex;flex-direction:column;box-shadow:6px 0 30px rgba(0,0,0,.18);}
.panel.on{transform:none;transition:transform .32s var(--в);}
.panel .ph{background:var(--wa-dark);color:#fff;padding:22px 18px 18px;flex:0 0 auto;}
.panel .ph b{font-size:18px;display:block;}
.panel .ph span{font-size:12.5px;opacity:.65;}
.panel .pb{flex:1;overflow-y:auto;padding:4px 0 30px;}
.panel .pb::-webkit-scrollbar{display:none;}
.grp{padding:16px 18px 6px;font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase;}
.fld{padding:0 18px 14px;}
.fld label{font-size:12.5px;color:var(--ink-2);display:block;margin-bottom:6px;font-weight:600;}
.fld input, .fld select{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:11px;padding:12px 13px;font-size:15px;font-family:'Inter',sans-serif;outline:none;color:var(--ink);}
.fld input:focus, .fld select:focus{border-color:var(--wa);background:#fff;}
.two{display:flex;gap:10px;padding:0 18px 14px;}
.two > div{flex:1;}
.two label{font-size:12.5px;color:var(--ink-2);display:block;margin-bottom:6px;font-weight:600;}
.two input, .two select{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:11px;padding:12px 10px;font-size:15px;font-family:'Inter',sans-serif;outline:none;}
.trow{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);gap:14px;}
.sw{width:50px;height:29px;border-radius:99px;background:#D4DAE0;flex:0 0 auto;position:relative;transition:background .18s var(--мяг);cursor:pointer;}
.sw.on{background:var(--wa);}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:transform .18s var(--в);box-shadow:0 1px 3px rgba(0,0,0,.25);}
.sw.on:after{transform:translateX(21px);}
.trow b{font-size:14.5px;display:block;font-weight:600;}
.trow span{font-size:12px;color:var(--ink-3);}
.seg{display:flex;gap:6px;padding:0 18px 14px;}
.seg button{flex:1;padding:11px 0;border-radius:11px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:700;color:var(--ink-2);}
.seg button.on{background:var(--wa-dark);color:#fff;border-color:var(--wa-dark);}
.save{margin:16px 18px 0;width:calc(100% - 36px);background:var(--wa);color:#fff;border:none;border-radius:12px;height:48px;font-size:15px;font-weight:700;}
.agecap{margin:0 18px;background:var(--wa-soft);border-radius:11px;padding:11px 13px;font-size:13px;color:#0F5132;line-height:1.5;}
/* profile extras */
.menupt{display:flex;align-items:center;gap:12px;margin:14px 16px 4px;padding:14px;border-radius:14px;background:var(--wa-soft);border:1px solid #C9EED8;cursor:pointer;}
.menupt-e{font-size:24px;flex:0 0 auto;line-height:1;}
.menupt-t{flex:1;min-width:0;}
.menupt-t b{font-size:15px;font-weight:800;display:block;line-height:1.25;color:var(--ink);}
.menupt-t span{font-size:12px;color:var(--wa-dark);display:block;margin-top:2px;font-weight:600;line-height:1.35;}
.menupt-arr{color:var(--wa-deep);font-size:20px;flex:0 0 auto;font-weight:700;}
.menupt.alt{background:#FFF6E8;border-color:#F5E2C0;}
.menupt.alt .menupt-t span{color:#B8722A;}
.menupt.alt .menupt-arr{color:#B8722A;}
.menupt.dark{background:var(--wa-dark);border-color:var(--wa-dark);}
.menupt.dark .menupt-t b{color:#fff;}
.menupt.dark .menupt-t span{color:rgba(255,255,255,.7);}
.menupt.dark .menupt-arr{color:rgba(255,255,255,.8);}
/* Раньше здесь стоял просто text-align:center, а обе подписи — строчные
span. Из-за этого «загрузить фото · убрать» и объяснение слипались в
одну строку и обтекали аватар сбоку. Ставим колонку: каждая подпись
на своей строке, объяснение — узкой колонкой под ссылками. */
.avwrap{display:flex;flex-direction:column;align-items:center;gap:7px;
text-align:center;padding:20px 0 10px;}
.avwrap .avhint{display:block;max-width:260px;line-height:1.45;}
.avwrap .bigav{margin:0;}
.bigav{width:76px;height:76px;border-radius:50%;background:var(--wa-soft);color:var(--wa-deep);font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.08);}
.avhint{font-size:11.5px;color:var(--ink-3);}
.tzhint{padding:8px 18px 0;font-size:12px;color:var(--ink-3);line-height:1.5;margin:0;}
.seg3{display:flex;gap:6px;padding:0 18px 4px;}
.seg3 button{flex:1;padding:11px 0;border-radius:11px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--ink-2);font-family:'Inter',sans-serif;}
.seg3 button.on{background:var(--wa-dark);color:#fff;border-color:var(--wa-dark);}
.bought{display:flex;align-items:center;gap:11px;padding:12px 18px;border-bottom:1px solid var(--line);}
.bought .bav{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto;}
.bought .bin{flex:1;min-width:0;}
.bought .bin b{font-size:14px;display:block;}
.bought .bin span{font-size:12px;color:var(--ink-3);}
/* --red нигде не объявлена: кнопка выходила бесцветной. У двух соседних
правил на этот случай стоит запасной цвет вторым доводом, здесь его
забыли. Ставим тот же. */
.bought .bx{background:none;border:none;color:var(--red,#C0392B);font-size:12px;font-weight:700;flex:0 0 auto;}
.nobought{padding:14px 18px;font-size:13px;color:var(--ink-3);line-height:1.5;}
.authbox{display:flex;align-items:center;gap:11px;padding:14px 18px;cursor:pointer;}
.authbox:first-child{padding-top:16px;}
.authbox+.authbox{border-top:1px solid var(--line);}
.authbox+.avwrap{border-top:1px solid var(--line);margin-top:4px;}
.authbox .ai{width:38px;height:38px;border-radius:12px;background:var(--wa-soft);color:var(--wa-deep);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex:0 0 auto;}
.authbox b{font-size:14.5px;display:block;}
.authbox span{font-size:12.5px;color:var(--ink-2);}
.authbox .ac{color:var(--ink-3);font-size:18px;}
/* market soon */
.soon{padding:40px 24px;text-align:center;}
.soon .ic{width:70px;height:70px;border-radius:22px;background:var(--wa-soft);color:var(--wa);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 18px;}
.soon h3{font-size:20px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em;}
.soon p{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0 0 22px;}
.soon input{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:12px;padding:13px 14px;font-size:15px;font-family:'Inter',sans-serif;outline:none;margin-bottom:10px;text-align:center;}
.soon input:focus{border-color:var(--wa);background:#fff;}
.soon > button, .money button, .guard button{width:100%;background:var(--ink);color:#fff;border:none;border-radius:12px;height:48px;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;}
.preview{text-align:left;margin-top:28px;}
.preview .pt{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.07em;margin-bottom:10px;}
.blur{filter:blur(2.5px);opacity:.5;pointer-events:none;}
/* monetization */
.money{text-align:left;margin-top:30px;border-top:1px solid var(--line);padding-top:22px;}
.money .mt{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.08em;margin-bottom:16px;}
.mrow{display:flex;gap:12px;margin-bottom:18px;align-items:flex-start;}
.mn{width:26px;height:26px;border-radius:8px;background:var(--wa-soft);color:var(--wa-deep);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.mc b{font-size:14.5px;display:block;margin-bottom:3px;}
.mc span{font-size:13.5px;color:var(--ink-2);line-height:1.55;display:block;}
.mc span b{display:inline;color:var(--wa-deep);font-weight:800;}
.mnote{background:var(--panel);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.5;}
/* add to day from life */
.adaybox{display:flex;align-items:center;gap:12px;background:var(--wa-soft);border-radius:15px;padding:13px 14px;margin-top:14px;}
.adaybox.off{background:var(--panel);}
.adaybox .adi{flex:1;min-width:0;}
.adaybox .adi b{font-size:14.5px;display:block;line-height:1.3;}
.adaybox .adi span{font-size:12.5px;color:var(--ink-2);display:block;margin-top:2px;}
.adaybox.off .adi b{color:var(--ink-2);}
.adbtn{background:var(--wa);color:#fff;border:none;border-radius:11px;padding:11px 16px;font-size:13.5px;font-weight:700;flex:0 0 auto;font-family:'Inter',sans-serif;}
.adaybox.food{background:#FDF2E2;margin-top:8px;}
.adaybox.food .adi b:before{content:"🍽 ";}
.adbtn.food{background:#B45309;}
.tfwarn{margin:0 16px 12px;background:#FDECEC;border-radius:13px;padding:12px 14px;font-size:13px;color:#8C2F2F;line-height:1.5;}
.tok{color:var(--wa);font-weight:800;flex:0 0 auto;}
/* market sections */
.msect{font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin:20px 0 10px;text-align:left;}
.mnone{background:var(--panel);border-radius:14px;padding:14px;font-size:13.5px;color:var(--ink-2);line-height:1.55;text-align:left;margin-bottom:12px;}
.mnone b{color:var(--wa-deep);font-weight:800;}
/* community chat */
.chat{position:absolute;inset:0;background:#EDE7DF;z-index:85;display:none;flex-direction:column;}
.chat.on{display:flex;}
.chh{background:var(--wa-dark);color:#fff;padding:12px 12px;display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.chback{width:32px;height:32px;border:none;background:transparent;color:#fff;font-size:24px;flex:0 0 auto;line-height:1;padding-bottom:4px;}
.chav{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:0 0 auto;}
.chi{flex:1;min-width:0;}
.chi b{font-size:15px;display:block;line-height:1.25;}
.chi span{font-size:11.5px;opacity:.7;}
.chbanner{background:var(--wa-soft);color:#0F5132;font-size:12px;padding:8px 14px;text-align:center;flex:0 0 auto;font-weight:600;}
.chbanner span{text-decoration:underline;cursor:pointer;}
.chlog{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px;}
.chlog::-webkit-scrollbar{display:none;}
.msg{max-width:82%;align-self:flex-start;}
.msg.me{align-self:flex-end;}
.msg .mw{font-size:11.5px;font-weight:700;color:var(--wa-deep);margin:0 0 3px 4px;display:block;}
.msg .mw .badge{font-style:normal;font-size:9.5px;background:var(--wa);color:#fff;padding:1px 5px;border-radius:4px;margin-left:5px;font-weight:800;vertical-align:1px;}
.msg .mb{background:#fff;border-radius:12px;padding:9px 12px 7px;font-size:14px;line-height:1.5;color:var(--ink);position:relative;box-shadow:0 1px 1px rgba(0,0,0,.06);}
.msg.me .mb{background:#D9FDD3;}
.msg .mt{display:block;font-size:10px;color:var(--ink-3);text-align:right;margin-top:2px;}
.chin{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#F0F2F5;flex:0 0 auto;}
.chin input{flex:1;border:none;border-radius:22px;padding:12px 16px;font-size:15px;font-family:'Inter',sans-serif;outline:none;background:#fff;}
.chin button{width:44px;height:44px;border-radius:50%;border:none;background:var(--wa);color:#fff;font-size:20px;flex:0 0 auto;font-weight:700;}
/* share */
.pshare{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);font-size:16px;flex:0 0 auto;line-height:1;}
.storywrap{padding:0 16px 12px;display:flex;justify-content:center;}
.story{width:200px;aspect-ratio:9/16;border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;justify-content:center;color:#fff;position:relative;overflow:hidden;background:linear-gradient(160deg,#4A3248,#6E4A6B);}
.story .sbrand{position:absolute;top:14px;left:16px;font-size:11px;font-weight:800;opacity:.75;letter-spacing:.02em;}
.story .sk{font-size:10px;opacity:.6;font-weight:700;letter-spacing:.08em;margin-bottom:5px;}
.story .sv{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:14px;}
.story .sv.small{font-size:22px;}
.story .sline{height:1px;background:rgba(255,255,255,.22);margin:0 0 14px;}
.story .sp{font-size:12.5px;line-height:1.5;opacity:.85;}
.story .sp b{font-weight:800;opacity:1;}
.story .sfoot{position:absolute;bottom:14px;left:16px;right:16px;font-size:9.5px;opacity:.5;font-weight:600;}
.shlink{margin:0 16px 12px;background:var(--panel);border-radius:11px;padding:11px 13px;font-size:12.5px;color:var(--ink-2);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shbtns{display:flex;gap:9px;padding:0 16px calc(16px + env(safe-area-inset-bottom));}
.sb1{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:12px;height:48px;font-size:13.5px;font-weight:700;color:var(--ink);}
.sb2{flex:1.3;background:var(--wa);border:none;border-radius:12px;height:48px;font-size:13.5px;font-weight:700;color:#fff;}
/* day header + push */
/* FULLSCREEN STORY */
.story-overlay{position:absolute;inset:0;z-index:95;display:none;flex-direction:column;background:#000;}
.story-overlay.on{display:flex;}
.story-progress{display:flex;gap:3px;padding:10px 12px 0;position:absolute;top:0;left:0;right:0;z-index:2;}
.story-seg{flex:1;height:2.5px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden;}
.story-seg-fill{height:100%;background:#fff;width:0%;transition:none;}
.story-seg-fill.run{transition:width linear;}
.story-hdr{display:flex;align-items:center;gap:10px;padding:22px 14px 10px;position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);}
.story-av{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid #fff;flex:0 0 auto;}
.story-av svg{display:block;width:36px;height:36px;}
.story-meta{flex:1;}
.story-meta b{font-size:14px;font-weight:700;color:#fff;display:block;line-height:1.2;}
.story-meta span{font-size:11px;color:rgba(255,255,255,.7);}
.story-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px;}
.story-pause{background:rgba(255,255,255,.15);border:none;color:#fff;font-size:14px;cursor:pointer;padding:6px 10px;border-radius:8px;margin-right:4px;backdrop-filter:blur(4px);}
.story-body{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 24px 140px;}
.story-text{color:#fff;font-size:17px;line-height:1.7;font-weight:500;white-space:pre-line;text-align:left;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.story-tap-l{position:absolute;left:0;top:0;bottom:170px;width:35%;z-index:3;}
.story-tap-r{position:absolute;right:0;top:0;bottom:170px;width:65%;z-index:3;}
.story-prod{position:absolute;bottom:0;left:0;right:0;padding:12px 14px 20px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);z-index:4;}
.story-prod-inner{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:14px;padding:12px;margin-bottom:10px;backdrop-filter:blur(10px);}
.story-prod-e{font-size:26px;flex:0 0 auto;line-height:1;}
.story-prod-i{flex:1;}
.story-prod-i b{color:#fff;font-size:15px;display:block;}
.story-prod-i span{color:rgba(255,255,255,.7);font-size:12px;}
.story-prod-p{color:#fff;font-size:16px;font-weight:800;flex:0 0 auto;}
.story-buy{width:100%;background:var(--wa);border:none;color:#fff;border-radius:14px;height:50px;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.myline-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 16px 0;padding:13px 14px;background:var(--wa-soft);border-radius:14px;cursor:pointer;border:1px solid #C9EED8;}
.kin-banner{display:flex;align-items:center;gap:12px;margin:8px 16px 0;padding:13px 14px;
background:#F6F1E8;border:1px solid #E4D5BE;border-radius:14px;cursor:pointer;}
.kin-banner:active{background:#F0E8DA;}
.kin-banner-e{font-size:22px;flex:0 0 auto;}
.kin-banner-i{flex:1;min-width:0;}
.kin-banner-i b{display:block;font-size:14px;font-weight:700;color:var(--ink-1);}
.kin-banner-i span{display:block;font-size:12px;color:var(--ink-3);margin-top:1px;line-height:1.4;}
.kin-banner-a{font-size:20px;color:#B08D57;flex:0 0 auto;}
.mlb-i{flex:1;min-width:0;}
.mlb-i b{font-size:15px;font-weight:800;display:block;color:var(--wa-dark);}
.mlb-i span{font-size:12.5px;color:var(--wa-deep);display:block;margin-top:2px;}
.mlb-btn{background:var(--wa);border:none;color:#fff;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
/* СЕЛЛЕР — короткие аргументы */
.ptwhy{display:flex;gap:8px;margin:10px 0 16px;}
.ptwhy-r{flex:1;background:var(--wa-soft);border-radius:13px;padding:12px 8px;text-align:center;}
.ptwhy-r b{font-size:19px;font-weight:800;color:var(--wa-dark);display:block;}
.ptwhy-r span{font-size:11px;color:var(--wa-deep);display:block;margin-top:2px;line-height:1.3;}
/* ПУСТОЙ КОНСТРУКТОР */
.dayempty{margin:14px 16px;padding:18px 16px;border:1.5px dashed var(--line);border-radius:18px;text-align:center;}
.dayempty b{font-size:15.5px;font-weight:800;display:block;margin-bottom:6px;}
.dayempty p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0 0 14px;}
.de-btn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:12px;height:46px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;margin-bottom:8px;}
.de-alt{width:100%;background:none;border:1.5px solid var(--line);color:var(--ink-2);border-radius:12px;height:42px;font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
/* ВЫБОР ЧЕЛОВЕКА */
.pick-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 0 18px;}
.pick-row{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;}
.pick-row:active{background:var(--panel);}
.pick-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;}
.pick-av svg{display:block;width:100%;height:100%;}
.pick-i{flex:1;min-width:0;}
.pick-i b{font-size:14.5px;font-weight:700;display:block;line-height:1.25;}
.pick-i span{font-size:12.5px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pick-n{font-size:11.5px;color:var(--wa-deep);font-weight:700;flex:0 0 auto;}
/* ПУБЛИКАЦИЯ — ПРОСТО */
.pb-simple{padding:4px 16px 20px;overflow-y:auto;min-height:0;}
.pb-way{display:flex;align-items:center;gap:13px;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 14px;margin-bottom:10px;cursor:pointer;font-family:'Inter',sans-serif;text-align:left;}
.pb-way:active{border-color:var(--wa);background:var(--wa-soft);}
.pbw-e{font-size:26px;line-height:1;flex:0 0 auto;}
.pbw-t{flex:1;min-width:0;}
.pbw-t b{font-size:16px;font-weight:800;display:block;line-height:1.25;}
.pbw-t span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px;}
.pbw-a{font-size:20px;color:var(--ink-3);flex:0 0 auto;}
/* КАРТОЧКА ДНЯ */
#daycard{max-height:92vh;overflow-y:auto;}
.dc-wrap{padding:4px 16px 12px;}
#dc-canvas{width:100%;border-radius:16px;display:block;box-shadow:0 6px 24px rgba(0,0,0,.18);}
.dc-link{text-align:center;font-size:13px;color:var(--ink-3);padding-bottom:12px;}
.dc-btns{display:flex;gap:9px;padding:0 16px 9px;}
.dc-btns button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:12px;height:46px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.dc-save{width:calc(100% - 32px);margin:0 16px 8px;background:var(--wa);border:none;color:#fff;border-radius:13px;height:50px;font-size:14.5px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;}
.dc-close{width:calc(100% - 32px);margin:0 16px 18px;background:none;border:none;color:var(--ink-3);font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;padding:8px;}
.of-course{display:flex;align-items:center;gap:11px;margin:4px 16px 14px;padding:13px 14px;border:1.5px solid var(--wa);border-radius:14px;cursor:pointer;background:#fff;}
.ofc-t{flex:1;min-width:0;}
.ofc-l{font-size:10.5px;font-weight:800;color:var(--wa-deep);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:2px;}
.ofc-t b{font-size:14.5px;font-weight:700;display:block;line-height:1.25;}
.ofc-t span{font-size:12px;color:var(--ink-3);}
.crs-av{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto;}
/* ОБСУЖДЕНИЕ ПОД ШАГОМ */
.qa{margin:6px 16px 16px;padding:14px;background:var(--panel);border-radius:16px;}
.qa-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px;}
.qa-h b{font-size:14px;font-weight:800;}
.qa-h span{font-size:11.5px;color:var(--ink-3);}
.qa-m{background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:8px;}
.qa-m.auth{background:var(--wa-soft);}
.qa-mh{display:flex;align-items:baseline;gap:7px;margin-bottom:3px;}
.qa-mh b{font-size:13px;font-weight:800;}
.qa-ago{font-size:11px;color:var(--ink-3);margin-left:auto;}
.qa-m p{font-size:13.5px;line-height:1.5;margin:0;}
.qa-empty{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0 0 10px;}
.qa-in{display:flex;gap:7px;}
.qa-in input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:10px 14px;font-size:13.5px;font-family:'Inter',sans-serif;outline:none;background:#fff;min-width:0;}
.qa-in input:focus{border-color:var(--wa);}
.qa-in button{width:40px;height:40px;border-radius:50%;background:var(--wa);border:none;color:#fff;font-size:17px;cursor:pointer;flex:0 0 auto;}
.co-q{background:var(--wa-soft);color:var(--wa-deep);font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;flex:0 0 auto;}
/* ЭКРАН ШАГА */
.st-prog{height:4px;background:var(--panel);}
.st-prog div{height:100%;background:var(--wa);transition:width .3s;}
.st-main{padding:20px 18px 8px;}
.st-n{font-size:11.5px;font-weight:800;color:var(--wa-deep);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px;}
.st-h{font-size:24px;font-weight:800;line-height:1.25;margin:0 0 9px;letter-spacing:-.01em;}
.st-d{font-size:15px;color:var(--ink-2);line-height:1.55;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.st-body-txt p{font-size:15px;line-height:1.7;color:var(--ink);margin:0 0 14px;}
.st-ask{display:flex;align-items:center;gap:10px;margin:8px 16px 16px;padding:13px;background:var(--panel);border-radius:14px;cursor:pointer;}
.st-nav{display:flex;gap:8px;padding:0 16px 26px;}
.st-prev,.st-next{background:#fff;border:1.5px solid var(--line);color:var(--ink-2);border-radius:12px;height:48px;padding:0 14px;font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.st-done{flex:1;background:var(--wa);border:none;color:#fff;border-radius:12px;height:48px;font-size:14.5px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;}
.st-done.on{background:var(--wa-soft);color:var(--wa-dark);}
.co-done{color:var(--wa);font-size:16px;font-weight:800;flex:0 0 auto;}
.co-s.passed .co-sn{background:var(--wa);color:#fff;}
.co-s.passed .co-si b{color:var(--ink-3);}
.co-ap{height:5px;background:#D6F0E0;border-radius:3px;overflow:hidden;margin-bottom:7px;}
.co-ap div{height:100%;background:var(--wa);border-radius:3px;transition:width .3s;}
.mk-why{margin:14px 16px 4px;padding:16px;background:var(--wa-soft);border-radius:18px;}
.mk-why b{font-size:19px;font-weight:800;color:var(--wa-dark);display:block;margin-bottom:6px;line-height:1.3;}
.mk-why > p{font-size:13.5px;color:var(--wa-deep);line-height:1.55;margin:0 0 14px;}
.mk-why-r{display:flex;align-items:flex-end;gap:8px;padding:12px;background:#fff;border-radius:13px;margin-bottom:11px;}
.mk-why-r > div{text-align:center;}
.mk-why-r b{font-size:16px;font-weight:800;color:var(--ink);display:block;margin:0;}
.mk-why-r span{font-size:9.5px;color:var(--ink-3);display:block;line-height:1.2;}
.mk-why-sum b{color:var(--wa-dark)!important;font-size:18px!important;}
.mk-why-sum span{color:var(--wa-deep)!important;font-weight:600;}
.mk-why-n{font-size:12px;color:var(--wa-deep);line-height:1.5;margin:0;opacity:.85;}
/* ВЫБОР ИСТОЧНИКА */
.mk-way{display:flex;align-items:center;gap:13px;width:100%;margin:0 0 10px;padding:16px 14px;border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;font-family:'Inter',sans-serif;text-align:left;box-sizing:border-box;}
.mk-way:active{border-color:var(--wa);background:var(--wa-soft);}
.mk-way.ig{border-color:#C13584;background:#FFF0F8;}
.mk-way.web{border-color:#1565C0;background:#EFF6FF;}
.mkw-e{font-size:26px;line-height:1;flex:0 0 auto;}
.mkw-t{flex:1;min-width:0;}
.mkw-t b{font-size:15.5px;font-weight:800;display:block;line-height:1.25;}
.mkw-t span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px;}
.mkw-a{font-size:20px;color:var(--ink-3);flex:0 0 auto;}
#pg-mkcourse .mk-way{margin-left:16px;margin-right:16px;width:calc(100% - 32px);}
.mk-ta{width:calc(100% - 32px);margin:0 16px;border:1.5px solid var(--line);border-radius:14px;padding:14px;font-size:15px;font-family:'Inter',sans-serif;box-sizing:border-box;resize:none;line-height:1.5;}
.mk-ta:focus{outline:none;border-color:var(--wa);}
.mk-in2{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px;font-size:15px;font-family:'Inter',sans-serif;box-sizing:border-box;margin-bottom:9px;}
.mk-in2:focus{outline:none;border-color:var(--wa);}
.mk-h.on{background:var(--wa);color:#fff;}
/* ПОИСК */
.mk-scan{padding:60px 32px;text-align:center;}
.mk-spin{width:38px;height:38px;margin:0 auto 18px;border:3px solid var(--panel);border-top-color:var(--wa);border-radius:50%;animation:mkspin .8s linear infinite;}
@keyframes mkspin{to{transform:rotate(360deg);}}
.mk-scan b{font-size:15.5px;font-weight:700;display:block;margin-bottom:5px;}
.mk-scan span{font-size:12.5px;color:var(--ink-3);}
/* НАЙДЕННЫЕ СКИЛЛЫ */
.mk-found-h{padding:16px 16px 8px;}
.mk-found-h b{font-size:18px;font-weight:800;display:block;margin-bottom:4px;}
.mk-found-h p{font-size:13px;color:var(--ink-3);line-height:1.5;margin:0;}
.mk-found{margin:0 16px 10px;padding:14px;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;}
.mk-found:active{border-color:var(--wa);background:var(--wa-soft);}
.mkf-top{display:flex;gap:11px;margin-bottom:9px;}
.mkf-e{font-size:26px;line-height:1;flex:0 0 auto;}
.mkf-i{flex:1;min-width:0;}
.mkf-i b{font-size:15.5px;font-weight:800;display:block;line-height:1.3;}
.mkf-i span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:3px;line-height:1.45;}
.mkf-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);padding-top:9px;border-top:1px solid var(--line);}
.mkf-go{margin-left:auto;color:var(--wa-deep);font-weight:800;}
/* БУДНИ / ВЫХОДНЫЕ */
.daytabs{display:flex;gap:4px;background:var(--panel);border-radius:9px;padding:3px;}
.dt{background:none;border:none;border-radius:7px;padding:5px 11px;font-size:11.5px;font-weight:700;color:var(--ink-3);font-family:'Inter',sans-serif;cursor:pointer;}
.dt.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.ctps-h-n{font-size:12px;color:var(--ink-3);}
.dnote-l{display:block;font-size:12.5px;color:var(--wa-deep);font-weight:700;}
.dnote-s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;}
.dm-btn{background:var(--wa-soft);border:none;color:var(--wa-dark);border-radius:10px;padding:8px 13px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;margin-left:auto;}
.dm-last{color:var(--ink-2);}
.dm-you{color:var(--ink-3);}
/* ЛИЧНЫЙ ЧАТ */
#pg-dm{padding-bottom:70px;}
.dmitem{display:flex;align-items:center;gap:11px;margin:10px 16px;padding:12px;background:var(--panel);border-radius:14px;}
.dmi-e{font-size:24px;line-height:1;flex:0 0 auto;}
.dmi-i{flex:1;min-width:0;}
.dmi-i b{font-size:14px;font-weight:700;display:block;line-height:1.25;}
.dmi-i span{font-size:11.5px;color:var(--ink-3);}
.dmi-p{font-size:15px;font-weight:800;flex:0 0 auto;white-space:nowrap;}
.dm-empty{text-align:center;font-size:13px;color:var(--ink-3);padding:40px 24px;}
.dmsg{max-width:78%;margin:6px 16px;padding:10px 13px;border-radius:14px;background:#fff;border:1px solid var(--line);}
.dmsg.me{margin-left:auto;background:var(--wa-soft);border-color:transparent;}
.dmsg p{font-size:14px;line-height:1.45;margin:0;}
.dmsg span{font-size:10.5px;color:var(--ink-3);display:block;text-align:right;margin-top:3px;}
.dm-quick{display:flex;flex-wrap:wrap;gap:7px;padding:8px 16px 4px;}
.dmq{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--ink-2);font-family:'Inter',sans-serif;cursor:pointer;}
/* РЕЗУЛЬТАТЫ ПОИСКА */
.searchres{position:absolute;top:104px;left:0;right:0;bottom:64px;background:#fff;color:var(--ink);z-index:95;overflow-y:auto;display:none;}
.searchres.on{display:block;}
.sr-cap{font-size:11.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:14px 16px 7px;background:var(--panel);}
.sr-row{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;}
.sr-row:active{background:var(--panel);}
.sr-e{font-size:23px;line-height:1;flex:0 0 auto;}
.sr-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 auto;}
.sr-av svg{display:block;width:100%;height:100%;}
.sr-i{flex:1;min-width:0;}
.sr-i b{font-size:14px;font-weight:700;color:var(--ink);display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr-i span{font-size:12px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sr-p{font-size:14.5px;font-weight:800;color:var(--ink);flex:0 0 auto;white-space:nowrap;}
.sr-empty{padding:40px 24px;text-align:center;}
.sr-empty b{font-size:16px;color:var(--ink);display:block;margin-bottom:7px;}
.sr-empty p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0;}
.sr-chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 16px 18px;}
.sr-chip{border:1px solid var(--line);background:var(--panel);color:var(--ink-1);
border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;
font-family:'Inter',sans-serif;cursor:pointer;}
.sr-chip:active{background:var(--wa-soft);border-color:transparent;color:var(--wa-dark);}
.sr-fast{color:var(--wa-dark);font-weight:700;}
.sr-per{background:linear-gradient(90deg, var(--wa-soft) 0%, transparent 60%);}
.sr-who{color:var(--wa-dark);font-weight:700;}
.sr-when{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;}
.sr-p small{font-size:10px;font-weight:600;color:var(--ink-3);}
.sr-all{display:flex;align-items:center;gap:11px;margin:12px 16px 4px;padding:13px;
background:var(--wa);border-radius:14px;cursor:pointer;color:#fff;}
.sr-all .sr-i b{color:#fff;}
.sr-all .sr-i span{color:rgba(255,255,255,.8);}
.sr-all .do-a{color:rgba(255,255,255,.9);margin-left:auto;}
.sr-ask{display:flex;align-items:center;gap:11px;margin:14px 16px 24px;padding:13px;background:var(--wa-soft);border-radius:14px;cursor:pointer;}
/* ВЕЩИ ОТ ЛЮДЕЙ */
.thing{margin:0 16px 10px;border:1px solid var(--line);border-radius:16px;padding:13px;}
.th-top{display:flex;align-items:flex-start;gap:11px;cursor:pointer;}
.th-e{font-size:26px;line-height:1;flex:0 0 auto;}
.th-i{flex:1;min-width:0;}
.th-i b{font-size:14.5px;font-weight:700;display:block;line-height:1.3;}
.th-i span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:2px;}
.th-p{font-size:15px;font-weight:800;flex:0 0 auto;white-space:nowrap;}
.th-s{font-size:12.5px;color:var(--ink-2);line-height:1.5;font-style:italic;margin:9px 0 11px;}
.th-b{width:100%;background:var(--wa-soft);border:none;color:var(--wa-dark);border-radius:11px;height:42px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
/* БЫСТРО ОТ СЕЛЛЕРОВ */
.fastrow{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;}
.fastrow:active{background:var(--panel);}
.fr-e{font-size:22px;line-height:1;flex:0 0 auto;}
.fr-i{flex:1;min-width:0;}
.fr-i b{font-size:14px;font-weight:700;display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fr-i span{font-size:11.5px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fr-r{text-align:right;flex:0 0 auto;display:flex;align-items:center;gap:9px;}
.fr-r b{font-size:14.5px;font-weight:800;}
.fr-add{width:28px;height:28px;border-radius:50%;background:var(--wa);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;}
.fr-sub{font-size:10.5px;color:var(--ink-3);}
/* ПОДПИСКИ */
.sb-total{margin:14px 16px;padding:16px;background:var(--wa-soft);border-radius:16px;text-align:center;}
.sb-total span{font-size:12px;color:var(--wa-deep);font-weight:600;display:block;}
.sb-total b{font-size:30px;font-weight:800;color:var(--wa-dark);display:block;letter-spacing:-.02em;margin-top:3px;}
.sb-cap{font-size:11.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:12px 16px 6px;}
.sb-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);}
.sb-row.off{opacity:.55;}
.sb-e{font-size:22px;line-height:1;flex:0 0 auto;}
.sb-i{flex:1;min-width:0;}
.sb-i b{font-size:14.5px;font-weight:700;display:block;line-height:1.25;}
.sb-i span{font-size:12px;color:var(--ink-3);display:block;}
.sb-i small{font-size:11px;color:var(--wa-deep);display:block;margin-top:3px;font-weight:600;}
.sb-row.off small{color:var(--ink-3);}
.sb-x{background:none;border:1px solid var(--line);color:var(--ink-3);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.sb-on{background:var(--wa);border:none;color:#fff;border-radius:9px;padding:8px 13px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.sb-empty{margin:16px;padding:24px 18px;text-align:center;border:1.5px dashed var(--line);border-radius:16px;}
.sb-empty b{font-size:15px;font-weight:800;display:block;margin-bottom:6px;}
.sb-empty p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:0;}
.sb-note{font-size:12px;color:var(--ink-3);line-height:1.55;padding:16px 16px 26px;margin:0;}
.co-sub{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:9px;padding-top:9px;border-top:1px solid #C9EED8;}
.co-sub span{font-size:11.5px;color:var(--wa-deep);}
.co-sub button{background:none;border:1px solid #C9EED8;color:var(--wa-deep);border-radius:8px;padding:6px 11px;font-size:11.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
/* ЗАРАБОТОК СТРОКОЙ */
.earnline{display:flex;align-items:center;gap:12px;margin:10px 16px 0;padding:12px 14px;background:var(--wa-dark);border-radius:14px;cursor:pointer;}
.el-l{flex:0 0 auto;}
.el-l b{font-size:18px;font-weight:800;color:#fff;line-height:1;}
.el-l span{font-size:11px;color:rgba(255,255,255,.55);display:block;margin-top:2px;}
.el-bar{flex:1;height:6px;background:#F0A63C;border-radius:3px;overflow:hidden;min-width:40px;}
.el-bar div{height:100%;background:#C77DA8;border-radius:3px;}
.el-a{font-size:12px;color:rgba(255,255,255,.75);font-weight:700;flex:0 0 auto;}
/* БЛОК ДЕЙСТВИЙ */
.doblock{margin:14px 16px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.do-cap{font-size:11px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:11px 14px 8px;}
.do-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer;}
.do-row:active{background:var(--panel);}
.do-e{font-size:21px;line-height:1;flex:0 0 auto;}
.do-t{flex:1;min-width:0;}
.do-t b{font-size:14.5px;font-weight:700;display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.do-t span{font-size:12px;color:var(--ink-3);display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.do-a{font-size:19px;color:var(--ink-3);flex:0 0 auto;}
/* КУРСЫ: карточка входа */
.skcard{margin:12px 16px 0;padding:16px;border:1.5px dashed var(--wa);border-radius:18px;background:var(--wa-soft);cursor:pointer;}
.skcard b{font-size:16px;font-weight:800;color:var(--wa-dark);display:block;margin-bottom:6px;}
.skcard p{font-size:13px;color:var(--wa-deep);line-height:1.55;margin:0 0 14px;}
.sk-btn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:12px;height:46px;font-size:14.5px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;}
.skcard.done{display:flex;align-items:center;gap:12px;border-style:solid;background:#fff;}
.sk-i{flex:1;min-width:0;}
.sk-i b{margin-bottom:2px;color:var(--ink);}
.sk-i span{font-size:12px;color:var(--wa-deep);}
/* КОНСТРУКТОР КУРСА */
.mk-intro{padding:18px 16px 12px;}
.mk-intro b{font-size:20px;font-weight:800;display:block;margin-bottom:6px;line-height:1.3;}
.mk-intro p{font-size:13.5px;color:var(--ink-3);line-height:1.55;margin:0;}
.mk-in{width:calc(100% - 32px);margin:0 16px;border:1.5px solid var(--line);border-radius:14px;padding:14px;font-size:16px;font-family:'Inter',sans-serif;box-sizing:border-box;}
.mk-in:focus{outline:none;border-color:var(--wa);}
.mk-hints{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px 4px;}
.mk-h{background:var(--panel);border:none;border-radius:999px;padding:7px 13px;font-size:12.5px;color:var(--ink-2);font-family:'Inter',sans-serif;cursor:pointer;}
.mk-note{font-size:12.5px;color:var(--ink-3);line-height:1.55;padding:10px 16px 0;margin:0;}
.mk-go{width:calc(100% - 32px);margin:18px 16px 8px;background:var(--wa);border:none;color:#fff;border-radius:14px;height:52px;font-size:15px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;}
.mk-back{width:calc(100% - 32px);margin:0 16px 20px;background:none;border:none;color:var(--ink-3);font-size:13.5px;font-family:'Inter',sans-serif;cursor:pointer;padding:8px;}
.mk-prog{padding:16px 16px 10px;}
.mk-pbar{height:6px;background:var(--panel);border-radius:3px;overflow:hidden;margin-bottom:7px;}
.mk-pbar div{height:100%;background:var(--wa);border-radius:3px;transition:width .25s;}
.mk-prog span{font-size:12.5px;color:var(--ink-3);}
.mk-block{margin-bottom:6px;}
.mk-bh{font-size:11.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding:10px 16px 6px;}
.mk-s{display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid var(--line);}
.mk-sn{width:24px;height:24px;border-radius:50%;background:var(--wa-soft);color:var(--wa-deep);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.mk-si{flex:1;min-width:0;}
.mk-si b{font-size:14px;font-weight:700;display:block;line-height:1.25;}
.mk-si span{font-size:12px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mk-sx{background:none;border:none;color:var(--ink-3);font-size:18px;cursor:pointer;flex:0 0 auto;padding:0 4px;}
.mk-add{width:calc(100% - 32px);margin:14px 16px 0;background:#fff;border:1.5px dashed var(--line);color:var(--ink-2);border-radius:13px;height:46px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
.mk-price{text-align:center;padding:20px 16px 8px;}
.mk-price b{font-size:40px;font-weight:800;display:block;letter-spacing:-.02em;}
.mk-price span{font-size:13px;color:var(--ink-3);}
.mk-slider{width:calc(100% - 32px);margin:0 16px 16px;accent-color:var(--wa);}
.mk-calc{padding:0 16px;}
.mk-cr{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);}
.mk-cr span{font-size:13px;color:var(--ink-2);}
.mk-cr b{font-size:15px;font-weight:800;color:var(--wa-deep);}
/* ПРОСМОТР КУРСА */
.co-hero{margin:12px 16px;padding:18px 16px;border-radius:18px;}
.co-hero b{font-size:20px;font-weight:800;display:block;line-height:1.3;margin-bottom:6px;}
.co-hero span{font-size:13.5px;color:var(--ink-2);line-height:1.55;display:block;}
.co-price{display:flex;align-items:baseline;gap:9px;padding:0 16px 12px;}
.co-price b{font-size:26px;font-weight:800;}
.co-price span{font-size:12.5px;color:var(--ink-3);}
.co-buy{width:calc(100% - 32px);margin:0 16px 14px;background:var(--wa);border:none;color:#fff;border-radius:14px;height:52px;font-size:15px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;}
.co-active{margin:0 16px 14px;padding:12px;background:var(--wa-soft);color:var(--wa-dark);border-radius:12px;font-size:13.5px;font-weight:700;text-align:center;}
.co-mine{display:flex;gap:9px;padding:0 16px 14px;}
.co-mr{flex:1;background:var(--panel);border-radius:13px;padding:12px;text-align:center;}
.co-mr span{font-size:11px;color:var(--ink-3);display:block;}
.co-mr b{font-size:19px;font-weight:800;display:block;margin-top:2px;}
.co-block{margin-bottom:4px;}
.co-bh{font-size:11.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding:12px 16px 6px;}
.co-s{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);}
.co-s.open{cursor:pointer;}
.co-sn{width:26px;height:26px;border-radius:50%;background:var(--panel);color:var(--ink-3);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.co-s.open .co-sn{background:var(--wa-soft);color:var(--wa-deep);}
.co-si{flex:1;min-width:0;}
.co-si b{font-size:14.5px;font-weight:700;display:block;line-height:1.3;}
.co-si span{font-size:12.5px;color:var(--ink-3);line-height:1.4;display:block;margin-top:2px;}
.co-lock{opacity:.35;font-size:14px;flex:0 0 auto;}
.co-ok{color:var(--ink-3);font-size:18px;flex:0 0 auto;}
#coscrim{z-index:83;}
#checkout{z-index:84;}
.co-note{font-size:12.5px;color:var(--ink-3);text-align:center;padding:14px 16px 24px;margin:0;}
.co-chat{display:flex;align-items:center;gap:10px;margin:14px 16px 24px;padding:13px;background:var(--wa-soft);border-radius:14px;cursor:pointer;}
/* ЗАРАБОТОК В МОЙ ПУТЬ */
.earn{margin:12px 16px 0;padding:15px 14px;border-radius:18px;background:var(--wa-dark);cursor:pointer;}
.earn-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px;}
.earn-h span{font-size:12px;color:rgba(255,255,255,.6);font-weight:600;}
.earn-h b{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em;}
.earn-bar{height:7px;border-radius:4px;background:#F0A63C;overflow:hidden;margin-bottom:12px;}
.earn-in{height:100%;background:#C77DA8;border-radius:4px;}
.earn-two{display:flex;gap:12px;margin-bottom:11px;}
.earn-c{flex:1;display:flex;align-items:flex-start;gap:7px;}
.earn-c b{font-size:15px;font-weight:800;color:#fff;display:block;line-height:1.2;}
.earn-c span{font-size:10.5px;color:rgba(255,255,255,.55);display:block;margin-top:2px;line-height:1.35;}
.earn-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:5px;}
.earn-dot.in{background:#C77DA8;}
.earn-dot.out{background:#F0A63C;}
.earn-f{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);}
.earn-f span{font-size:11.5px;color:rgba(255,255,255,.5);}
.earn-arr{color:rgba(255,255,255,.8)!important;font-weight:700;}
/* КАБИНЕТ: источники */
.au-total{margin:14px 16px 12px;padding:16px;background:var(--wa-soft);border-radius:16px;text-align:center;}
.au-total span{font-size:12px;color:var(--wa-deep);font-weight:600;display:block;}
.au-total b{font-size:32px;font-weight:800;color:var(--wa-dark);display:block;letter-spacing:-.02em;margin:2px 0 4px;}
.au-total small{font-size:12px;color:var(--wa-deep);}
.au-src{display:flex;gap:9px;padding:0 16px 4px;}
.au-srcard{flex:1;border:1px solid var(--line);border-radius:14px;padding:12px;}
.au-sh{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink-3);margin-bottom:6px;}
.au-srcard > b{font-size:20px;font-weight:800;display:block;margin-bottom:8px;}
.au-sr{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--ink-3);padding:3px 0;line-height:1.35;}
.au-goods{padding:0 16px;}
.au-g{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);}
.au-ge{font-size:22px;line-height:1;flex:0 0 auto;}
.au-gi{flex:1;min-width:0;}
.au-gi b{font-size:13.5px;font-weight:700;display:block;line-height:1.25;}
.au-gi span{font-size:11.5px;color:var(--ink-3);}
.au-gs{font-size:14px;font-weight:800;color:var(--wa-deep);flex:0 0 auto;}
/* КАБИНЕТ АВТОРА */
.aucard{display:flex;align-items:center;gap:12px;margin:12px 16px 0;padding:14px;border-radius:16px;background:var(--wa-dark);cursor:pointer;}
.au-i{flex:1;min-width:0;}
.au-i b{font-size:15px;font-weight:800;color:#fff;display:block;line-height:1.25;}
.au-i span{font-size:12px;color:rgba(255,255,255,.65);display:block;margin-top:2px;}
.au-arr{color:rgba(255,255,255,.5);font-size:20px;flex:0 0 auto;}
.au-stats{display:flex;gap:9px;padding:14px 16px 10px;}
.au-st{flex:1;background:var(--panel);border-radius:14px;padding:13px 8px;text-align:center;}
.au-st b{font-size:19px;font-weight:800;display:block;}
.au-st span{font-size:10.5px;color:var(--ink-3);line-height:1.3;display:block;margin-top:2px;}
.au-money{background:var(--wa-soft);}
.au-money b{color:var(--wa-dark);}
.au-pay{margin:0 16px 6px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;}
.au-pay-r{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;}
.au-pay-r span{font-size:13px;color:var(--ink-2);}
.au-pay-r b{font-size:14px;font-weight:800;}
.au-pay-n{font-size:11.5px;color:var(--ink-3);margin-top:7px;padding-top:8px;border-top:1px solid var(--line);}
.au-cap{font-size:11.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:16px 16px 8px;}
.au-row{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);}
.au-dot{width:8px;height:8px;border-radius:50%;background:var(--wa);flex:0 0 auto;}
.au-dot.off{background:#C9CFD6;}
.au-ri{flex:1;min-width:0;}
.au-ri b{font-size:14px;font-weight:700;display:block;line-height:1.25;}
.au-ri span{font-size:12.5px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.au-rt{text-align:right;flex:0 0 auto;}
.au-rt span{font-size:11.5px;color:var(--ink-3);display:block;}
.au-rt small{font-size:10.5px;color:var(--wa-deep);font-weight:700;}
.au-ping{background:none;border:1px solid var(--line);color:var(--ink-2);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.au-hint{margin:16px;padding:14px;background:#FFF3E0;border-radius:14px;}
.au-hint b{font-size:14px;font-weight:800;color:#B8722A;display:block;margin-bottom:4px;}
.au-hint p{font-size:12.5px;color:#8A5A1A;line-height:1.5;margin:0;}
/* ЧАТ ЛИНИИ */
.al-chat{display:flex;align-items:center;gap:10px;margin-top:9px;padding:11px 12px;background:#fff;border-radius:13px;cursor:pointer;}
.al-ch-i{font-size:18px;flex:0 0 auto;}
.al-ch-t{flex:1;min-width:0;}
.al-ch-t b{font-size:13.5px;font-weight:800;display:block;line-height:1.2;}
.al-ch-t span{font-size:11.5px;color:var(--ink-3);}
.al-ch-arr{font-size:19px;color:var(--ink-3);flex:0 0 auto;}
#pg-linechat{padding-bottom:70px;}
.lcmsg{margin:10px 16px;padding:12px;border-radius:14px;background:var(--panel);}
.lcmsg-step{background:var(--wa-soft);}
.lcm-h{display:flex;align-items:baseline;gap:7px;margin-bottom:4px;}
.lcm-h b{font-size:13.5px;font-weight:800;}
.lcm-badge{font-size:10px;background:var(--wa);color:#fff;padding:2px 7px;border-radius:999px;font-weight:700;}
.lcm-ago{font-size:11px;color:var(--ink-3);margin-left:auto;}
.lcm-t{font-size:13.5px;line-height:1.5;color:var(--ink);margin:0;}
.lcm-good{display:flex;align-items:center;gap:9px;margin-top:9px;padding:9px;background:#fff;border-radius:11px;}
.lcm-ge{font-size:21px;flex:0 0 auto;line-height:1;}
.lcm-gi{flex:1;min-width:0;}
.lcm-gi b{font-size:12.5px;font-weight:700;display:block;line-height:1.2;}
.lcm-gi span{font-size:11px;color:var(--ink-3);}
.lcm-gb{background:var(--wa);border:none;color:#fff;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.lc-input{position:absolute;bottom:64px;left:0;right:0;display:flex;gap:8px;padding:10px 16px;background:#fff;border-top:1px solid var(--line);}
.lc-input input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:11px 15px;font-size:14px;font-family:'Inter',sans-serif;outline:none;}
.lc-input input:focus{border-color:var(--wa);}
.lc-input button{width:44px;height:44px;border-radius:50%;background:var(--wa);border:none;color:#fff;font-size:19px;cursor:pointer;flex:0 0 auto;}
/* СТРАНИЦА ПУТИ */
.of-pathcap{font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.05em;
text-transform:uppercase;padding:18px 16px 0;margin-top:6px;border-top:1px solid var(--line);}
.of-title{font-size:19px;font-weight:800;padding:14px 16px 6px;line-height:1.3;}
.of-prev{font-size:14px;color:var(--ink-2);line-height:1.6;font-style:italic;margin:0 16px 14px;}
.of-care{margin:0 16px 14px;padding:12px;background:#FFF3E0;border-radius:12px;font-size:12.5px;color:#B8722A;line-height:1.5;}
.of-stats{display:flex;gap:9px;padding:4px 16px 24px;}
.of-st{flex:1;background:var(--panel);border-radius:13px;padding:12px 8px;text-align:center;}
.of-st b{font-size:17px;font-weight:800;display:block;}
.of-st span{font-size:11px;color:var(--ink-3);}
.prsn-me{background:var(--wa-soft);}
.me-tag{font-size:10px;font-weight:700;color:var(--wa-deep);background:#fff;border-radius:999px;padding:2px 8px;margin-left:6px;white-space:nowrap;}
.lt-me{display:block;color:#B45309;font-weight:700;font-size:12.5px;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid rgba(240,166,60,.3);}
.ml-pub{width:100%;background:var(--wa);border:none;color:#fff;border-radius:14px;height:50px;font-size:15px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;margin:6px 0 4px;}
.mlev-gl{font-size:10.5px;color:var(--wa-deep);font-weight:700;text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:1px;}
/* ТОВАРЫ В СОБЫТИЯХ ЛИНИИ */
.mlev-g{display:flex;align-items:center;gap:10px;margin-top:9px;padding:10px;background:var(--wa-soft);border-radius:12px;}
.mlev-ge{font-size:24px;line-height:1;flex:0 0 auto;}
.mlev-gi{flex:1;min-width:0;}
.mlev-gi b{font-size:13.5px;font-weight:700;display:block;line-height:1.25;}
.mlev-gi span{font-size:11.5px;color:var(--wa-deep);}
.mlev-gb{background:var(--wa);border:none;color:#fff;border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
/* ВИДИМОСТЬ ЛИНИИ */
.mlsh{margin-bottom:20px;}
.mlsh-cur{display:flex;align-items:center;gap:11px;padding:13px;background:var(--panel);border-radius:14px;margin-bottom:9px;}
.mlsh-e{font-size:22px;line-height:1;flex:0 0 auto;}
.mlsh-i b{font-size:14px;font-weight:800;display:block;line-height:1.2;}
.mlsh-i span{font-size:12px;color:var(--ink-3);}
.mlsh-opts{display:flex;gap:7px;flex-wrap:wrap;}
.mlsh-o{flex:1;min-width:98px;background:#fff;border:1.5px solid var(--line);color:var(--ink-2);border-radius:11px;padding:9px 6px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.mlsh-o.on{background:var(--wa);border-color:var(--wa);color:#fff;}
/* ШТОРКА ПОДПИСКИ */
.sub-in{padding:8px 20px 22px;text-align:center;overflow-y:auto;min-height:0;}
.sub-av{width:64px;height:64px;border-radius:50%;overflow:hidden;margin:0 auto 12px;border:3px solid var(--wa);}
.sub-av svg{display:block;width:100%;height:100%;}
.sub-t{font-size:21px;font-weight:800;display:block;margin-bottom:7px;}
.sub-d{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 16px;}
.sub-feats{text-align:left;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.sub-feat{font-size:13.5px;color:var(--ink-2);}
.sub-price{background:var(--wa-soft);border-radius:14px;padding:13px;margin-bottom:14px;}
.sub-price b{font-size:17px;font-weight:800;color:var(--wa-dark);display:block;}
.sub-price span{font-size:12px;color:var(--wa-deep);display:block;margin-top:3px;}
.sub-go{width:100%;background:var(--wa);border:none;color:#fff;border-radius:14px;height:52px;font-size:15.5px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;margin-bottom:8px;}
.sub-no{width:100%;background:none;border:none;color:var(--ink-3);font-size:13.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;padding:8px;}
.wantlike-btn small{display:block;font-size:11px;font-weight:600;opacity:.75;margin-top:2px;}
.wantlike-btn{line-height:1.25;height:auto;padding:11px 0;}
/* АКТИВНАЯ ЛИНИЯ */
.alcard{margin:12px 16px 4px;padding:14px;border-radius:18px;background:var(--wa-soft);border:1.5px solid var(--wa);}
.al-top{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.al-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:2px solid #fff;}
.al-av svg{display:block;width:100%;height:100%;}
.al-i{flex:1;min-width:0;}
.al-i b{font-size:15px;font-weight:800;display:block;color:var(--wa-dark);line-height:1.2;}
.al-i span{font-size:12px;color:var(--wa-deep);}
.al-stop{background:none;border:1px solid #C9EED8;color:var(--wa-deep);border-radius:9px;padding:6px 12px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.al-bar{height:5px;background:#D6F0E0;border-radius:3px;overflow:hidden;margin-bottom:12px;}
.al-fill{height:100%;background:var(--wa);border-radius:3px;transition:width .3s;}
.al-next{display:flex;align-items:center;gap:10px;background:#fff;border-radius:13px;padding:11px 12px;}
.al-nt{flex:1;min-width:0;}
.al-nt span{font-size:11px;color:var(--ink-3);font-weight:600;display:block;}
.al-nt b{font-size:14px;font-weight:700;display:block;line-height:1.3;margin-top:1px;}
.al-done{background:var(--wa);border:none;color:#fff;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.al-fin{background:#fff;border-radius:13px;padding:13px;text-align:center;font-size:14px;font-weight:700;color:var(--wa-deep);}
.al-note{font-size:11px;color:var(--wa-deep);text-align:center;margin-top:9px;opacity:.75;}
/* ПУШ */
.push-toast{position:absolute;top:-140px;left:12px;right:12px;z-index:98;display:flex;align-items:center;gap:10px;background:rgba(28,30,32,.96);backdrop-filter:blur(12px);border-radius:16px;padding:12px;transition:top .35s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 8px 28px rgba(0,0,0,.3);}
.push-toast.on{top:12px;}
.pt-ce{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto;}
.pt-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 auto;}
.pt-av svg{display:block;width:100%;height:100%;}
.pt-i{flex:1;min-width:0;}
.pt-i b{color:#fff;font-size:12.5px;font-weight:800;display:block;line-height:1.2;}
.pt-i span{color:rgba(255,255,255,.7);font-size:12.5px;display:block;margin-top:2px;line-height:1.35;}
.pt-ok{background:var(--wa);border:none;color:#fff;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;flex:0 0 auto;}
.pt-x{background:none;border:none;color:rgba(255,255,255,.45);font-size:14px;cursor:pointer;padding:4px;flex:0 0 auto;}
/* ТАРИФЫ */
.plans-intro{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:14px 16px 4px;}
.plan{position:relative;margin:12px 16px;border:1.5px solid var(--line);border-radius:18px;padding:16px;}
.plan-best{border-color:var(--wa);background:var(--wa-soft);}
.plan-badge{position:absolute;top:-9px;left:16px;background:var(--wa);color:#fff;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px;}
.plan-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.plan-e{font-size:28px;line-height:1;flex:0 0 auto;}
.plan-hi b{font-size:17px;font-weight:800;display:block;line-height:1.2;}
.plan-hi span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px;}
.plan-price{display:flex;align-items:baseline;gap:6px;}
.plan-price b{font-size:26px;font-weight:800;}
.plan-price span{font-size:13px;color:var(--ink-3);}
.plan-year{font-size:12px;color:var(--ink-3);margin-bottom:12px;}
.plan-hot{background:#FFF3E0;color:#B8722A;border-radius:10px;padding:8px 11px;font-size:12.5px;font-weight:700;margin-bottom:12px;}
.plan-feats{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.plan-feat{font-size:13px;color:var(--ink-2);line-height:1.4;}
.plan-btn{width:100%;background:#fff;border:1.5px solid var(--line);color:var(--ink);border-radius:12px;height:44px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.plan-btn.on{background:var(--wa);border-color:var(--wa);color:#fff;}
.plans-note{margin:18px 16px 24px;padding:14px;background:var(--panel);border-radius:14px;}
.gift-card{position:relative;margin:20px 16px 8px;padding:18px;border-radius:18px;overflow:hidden;
background:linear-gradient(135deg,var(--wa-soft),#fff);border:1.5px solid var(--wa);
display:flex;align-items:flex-start;gap:13px;cursor:pointer;}
.gift-card:active{opacity:.9;}
.gift-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle,var(--wa) 0%,transparent 70%);opacity:.25;}
.gift-e{font-size:28px;flex:0 0 auto;z-index:1;}
.gift-i{flex:1;min-width:0;z-index:1;}
.gift-i b{display:block;font-size:16px;font-weight:800;color:var(--ink-1);font-family:'Inter',sans-serif;}
.gift-i>span{display:block;font-size:13px;font-weight:700;color:var(--wa-deep);margin:2px 0 6px;}
.gift-i p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.gift-arr{font-size:22px;color:var(--wa);flex:0 0 auto;z-index:1;}
.plans-foot{font-size:11.5px;color:var(--ink-3);text-align:center;margin:14px 16px 28px;line-height:1.5;}
.plans-note b{font-size:14px;font-weight:800;display:block;margin-bottom:5px;}
.plans-note p{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:0;}
/* НЕДВИЖИМОСТЬ */
.realty-head{display:flex;align-items:baseline;justify-content:space-between;padding:16px 16px 8px;}
.realty-head b{font-size:17px;font-weight:800;}
.realty-head span{font-size:12px;color:var(--wa-deep);font-weight:600;}
.rcard{margin:0 16px 12px;border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;transition:border-color .15s var(--мяг);}
.rcard:active{border-color:var(--wa);}
.rc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.rc-e{font-size:28px;flex:0 0 auto;line-height:1;}
.rc-i{flex:1;min-width:0;}
.rc-i b{font-size:14px;font-weight:800;display:block;}
.rc-i span{font-size:12px;color:var(--ink-3);}
.rc-price{font-size:16px;font-weight:800;flex:0 0 auto;color:var(--ink);}
.rc-story{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 10px;font-style:italic;}
.rc-foot{display:flex;gap:12px;font-size:11.5px;color:var(--ink-3);}
.rc-seller{margin-left:auto;font-weight:700;color:var(--ink-2);}
/* страница объекта */
.rl-story{margin:12px 16px;padding:14px;background:var(--wa-soft);border-radius:14px;font-size:14px;line-height:1.65;color:var(--ink-2);font-style:italic;border-left:3px solid var(--wa);}
.rl-stats{display:flex;gap:10px;padding:12px 16px;}
.rl-stat{flex:1;background:var(--panel);border-radius:12px;padding:12px;text-align:center;}
.rl-stat b{font-size:20px;font-weight:800;display:block;}
.rl-stat span{font-size:11px;color:var(--ink-3);}
.rl-facts{display:flex;flex-wrap:wrap;gap:7px;padding:4px 16px 12px;}
.rl-fact{font-size:12.5px;background:var(--panel);border-radius:999px;padding:5px 11px;color:var(--ink-2);font-weight:600;}
.rl-seller{display:flex;align-items:center;gap:11px;margin:0 16px 14px;padding:13px;border:1px solid var(--line);border-radius:14px;}
.rl-sav{width:42px;height:42px;border-radius:12px;background:var(--wa-soft);color:var(--wa-deep);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex:0 0 auto;}
.rl-si b{font-size:14px;display:block;}
.rl-si span{font-size:12px;color:var(--ink-3);}
.rl-price-bar{display:flex;align-items:center;justify-content:space-between;margin:0 16px 10px;padding:14px;background:#fff;border:1.5px solid var(--line);border-radius:14px;}
.rl-price{font-size:20px;font-weight:800;display:block;}
.rl-hint{font-size:11.5px;color:var(--wa-deep);font-weight:600;}
.rl-call{background:var(--wa);border:none;color:#fff;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.rl-views{text-align:center;font-size:12px;color:var(--ink-3);padding:0 16px 20px;}
.verify-block{margin:20px 16px 8px;padding:16px;background:var(--panel);border-radius:16px;border:1px solid var(--line);}
.verify-text{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:0 0 12px;}
.verify-btns{display:flex;flex-direction:column;gap:8px;}
.verify-btn-main{width:100%;background:var(--wa);border:none;color:#fff;border-radius:11px;height:42px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.verify-btn-del{width:100%;background:none;border:1px solid var(--line);color:var(--ink-3);border-radius:11px;height:38px;font-size:12.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
.paths-head b{font-size:22px;font-weight:800;display:block;line-height:1.2;}
.paths-head span{font-size:13px;color:var(--ink-2);display:block;margin-top:4px;}
/* ===== ЗАБРАТЬ СВОЮ СТРАНИЦУ (верификация) ===== */
.clm{padding:18px 16px 40px;overflow-y:auto;}
.clm-step{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wa);margin-bottom:8px;}
.clm-h{font-family:'Inter',sans-serif;font-size:24px;font-weight:800;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em;}
.clm-p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 18px;}
.clm-card{background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:16px;padding:15px;margin-bottom:14px;}
.clm-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(199,125,168,.18);font-size:13.5px;}
.clm-row:last-child{border-bottom:none;}
.clm-row span{color:var(--ink-2);flex:0 0 auto;}
.clm-row b{font-weight:700;text-align:right;}
.clm-ev{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border:1px solid var(--line);
border-radius:12px;margin-bottom:8px;background:#fff;cursor:pointer;}
.clm-ev.off{opacity:.42;}
.clm-box{width:21px;height:21px;border-radius:6px;border:2px solid var(--wa);flex:0 0 auto;margin-top:1px;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;}
.clm-ev.on .clm-box{background:var(--wa);}
.clm-ev.off .clm-box{border-color:var(--ink-3);}
.clm-ev-t{font-size:13.5px;line-height:1.45;}
.clm-ev-d{font-size:11.5px;color:var(--ink-3);margin-top:3px;}
.clm-note{font-size:12.5px;line-height:1.55;color:var(--ink-3);background:var(--panel);
border-radius:12px;padding:12px 13px;margin:14px 0;}
.clm-in{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 13px;font-size:14px;
font-family:'Inter',sans-serif;margin-bottom:10px;background:#fff;}
.clm-in:focus{outline:none;border-color:var(--wa);}
.clm-btn{width:100%;background:var(--wa);border:none;color:#fff;border-radius:12px;height:48px;
font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;margin-top:6px;}
.clm-btn:active{opacity:.85;}
.clm-btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-2);height:42px;font-size:13px;font-weight:600;}
.clm-ok{text-align:center;padding:30px 0 10px;}
.clm-ok-i{font-size:46px;line-height:1;margin-bottom:14px;}
.vbadge{display:inline-flex;align-items:center;gap:4px;background:var(--wa-soft);color:var(--wa-deep);
font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;margin-left:7px;vertical-align:middle;}
.paths-tabs{display:flex;gap:7px;overflow-x:auto;padding:4px 16px 12px;}
.paths-tabs::-webkit-scrollbar{display:none;}
/* ===== РЯДЫ ПЕРСОН (как в кинопоиске) ===== */
.rail-h{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 11px;gap:12px;}
.rail-nav{display:flex;gap:6px;flex:0 0 auto;}
.rail-arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;
color:var(--wa-deep);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
cursor:pointer;padding:0;font-weight:700;}
.rail-arrow:active{background:var(--wa-soft);}
/* Заголовки разделов — тот же Montserrat, что и в шапке меню. Стенгазета
убрана отсюда 16 августа вместе с заголовком в фиолетовой шапке. */
.rail-h b{font-family:'Inter',sans-serif;font-size:20px;font-weight:800;
letter-spacing:-.01em;}
.rail-h small{font-size:12px;color:var(--ink-3);display:block;margin-top:3px;font-weight:400;}
/* То же правило, что и для ленты слайдов: ряды ездят только вбок.
Их на экранах много — люди по теме, дни рождения, «в твой день», —
и на каждом косой смах уводил бы страницу вместо ряда. */
.rail{display:flex;gap:11px;overflow-x:auto;padding:0 16px 6px;scrollbar-width:none;
touch-action:pan-x pan-y;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;scroll-behavior:smooth;cursor:grab;}
.rail.drag{cursor:grabbing;scroll-behavior:auto;}
.rail::-webkit-scrollbar{display:none;}
.pcard{flex:0 0 auto;width:118px;cursor:pointer;}
.pcard-i{width:118px;height:158px;border-radius:13px;overflow:hidden;background:var(--panel);
border:1px solid var(--line);position:relative;display:flex;align-items:center;justify-content:center;}
.pcard-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pcard-i svg{width:78px;height:78px;}
.mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.mono span{font-family:'Inter',sans-serif;font-size:40px;font-weight:800;letter-spacing:.01em;opacity:.62;}
.pcard-n{font-size:13px;font-weight:700;line-height:1.28;margin-top:8px;}
.pcard-s{font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:3px;}
.pcard-d{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(52,28,48,.88),rgba(52,28,48,0));
color:#fff;font-size:10.5px;font-weight:700;padding:16px 8px 6px;font-family:'Inter',sans-serif;letter-spacing:.02em;}
.pcard-v{position:absolute;top:6px;right:6px;background:var(--wa);color:#fff;width:19px;height:19px;
border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800;}
.pbav{position:relative;overflow:hidden;}
.pbav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.pbav-ph{position:absolute;bottom:-1px;right:-1px;width:19px;height:19px;border-radius:50%;
background:var(--wa);border:2px solid #fff;color:#fff;font-size:9px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;z-index:2;}
.paths-tabs button{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.paths-tabs button.on{background:var(--wa);border-color:var(--wa);color:#fff;}
.pathcard{margin:0 16px 12px;border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;transition:border-color .15s var(--мяг);}
.pathcard:active{border-color:var(--wa);}
.pc-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pc-av{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex:0 0 auto;}
.pc-i{flex:1;min-width:0;}
.pc-i b{font-size:15px;font-weight:800;display:block;line-height:1.25;}
.pc-i span{font-size:12px;color:var(--ink-3);}
.pc-r{flex:0 0 auto;text-align:right;}
.pc-star{display:block;font-size:13px;font-weight:700;color:#F0A63C;}
.pc-rev{display:block;font-size:11px;color:var(--ink-3);}
.pc-prev{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.5;font-style:italic;}
.pc-foot{display:flex;align-items:center;justify-content:space-between;}
.pc-price{font-size:17px;font-weight:800;}
.pc-buy{background:var(--wa);border:none;color:#fff;border-radius:11px;padding:10px 20px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.paths-empty{padding:20px 16px;color:var(--ink-3);font-size:13px;}
.dhead{padding:18px 16px 14px;}
.dhead b{font-size:19px;font-weight:800;letter-spacing:-.02em;display:block;margin-bottom:5px;}
.dhead span{font-size:13.5px;color:var(--ink-2);line-height:1.55;display:block;}
.dhead .from{margin-top:10px;background:var(--wa-soft);color:#0F5132;border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fshare{background:var(--wa);border:none;color:#fff;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:700;flex:0 0 auto;font-family:'Inter',sans-serif;}
.authshare{margin-top:16px;background:var(--wa-soft);border-radius:14px;padding:14px;text-align:left;}
.authshare .asi b{font-size:14px;display:block;margin-bottom:4px;color:#0F5132;}
.authshare .asi span{font-size:12.5px;color:var(--ink-2);line-height:1.5;display:block;margin-bottom:11px;}
.asb{width:100%;background:#fff;border:1.5px solid var(--wa);color:var(--wa-deep);border-radius:11px;height:44px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;}
.pushbox{margin:0 16px 6px;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.prow2{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);gap:12px;}
.prow2 b{font-size:14px;display:block;font-weight:600;}
.prow2 span{font-size:11.5px;color:var(--ink-3);}
.dempty{text-align:center;padding:36px 24px 20px;}
.dempty .de-ic{font-size:34px;margin-bottom:10px;}
.dempty b{font-size:16px;display:block;margin-bottom:5px;}
.dempty p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5;}
/* custom form */
.cform{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:80;display:none;align-items:center;justify-content:center;padding:24px;}
.cform.on{display:flex;}
.cbox{background:#fff;border-radius:20px;padding:22px;width:100%;max-width:330px;}
.cbox b{font-size:18px;font-weight:800;display:block;margin-bottom:16px;}
.cbox label{font-size:12.5px;color:var(--ink-2);display:block;margin-bottom:6px;font-weight:600;}
.cbox input{width:100%;background:var(--panel);border:1.5px solid transparent;border-radius:11px;padding:12px 13px;font-size:15px;font-family:'Inter',sans-serif;outline:none;margin-bottom:14px;}
.cbox input:focus{border-color:var(--wa);background:#fff;}
.cfoodrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.cfoodrow span{font-size:14px;font-weight:600;}
.cbtns{display:flex;gap:9px;}
.cb1{flex:1;background:var(--panel);border:none;border-radius:11px;height:46px;font-size:14px;font-weight:700;color:var(--ink-2);}
.cb2{flex:1.3;background:var(--wa);border:none;border-radius:11px;height:46px;font-size:14px;font-weight:700;color:#fff;}
/* transfer dialog */
.transfer{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;z-index:81;transform:translateY(102%);transition:transform .28s cubic-bezier(.32,.72,0,1);max-height:84%;display:flex;flex-direction:column;}
.transfer.on{transform:none;}
.tfh{padding:6px 18px 14px;}
.tfh b{font-size:18px;font-weight:800;display:block;letter-spacing:-.02em;}
.tfh span{font-size:13px;color:var(--ink-3);}
.tfrec{display:flex;gap:11px;align-items:flex-start;margin:0 16px 12px;background:var(--wa-soft);border-radius:13px;padding:12px 14px;}
.tfrec .ti2{color:var(--wa-deep);font-size:16px;flex:0 0 auto;}
.tfrec b{font-size:13.5px;display:block;margin-bottom:2px;color:var(--wa-deep);}
.tfrec span{font-size:12.5px;color:var(--ink-2);line-height:1.5;display:block;}
.tflist{flex:1;overflow-y:auto;padding:0 16px;}
.tflist::-webkit-scrollbar{display:none;}
.tfa{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.tfa .tft{flex:0 0 46px;font-size:12.5px;font-weight:800;color:var(--ink-2);}
.tfa .tfx{flex:1;font-size:13.5px;line-height:1.45;}
.tfbtns{display:flex;gap:9px;padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.tb1{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:12px;height:48px;font-size:13.5px;font-weight:700;color:var(--ink);}
.tb2{flex:1.4;background:var(--wa);border:none;border-radius:12px;height:48px;font-size:13.5px;font-weight:700;color:#fff;}
/* constructor */
.warn{margin:0 16px 12px;background:#FDECEC;border-left:3px solid #E85D5D;border-radius:0 10px 10px 0;padding:11px 13px;font-size:13px;color:#8C2F2F;line-height:1.5;}
.hour-row{position:relative;}
.hour-row .rm{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:6px;background:transparent;border:none;color:#C9CFD6;font-size:16px;line-height:1;padding:0 0 2px 0;}
.hour-row .rm:active{background:var(--panel);}
.hour-row .chk{margin-right:20px;}
.addrow{display:flex;align-items:center;gap:12px;padding:16px;border-top:1px dashed var(--line);cursor:pointer;}
.addrow .ap{width:38px;height:38px;border-radius:12px;background:var(--wa-soft);color:var(--wa-deep);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:300;flex:0 0 auto;line-height:1;padding-bottom:3px;}
.addrow b{font-size:15px;display:block;}
.addrow span{font-size:12.5px;color:var(--ink-3);}
/* sheet: action picker */
.own{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--wa-soft);}
.own .oi{width:38px;height:38px;border-radius:12px;background:#fff;color:var(--wa);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:300;flex:0 0 auto;line-height:1;padding-bottom:3px;}
.own b{font-size:15px;display:block;}
.own span{font-size:12.5px;color:var(--ink-2);}
.pgrp{border-bottom:1px solid var(--line);}
.pgh{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;}
.pgh .took{background:var(--wa);color:#fff;font-size:11px;font-weight:800;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pgh .chev{color:var(--ink-3);font-size:13px;flex:0 0 auto;}
.pact{display:flex;align-items:center;gap:11px;padding:10px 16px 10px 60px;background:var(--panel);border-top:1px solid var(--line);}
.pact .ph3{flex:0 0 44px;font-size:12.5px;font-weight:800;color:var(--ink-2);}
.pact .pa{flex:1;font-size:13.5px;line-height:1.4;}
.pact .sq{width:34px;height:34px;border-radius:10px;font-size:20px;}
/* market full */
.mcard2{border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;text-align:left;}
.mcard2 .top2{display:flex;align-items:center;gap:11px;padding:13px 14px;}
.mcard2 .av2{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:0 0 auto;}
.mcard2 .in2{flex:1;min-width:0;}
.mcard2 .in2 b{font-size:14.5px;display:block;line-height:1.3;}
.mcard2 .in2 span{font-size:12px;color:var(--ink-3);}
.mcard2 .stars{font-size:12px;color:var(--amber);font-weight:700;white-space:nowrap;}
.mcard2 .stats{display:flex;gap:14px;padding:0 14px 11px;font-size:11.5px;color:var(--ink-3);}
.mcard2 .stats b{color:var(--ink-2);font-weight:700;}
.mcard2 .prev{background:var(--panel);padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.mcard2 .prev .free{color:var(--wa-deep);font-weight:800;font-size:11px;display:block;margin-bottom:3px;}
.mcard2 .buy2{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line);}
.mcard2 .b1{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px;font-size:13px;font-weight:700;color:var(--ink);}
.mcard2 .b2{flex:1.3;background:var(--wa);border:none;border-radius:10px;padding:11px;font-size:13px;font-weight:700;color:#fff;}
.guard{display:flex;gap:10px;align-items:flex-start;background:var(--wa-soft);border-radius:12px;padding:12px 14px;margin-bottom:12px;text-align:left;}
.guard .gi{font-size:17px;flex:0 0 auto;}
.guard b{font-size:13px;display:block;margin-bottom:2px;}
.guard span{font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.rules{text-align:left;background:var(--panel);border-radius:12px;padding:14px;margin-top:12px;}
.rules b{font-size:12.5px;display:block;margin-bottom:8px;}
.rules li{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-bottom:4px;}
.rules ul{margin:0;padding-left:18px;}
.disc{font-size:11.5px;color:var(--ink-3);line-height:1.5;text-align:left;margin-top:14px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;}
/* ===== ШРИФТЫ ДЛЯ ЗАГОЛОВКОВ КАРУСЕЛИ ===== */
/* Stengazeta лежит рядом: в нём есть якутские ҕ ҥ ө һ ү. */
/* 20 августа, вечер. Был сырой ttf на 114 КБ. Тот же шрифт в woff2 —
24 КБ: минус 78%. Очертания те же, меняется только упаковка. Noto Sans
я сжал сразу, а эти три оставил как лежали — недосмотр ценой в 250 КБ
на каждом первом заходе. */
@font-face{
font-family:'Stengazeta';
src:url('../fonts/Stengazeta.woff2') format('woff2');
font-weight:400 900;
font-display:swap;
}
/* ТРИ ШРИФТА С ПОЛНОЙ ЯКУТСКОЙ АЗБУКОЙ. 15 сентября, слово хозяина:
«добавь похожие». Брат прислал тринадцать файлов — почти все либо
помечены DEMO, либо платные, либо чужие (Arial Black принадлежит
Microsoft). Вшивать такое в платный продукт нельзя, и я их не брал.
Единственный свободный из того списка, LexendDeca, оказался без
кириллицы вовсе.
Эти три взяты с Google Fonts, лицензия SIL Open Font License 1.1 —
разрешает коммерческое использование. У всех трёх проверены по таблице
глифов ВСЕ шесть якутских: ҕ ҥ ө һ ү и прописные. До сегодня таких в
приложении было два — Stengazeta и Noto Sans.
Файлы обрезаны до латиницы с кириллицей и сжаты в woff2: 16, 15 и
19 КБ вместо сотен.
Golos Text — Copyright 2023 The Golos Text Project Authors.
Oswald — Copyright 2016 The Oswald Project Authors.
Forum — Copyright 2011 Denis Masharov, with Reserved Font Name «Forum».
(Заменил Rubik Mono One 15 сентября, слово хозяина: «убери Rubik Mono
One и добавь Forum, это мой любимый шрифт был».)
Все три под SIL OFL 1.1: https://scripts.sil.org/OFL */
@font-face{
font-family:'Golos Text';
src:url('../fonts/GolosText.woff2') format('woff2');
font-weight:400 900;
font-display:swap;
}
@font-face{
font-family:'Oswald';
src:url('../fonts/Oswald.woff2') format('woff2');
font-weight:400 900;
font-display:swap;
}
@font-face{
font-family:'Forum';
src:url('../fonts/Forum.woff2') format('woff2');
font-weight:400 900;
font-display:swap;
}
/* выбор шрифта под лентой слайдов */
.car-font{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 10px}
.car-font-l{font-size:11.5px;color:#9c8f98;margin-right:2px}
.car-f{padding:6px 12px;border-radius:8px;border:1px solid #e6dbe3;background:#fff;
color:#5b4a56;font-size:13px;cursor:pointer;line-height:1.2}
.car-f.on{background:#f6ecf3;border-color:#c894b0;color:#8d5b76;font-weight:600}
/* 9 октября, слово хозяина: цифры 4:5 / 9:16 / 16:9 в светлой теме шли тёмно-красным жирным — «должны быть розовые». */
.car-f i{font-style:normal;color:var(--wa);margin-left:5px;font-weight:600}
/* РЯД ШРИФТОВ НЕ МЕНЯЕТ ВЫСОТУ. 5 сентября.
Выбранная кнопка становилась жирной, а жирная надпись шире — семь
кнопок стоят ровно на переломе строки, и ряд прыгал с двух строк
на три и обратно при каждом выборе шрифта. Здесь все кнопки жирные
всегда, выбор виден заливкой и рамкой; ширина от нажатия не зависит. */
/* 5 сентября, вторая правка того же ряда. Вчера я сделал все кнопки
жирными — высота перестала прыгать, но ряд стал шире и разъехался
на три строки. У Bolyar, Stengazeta и PT Serif жирного начертания
в файле нет, и Safari рисует его синтетически, растягивая буквы.
Ширина важнее: делаем ВСЕ кнопки обычными, включая выбранную.
Высота от этого так же постоянна — она и была нужна, — а выбор
по-прежнему виден заливкой и рамкой. */
.car-font-f .car-f, .car-font-f .car-f.on{font-weight:400}
/* Пометка «!» держит своё место постоянно: она появляется, когда
дочитываются файлы шрифтов, и без этого ряд дёргался бы второй раз. */
.car-font-f .car-f i.off{visibility:hidden}
/* РЯДЫ НАСТРОЕК — ОДНОЙ СТРОКОЙ. 16 сентября, слово хозяина: «не нравится
пустота между Көстүүтэ, Шрифт, Тыл, Көрүҥ».
Пустота шла от подписи слева: она съедала ширину, последняя кнопка не
влезала и одна уезжала на новую строку. Подпись теперь мелко НАД рядом,
кнопки берут всю ширину и не переносятся. Не влезли на узком телефоне —
ряд листается пальцем вбок, а не ломается на две строки.
Красные «!» в ряду шрифтов скрыты: они остались в окне «өссө…». */
.car-font{position:relative;flex-wrap:nowrap;gap:4px;margin:0 0 10px;padding-top:17px;
overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-font::-webkit-scrollbar{display:none}
/* Подпись над рядом стоит на месте, когда ряд листают вбок: она — первый
элемент ряда нулевой ширины, прилипший к левому краю и поднятый над
кнопками. Иначе «Көстүүтэ» уезжала бы за край вместе с кнопками. */
.car-font-l{position:sticky;left:2px;z-index:2;flex:0 0 0;width:0;margin:0 -4px 0 0;
align-self:flex-start;transform:translateY(-17px);
font-size:11px;line-height:14px;white-space:nowrap;overflow:visible}
/* Выбранная кнопка не жирнеет: жирное шире, и «Жемчужный · Фотокарточка ·
Инста · Ещё…» переставало влезать. Выбор виден заливкой и рамкой —
как в ряду шрифтов с 5 сентября. */
.car-font .car-f{flex:0 0 auto;white-space:nowrap;padding:6px 8px;font-size:12.5px}
.car-font .car-f.on{font-weight:500}
.car-font-f .car-f i{display:none}
/* ЛИСТАЕМЫЕ РЯДЫ (Көстүүтэ, Шрифт, Тыл) — 16 сентября: все варианты в
одной строке, «Ещё…» убрана. Правый край ряда мягко гаснет — видно, что
дальше есть ещё. Хвостовой отступ (::after) даёт последней кнопке выйти
из тени, когда ряд докручен до конца: padding справа у листаемого
flex-ряда браузеры в прокрутку не считают. У ряда языка после перевода
справа прибита «↩» со своей подложкой — ему тень не нужна. */
.car-font-s:not(:has(.car-f-end)){
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.car-font-s::after{content:'';flex:0 0 22px}
/* «Ещё…» (и «↩» у языка) прибиты к правому краю ряда. Ряд уже не влезает
на телефоне — он листается, а эта кнопка видна всегда. Слева у неё
мягкий переход в цвет фона: видно, что под ней есть ещё кнопки. Пока
ряд влезает, группа стоит сразу за кнопками, как обычно. */
.car-f-end{position:sticky;right:0;z-index:1;display:flex;gap:4px;flex:0 0 auto;
padding-left:14px;margin-left:-10px;
background:linear-gradient(90deg, transparent, var(--bg) 12px)}
/* Одна кнопка на двоих: «Публикация / Сторис».
Строго в одну строку — flex-basis:0 и nowrap, иначе старое правило
.makecar button{width:100%} на узких экранах ломает их в столбик. */
/* Видимость блока задаётся инлайновым стилем из JS (updateMakeBtn), и там
обязан быть flex, а не block: инлайн сильнее этого правила и роняет
половины в столбик. Направление и запрет переноса дублируем !important. */
.makecar{display:flex;flex-direction:row !important;flex-wrap:nowrap !important;align-items:stretch;
margin:0 2px 8px;border-radius:12px;overflow:hidden;background:var(--wa);
box-shadow:0 3px 12px rgba(199,125,168,.28)}
.makecar button{flex:1 1 0;min-width:0;width:auto;border:none;border-radius:0;
box-shadow:none;margin:0;background:transparent;color:#fff;height:44px;
font-size:14px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
/* Кнопок стало три («Карточка» добавлена 18 августа), и на узком телефоне
слова упирались друг в друга. Шрифт мельче ровно там, где тесно. */
@media (max-width:400px){
.makecar button{font-size:12.5px;letter-spacing:0;}
.makecar-sep{padding:0 1px;}
}
.makecar button:active{background:rgba(255,255,255,.16)}
.makecar-sep{flex:0 0 auto;display:flex;align-items:center;color:rgba(255,255,255,.55);
font-size:15px;font-weight:600;font-family:'Inter',sans-serif;user-select:none;padding:0 2px}
/* Лента предпросмотра: у истории тот же вид, что у публикации, только кадр 9:16.
Класс НЕ .story — он занят маркетплейсом (ширина 200px и тёмный фон). */
/* Ширину задаёт ячейка, а слайд и кнопка тянутся под неё. Раньше у .car-edit
было жёстко width:152px под кадр 4:5, и на вертикальном слайде кнопка торчала. */
.car-cell{width:152px}
.car-cell .car-slide,
.car-cell .car-edit{width:100%;box-sizing:border-box}
.car-track.car-9x16 .car-cell{width:107px}
.car-track.car-9x16 .car-edit{font-size:11px;padding:6px 4px}
.car-f .car-r{font-style:normal;opacity:.55;font-size:10.5px;margin-left:6px;color:inherit;font-weight:600}
/* «Изменить» в просмотрщике — главное действие, отдельной строкой под фото:
люди тыкают в само фото, ища правку, и должны сразу видеть кнопку. */
.car-view-edit{display:flex;justify-content:center;margin-top:16px}
.car-view-edit button{border:none;background:#fff;color:#4E3049;border-radius:11px;
padding:11px 22px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;
cursor:pointer;width:auto;height:auto;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.car-view-edit button:active{opacity:.85}
/* Появилась строка «Изменить», и на невысоких экранах кнопки скачивания вылезали.
Фото делаем гибким: занимает остаток места и ужимается само, не обрезаясь. */
.car-view img{max-height:none;min-height:0;flex:1 1 auto;object-fit:contain;width:auto}
/* 19 августа. Видео сюда попало заодно с фотографией — и получило
object-fit:contain, который перебивал заданный выше cover. Оттого ролик
вписывался в рамку с чёрными полями сверху и снизу, хотя превью того же
слайда заполняло кадр целиком: превью рисуется на холсте и подгоняется,
а видео показывал браузер.
Правило про «не обрезаться» писалось про снимок и для него верно:
у фотографии важен весь кадр. У ролика кадр уже нужного отношения,
и заполнять рамку — как раз то, что нужно. */
#car-view-vid{max-height:none;min-height:0;flex:1 1 auto;object-fit:cover;width:100%}
.car-view-bar,
.car-view-edit,
.car-view-dl{flex:0 0 auto}
/* перенос разговора файлом */
.cl-load{width:100%;margin-top:8px;border:1px solid var(--line);background:#fff;color:var(--ink-2);
border-radius:12px;padding:11px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer}
.cl-load:active{background:var(--wa-soft);color:var(--wa-deep)}
/* подсветка, когда файл тащат в окно чата */
.drop-hint{position:absolute;inset:0;z-index:130;display:none;align-items:center;justify-content:center;
background:rgba(176,111,149,.14);border:2px dashed var(--wa);border-radius:16px;pointer-events:none}
.drop-hint.on{display:flex}
.drop-hint span{background:#fff;color:var(--wa-deep);padding:10px 18px;border-radius:12px;
font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.16)}
/* документ в пузыре чата — плашкой, а не текстом */
.cmsg-file{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);margin-bottom:2px}
.cmsg.ai .cmsg-file{background:var(--wa-soft);border-color:#EBDCE6}
.cmsg-file .cf-ico{font-size:20px;line-height:1}
.cmsg-file .cf-t{display:flex;flex-direction:column;min-width:0}
.cmsg-file .cf-t b{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmsg-file .cf-t i{font-style:normal;font-size:11.5px;opacity:.72;margin-top:1px}
/* Подпись про кадр-образец в окне «Кого рисуем». Отдельной плашкой сверху:
это не настройка, а сообщение о том, что приложение уже поняло само. */
/* Крестик в шапке окна. Держим в правом верхнем углу — там его ищут,
и там он не путается с кнопками действия внизу. */
.fb-h{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cfa-x{border:none;background:var(--panel);color:var(--ink-3);width:30px;height:30px;
border-radius:50%;font-size:15px;line-height:1;cursor:pointer;flex:0 0 auto;}
.cfa-x:active{background:var(--line);color:var(--ink);}
/* Отмена — третьей кнопкой, без заливки и без рамки: она не должна
соперничать взглядом с «Рисовать». */
.fb-send.plain{background:none;border:none;color:var(--ink-3);font-weight:600;height:42px;}
.fb-send.plain:active{color:var(--ink);}
.cfa-ref{background:var(--wa-soft);border-radius:12px;padding:11px 13px;
font-size:12px;line-height:1.45;color:var(--wa-deep);margin:0 0 12px;}
/* «АЙЫЫ ищет в интернете…» — вместо трёх точек, когда идёт поиск.
Кружок крутится, а не пульсирует: пульсация читается как «сейчас будет»,
вращение — как «идёт работа», и на двадцати секундах это разница между
терпением и вторым нажатием. */
.cmsg-web{display:flex;align-items:center;gap:9px;}
.cw-ring{flex:0 0 auto;width:15px;height:15px;border-radius:50%;
border:2px solid var(--wa-soft);border-top-color:var(--wa);
animation:cwspin .8s linear infinite;}
@keyframes cwspin{to{transform:rotate(360deg)}}
.cw-t{font-size:13.5px;color:var(--ink-2);}
/* Плашка «похоже, это про тебя» — под ответом, в том же виде, что
и «записано в линию». Одинаковые вещи должны выглядеть одинаково:
человек уже знает, что такие плашки в разговоре что-то предлагают. */
.bio-offer button{margin-top:9px;}
/* Лицо со страницы источника — над строкой «ляжет в линию». Небольшое:
это подтверждение, что нашли того человека, а не украшение. */
.bio-face{display:flex;align-items:center;gap:11px;margin:0 0 12px;}
.bio-face img{width:64px;height:64px;border-radius:14px;object-fit:cover;
background:var(--wa-soft);flex:0 0 auto;}
.bio-face span{font-size:11.5px;color:var(--ink-3);line-height:1.4;}
/* СБОРКА БИОГРАФИИ. Вехи появляются по одной — человек успевает прочесть
каждую и заметить чужую. Список прокручивается, окно не растёт. */
.bio-who{margin:12px 0 10px;}
.bio-who label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px;}
.bio-who input{width:100%;}
/* Чья линия — крупно и до нажатия: телефон бывает один на семью. */
.bio-line{background:var(--wa-soft);border-radius:11px;padding:11px 13px;
font-size:12.5px;color:var(--ink-2);margin-bottom:14px;}
.bio-line b{color:var(--wa-deep);}
.bio-line span{display:block;margin-top:4px;font-size:11.5px;color:var(--wa-deep);
font-weight:700;cursor:pointer;}
.bio-run{max-height:46vh;overflow-y:auto;margin:4px 0 12px;}
.bio-step{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);
padding:9px 0;}
.bio-step.done{color:var(--wa-deep);font-weight:700;}
.bio-step.bad{color:#B4404A;line-height:1.5;}
/* Веха въезжает снизу — видно, что она только что добавилась. */
.bio-in{animation:bioIn .28s var(--в) both;}
@keyframes bioIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* «ЭТО ПРО МЕНЯ» — перенос найденной справки в свою линию.
Кнопка внизу карточки человека, под ссылкой на Википедию: сперва человек
читает, что нашлось, и только потом решает, его ли это. */
.pv-mine{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.pv-mine-b{width:100%;border:none;background:var(--wa);color:#fff;border-radius:12px;
height:46px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.pv-mine-b:active{opacity:.9;}
.pv-mine-n{display:block;margin-top:9px;font-size:11.5px;color:var(--ink-3);line-height:1.45;}
/* Список того, что переносим: галочка на строку. Уже имеющееся в линии
показано, но заблокировано — так видно, почему его нельзя взять. */
/* СТРОКА ВЫБОРА — СЕТКОЙ, А НЕ ГИБКИМ РЯДОМ.
17 августа. В окне сборки биографии строки разъехались: галочки слева
столбиком, текст прижат к правому краю и переносится по одному слову.
Гибкий ряд слишком отзывчив на чужие правила — где-то выше по дереву
на него влияло выравнивание, и колонка с текстом схлопывалась.
Сетка с явными колонками так не ломается: двадцать точек под галочку,
остальное тексту, и никакие внешние правила этого не сдвинут.
Общее правило на будущее: там, где ширина колонок важна, ставим сетку.
Гибкий ряд — для того, что и должно подстраиваться. */
.pvm-row{display:grid;grid-template-columns:20px 1fr;align-items:start;
gap:11px;padding:10px 0;
border-top:1px solid var(--line);cursor:pointer;text-align:left;}
.pvm-row.off{opacity:.5;cursor:default;}
.pvm-row input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--wa);}
.pvm-row span{min-width:0;}
.pvm-row b{display:block;font-size:13.5px;font-weight:600;line-height:1.4;}
.pvm-row i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:2px;}
/* Проверка извещений в админке: кнопка и ответ рядом. Ответ цветной —
зелёный «дошло», красный с причиной. */
.adm-check{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
margin:2px 0 14px;padding:0 2px;}
.adm-check button{border:1px solid var(--line);background:#fff;color:var(--ink-2);
border-radius:10px;padding:9px 13px;font-size:12.5px;font-weight:700;
font-family:'Inter',sans-serif;cursor:pointer;}
.adm-note{font-size:12px;line-height:1.4;color:var(--ink-3);flex:1;min-width:120px;}
.adm-note.ok{color:#2E7D5B;}
.adm-note.bad{color:#B4404A;}
/* «НА КОГО ТЫ ПОХОЖ» — ряд с лицами.
Карточка выше и уже, чем у дат: тут главное лицо, а под ним строка
сходства. Её и читают, ради неё ряд и существует. */
.lk-rail{margin-bottom:6px;}
.lk-c{flex:0 0 146px;width:146px;background:#fff;border:1px solid var(--line);
border-radius:15px;padding:12px;cursor:pointer;}
.lk-c:active{border-color:var(--wa);}
.lk-av{display:block;width:100%;height:118px;border-radius:11px;object-fit:cover;
background:var(--wa-soft);margin-bottom:10px;}
.lk-no{display:flex;align-items:center;justify-content:center;
font-size:34px;font-weight:800;color:var(--wa);}
.lk-c b{display:block;font-size:13px;font-weight:700;line-height:1.3;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lk-c i{display:block;font-style:normal;font-size:11px;color:var(--ink-3);
margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Строка сходства — то, ради чего всё: даём ей три строки и цвет,
чтобы её прочли раньше имени. */
.lk-c u{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;text-decoration:none;font-size:12px;line-height:1.4;
color:var(--wa-deep);margin-top:8px;}
/* ЧТО ВИДНО ПО РАЗГОВОРАМ.
Полоса долей, наблюдения, «чего давно не было». Оформлено спокойно,
без ярких плашек: человек читает про себя, и украшательство тут мешает
так же, как в письме от близкого. */
.ab-h{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-3);margin:18px 0 9px;}
.ab-h:first-child{margin-top:0;}
/* Доли одной полосой: читается слева направо за взгляд, и сразу видно,
что перевешивает. Кружки и столбики требуют сравнивать глазом. */
.ab-bar{display:flex;height:13px;border-radius:7px;overflow:hidden;background:var(--panel);}
.ab-seg{display:block;height:100%;}
.ab-c0{background:#9A5C8C}.ab-c1{background:#C79BEE}.ab-c2{background:#7BCF9A}
.ab-c3{background:#F3B463}.ab-c4{background:#5BC8F5}.ab-c5{background:#F4795B}
.ab-legend{display:flex;flex-wrap:wrap;gap:9px 14px;margin-top:11px;}
.ab-l{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);}
.ab-l i{width:9px;height:9px;border-radius:3px;flex:0 0 auto;}
.ab-l b{font-weight:700;color:var(--ink);}
.ab-note{background:#fff;border:1px solid var(--line);border-radius:13px;
padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--ink-1);margin-bottom:8px;}
/* «Чего давно не было» — приглушённо: это не упрёк, а напоминание. */
.ab-gone{background:var(--panel);border-color:transparent;color:var(--ink-2);}
.ab-ahead{margin-top:14px;background:var(--wa-soft);border-radius:14px;
padding:14px 15px;font-size:13.5px;line-height:1.5;color:var(--wa-deep);font-weight:600;}
/* «Это стоит рассказать» — не наблюдение, а приглашение.
Оттого выделено сильнее «Что повторяется»: те карточки читают, эту —
нажимают. Левая полоса и «рассказать →» говорят, что тут есть куда
пойти; без них карточка неотличима от текста и её просто прочтут. */
.ab-tell{position:relative;background:#fff;border:1px solid var(--line);
border-left:3px solid var(--wa-deep);border-radius:13px;
padding:12px 14px 11px;margin-bottom:9px;cursor:pointer;
transition:background .15s var(--мяг),transform .1s var(--в);}
.ab-tell:active{background:var(--wa-soft);transform:scale(.995);}
.ab-tell-w{font-size:14px;line-height:1.4;color:var(--ink-1);font-weight:600;}
.ab-tell-y{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--ink-2);}
.ab-tell-go{display:inline-block;margin-top:8px;font-size:11.5px;
color:var(--wa-deep);font-weight:600;}
/* ТОВАРЫ ДЛЯ РИСОВАНИЯ.
Снимки в ряд, а не сеткой: сторон у товара немного, а горизонтальная
лента сразу говорит, что их можно добавить ещё. Подпись под каждым
(«основная», «сторона 2») нужна селлеру, чтобы не загрузить дважды
один и тот же ракурс. */
.gd-card{background:#fff;border:1px solid var(--line);border-radius:15px;
padding:12px;margin-bottom:10px;}
.gd-shots{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
-webkit-overflow-scrolling:touch;}
.gd-shot{position:relative;flex:0 0 auto;width:88px;}
.gd-shot img{width:88px;height:88px;object-fit:cover;border-radius:11px;
background:var(--panel);display:block;}
.gd-shot i{display:block;margin-top:4px;font-size:10.5px;color:var(--ink-3);
font-style:normal;text-align:center;}
.gd-sx{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;
border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
font-size:11px;line-height:20px;cursor:pointer;}
.gd-more{flex:0 0 auto;width:88px;height:88px;border:1px dashed var(--line);
border-radius:11px;background:transparent;color:var(--ink-3);font-size:18px;
cursor:pointer;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:2px;}
.gd-more span{font-size:10.5px;}
.gd-name{width:100%;margin-top:10px;padding:9px 11px;border:1px solid var(--line);
border-radius:10px;font-size:13.5px;color:var(--ink-1);background:transparent;
font-family:inherit;}
.gd-marks{margin-top:7px;font-size:12px;line-height:1.45;color:var(--ink-2);}
.gd-busy{margin-top:10px;font-size:12.5px;color:var(--ink-3);}
.gd-x{margin-top:9px;padding:0;border:0;background:transparent;
font-size:12px;color:var(--ink-3);cursor:pointer;}
.gd-add{background:var(--panel);border:1px dashed var(--line);border-radius:15px;
padding:14px 15px;cursor:pointer;}
.gd-add b{display:block;font-size:13.5px;color:var(--ink-1);}
.gd-add span{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;
color:var(--ink-2);}
.gd-add button{margin-top:9px;padding:7px 13px;border:0;border-radius:9px;
background:var(--wa-deep);color:#fff;font-size:12.5px;cursor:pointer;}
.gd-off{cursor:default;}
/* Окно «Оживить кадр». Три длительности, а не ползунок: модель принимает
только 4, 6 или 8 секунд, и предлагать промежуточные значения значило бы
обещать то, чего не будет. */
.car-anim-ask{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);
display:flex;align-items:center;justify-content:center;padding:22px;}
.car-anim-b{background:#fff;border-radius:18px;padding:20px;max-width:330px;width:100%;}
.car-anim-b b{display:block;font-size:16px;color:var(--ink-1);}
.car-anim-b p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);}
.car-anim-note{display:block;margin-top:10px;font-size:11.5px;line-height:1.45;
color:var(--ink-3);}
.car-anim-x{margin-top:14px;width:100%;padding:9px 0;border:0;border-radius:10px;
background:var(--panel);font-size:13px;color:var(--ink-2);cursor:pointer;
font-family:inherit;}
/* Подпись копируется нажатием — подсказка появляется только там, где
курсор есть, а на телефоне видна всегда: угадать нажимаемость текста
иначе невозможно. */
.car-cap{cursor:pointer;}
.car-cap-hint{display:block;margin-top:8px;font-size:11px;color:var(--ink-3);}
/* Намёк на тарифы в подписи. 25 августа: окно после первой карусели убрано,
осталась строка. Она подчёркнута точками — так видно, что на неё можно
нажать, но она не кричит кнопкой посреди чужого текста. */
.car-cap-plan{display:block;margin-top:5px;font-size:11px;color:var(--wa);
font-weight:600;cursor:pointer;text-decoration:underline dotted;
text-underline-offset:3px;}
/* «Показать товар в руках?» — две кнопки в столбик, а не в ряд: у них
разный вес, и «только товар» не должна выглядеть равным выбором. */
.car-who-b{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.car-who-go{padding:12px 0;border:0;border-radius:11px;background:var(--wa-deep);
color:#fff;font-size:13.5px;font-family:inherit;cursor:pointer;}
.car-who-no{padding:11px 0;border:1px solid var(--line);border-radius:11px;
background:transparent;color:var(--ink-1);font-size:13.5px;font-family:inherit;cursor:pointer;}
/* ПЕЛЕНА, ПОКА КАДР ОЖИВАЕТ.
Как в переписке, где присланное открывается не сразу: снимок виден
сквозь дымку, по ней идёт отсвет. Кадр не закрыт наглухо — человек
должен видеть, что оживает именно он, а не что-то отвлечённое. */
.car-veil{position:absolute;inset:0;z-index:6;overflow:hidden;border-radius:inherit;
background:rgba(20,14,20,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
animation:veilIn .25s var(--в);}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
/* Отсвет идёт по диагонали и не спеша: быстрый блик читается как
«сейчас закончится» и обманывает — работа занимает минуты. */
.car-veil-shine{position:absolute;top:-60%;left:-60%;width:220%;height:220%;
background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
animation:veilShine 2.8s linear infinite;}
@keyframes veilShine{from{transform:translate3d(-30%,-30%,0)}
to{transform:translate3d(30%,30%,0)}}
.car-veil-t{position:relative;color:#fff;font-size:15px;font-weight:600;
display:flex;align-items:center;gap:3px;}
.car-veil-d{display:inline-flex;gap:3px;margin-left:2px;}
.car-veil-d i{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.35;
animation:veilDot 1.2s infinite;}
.car-veil-d i:nth-child(2){animation-delay:.2s}
.car-veil-d i:nth-child(3){animation-delay:.4s}
@keyframes veilDot{0%,60%,100%{opacity:.35}30%{opacity:1}}
.car-veil-n{position:relative;color:rgba(255,255,255,.7);font-size:11.5px;
text-align:center;padding:0 24px;line-height:1.4;}
/* «Свернуть» — стеклянная, под цвет пелены: обычная кнопка на дымке
выглядит заплаткой, а эта из неё же и сделана. */
.car-veil-min{position:relative;margin-top:14px;padding:9px 22px;border:0;
border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:13px;
font-family:inherit;cursor:pointer;backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);transition:background .15s var(--мяг);}
.car-veil-min:active{background:rgba(255,255,255,.26);}
/* Сбой остаётся на кадре и ждёт, пока прочтут: подсказка внизу экрана
уходит через три секунды, а причина — единственное, что сейчас нужно. */
.car-fail{position:absolute;left:16px;right:16px;bottom:16px;z-index:7;
background:#fff;border-radius:14px;padding:14px 15px;}
.car-fail b{display:block;font-size:14px;color:var(--ink-1);}
.car-fail p{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2);
word-break:break-word;}
.car-fail button{margin-top:11px;width:100%;padding:9px 0;border:0;border-radius:10px;
background:var(--panel);font-size:13px;color:var(--ink-1);cursor:pointer;font-family:inherit;}
/* «оживает…» на слайде, пока считается ролик. Тот же угол, что и у
значка видео: человек ищет состояние там, где привык. Мигает, чтобы
отличаться от готового. */
/* СЕМЬ МЁРТВЫХ АНИМАЦИЙ. 15 сентября, слово хозяина: «после нажатия
„ищу фотографии“ в карусели не показывает, что ищет, нету анимации».
Метка «Көрдүүбүн» на экране рисовалась, а не мигала. В правиле стояло
`animation: … var(--в)-in-out …`, где --в это cubic-bezier(.16,1,.3,1).
Вместе выходит «cubic-bezier(…)-in-out» — такого способа движения не
существует, браузер молча выбрасывает ВСЁ правило целиком, и анимации
нет вовсе. Писавший имел в виду ease-in-out.
Тем же были убиты ещё шесть: полоска сканера в камере, пульс карточки
лица, волна точек «АЙЫЫ думает», подсказка-плюс, полоска процентов,
звёздочка в пароле. Все семь чинятся одной заменой. Сам --в остался
на месте — в переходах он записан правильно и работает. */
.car-vid-wait{animation:vidWait 1.4s ease-in-out infinite;}
@keyframes vidWait{0%,100%{opacity:1}50%{opacity:.45}}
.ab-from{margin:12px 0 4px;font-size:11.5px;color:var(--ink-3);}
.ab-from button{border:none;background:none;color:var(--wa-deep);font-weight:700;
font-size:11.5px;font-family:'Inter',sans-serif;cursor:pointer;padding:0;}
.ab-wait{background:var(--panel);border-radius:13px;padding:14px 15px;
font-size:12.5px;line-height:1.5;color:var(--ink-3);}
/* ПЛАШКА «ВДОХНОВЕНИЕ — PRO».
Не запрет, а витрина: человек пришёл на экран и должен понять, что за
ним, прежде чем услышит цену. Поэтому сперва рассказ, потом тариф,
и только в конце кнопка. */
.insp-pro{margin:18px 16px;background:#fff;border:1px solid var(--line);
border-radius:18px;padding:20px 18px 18px;}
.insp-pro-k{display:inline-block;background:var(--wa);color:#fff;font-size:10.5px;
font-weight:800;letter-spacing:.06em;text-transform:uppercase;
border-radius:7px;padding:4px 9px;margin-bottom:12px;}
.insp-pro h3{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;
letter-spacing:-.01em;margin:0 0 10px;color:var(--ink);}
.insp-pro p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 14px;}
.insp-pro ul{margin:0 0 14px;padding-left:0;list-style:none;}
.insp-pro li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;
color:var(--ink-2);margin-bottom:7px;}
.insp-pro li::before{content:'✦';position:absolute;left:0;top:0;color:var(--wa);}
.insp-pro-w{font-size:12.5px;color:var(--ink-3);}
.insp-pro button{width:100%;border:none;background:var(--wa);color:#fff;
border-radius:12px;height:46px;font-size:14.5px;font-weight:700;
font-family:'Inter',sans-serif;cursor:pointer;}
.insp-pro button:active{opacity:.9;}
/* «Для кого» — под ценой, до перечня: человек сперва решает, он ли это,
и только потом читает, что внутри. */
.plan-who{font-size:12.5px;color:var(--wa-deep);font-weight:700;margin:2px 0 10px;}
/* Числа — мелко и одной строкой. Они нужны тем, кто сверяется, и не должны
спорить с главным. */
.plan-num{font-size:11px;color:var(--ink-3);line-height:1.5;margin-top:10px;}
/* «Выгоднее всего» — пометка на среднем тарифе. Считается по сборкам
на рубль, а не назначается: если завтра числа поменяются, метка
переедет сама. Рамка тонкая, без заливки — тариф выделен, но не кричит. */
.plan-i.best{border-color:var(--wa);box-shadow:0 0 0 1px var(--wa) inset;}
.plan-n u{display:inline-block;text-decoration:none;margin-left:8px;
background:var(--wa);color:#fff;font-size:10.5px;font-weight:800;
letter-spacing:.04em;text-transform:uppercase;border-radius:7px;padding:3px 7px;
vertical-align:middle;}
/* КРУЖКИ ВЫБОРА ЦВЕТА. Сам цвет и есть подпись — название рядом было бы
лишним словом. Выбранный обведён кольцом с отступом, а не рамкой впритык:
рамка того же цвета на светлом кружке не видна вовсе. */
.car-c{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.12);
padding:0;cursor:pointer;flex:0 0 auto;}
.car-c.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--wa);}
.car-c:active{transform:scale(.92);}
/* ОКНО «КОГО РИСУЕМ». Список людей из рассказа: лицо, имя, кем приходится
и сколько ему было тогда. Строка на человека, чтобы двое-трое читались
одним взглядом. */
.cfa-row{display:flex;align-items:center;gap:11px;padding:9px 0;
border-top:1px solid var(--line);}
.cfa-av{width:44px;height:44px;border-radius:11px;object-fit:cover;flex:0 0 auto;
background:var(--wa-soft);}
.cfa-no{display:flex;align-items:center;justify-content:center;
color:var(--wa-deep);font-size:17px;font-weight:800;}
.cfa-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cfa-t b{font-size:13.5px;font-weight:700;}
.cfa-t i{font-style:normal;font-size:11.5px;color:var(--ink-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cfa-b{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink-2);
border-radius:9px;padding:8px 12px;font-size:12px;font-weight:700;
font-family:'Inter',sans-serif;cursor:pointer;}
.cfa-b:active{background:var(--wa-soft);}
/* Приложить лицо — дело необязательное, и кнопка не должна выглядеть
требованием: без лица человек всё равно будет нарисован, по описанию. */
.cfa-b.ghost{border-color:transparent;background:var(--panel);color:var(--ink-3);font-weight:600;}
/* Где и когда — два поля прямо в окне сбора лиц. Стоят под людьми, потому
что читаются как продолжение вопроса «кого рисуем»: кого, где, когда. */
.cfa-when{display:flex;gap:9px;margin:12px 0 0;}
.cfa-when label{flex:1;display:flex;flex-direction:column;gap:5px;
font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
color:var(--ink-3);min-width:0;}
.cfa-when label:last-child{flex:0 0 108px;}
.cfa-when input{width:100%;border:1px solid var(--line);border-radius:10px;
padding:10px 11px;font-size:14px;font-family:'Inter',sans-serif;color:var(--ink);
background:#fff;text-transform:none;letter-spacing:0;font-weight:500;}
.cfa-when input:focus{outline:none;border-color:var(--wa);}
.cfa-hint{font-size:11.5px;color:var(--ink-3);line-height:1.45;margin:8px 0 2px;}
.cfa-lim{font-size:11.5px;color:var(--ink-3);line-height:1.45;margin:10px 0 2px;
padding:10px 12px;background:var(--panel);border-radius:10px;}
.cfa-lim a{color:var(--wa-deep);font-weight:700;}
/* ПОДПИСЬ АВТОРА В НАСТРОЙКАХ: квадрат под знак и поле под ник рядом. */
/* Отступы вокруг подписи. Было впритык к заголовку и к пояснению снизу:
блок читался как продолжение предыдущего раздела, а знак прилипал
к полю ввода. */
/* Поля панели идут с боковым отступом в 18 точек, а этот блок стоял
вплотную к краю: знак прилипал к рамке экрана. Выравниваем по остальным. */
.brand-row{display:flex;align-items:center;gap:14px;margin:10px 0;padding:0 18px;}
.brand-row.off{opacity:.5;pointer-events:none;}
.brand-row.off .brand-av{pointer-events:auto;}
.brand-av{flex:0 0 auto;width:56px;height:56px;border-radius:14px;cursor:pointer;
border:1px dashed #DCC9D6;background:var(--wa-soft);color:var(--wa-deep);
display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;}
/* Знак заведён — пунктир убираем: он приглашение, а приглашать больше не к чему. */
.brand-av.has{border-style:solid;border-color:var(--line);background:#fff;}
/* Лицо из профиля кадрируем кружком внутри квадрата: так видно, что это
аватар, а не загруженный знак. */
.brand-face{border-radius:50%;padding:3px;}
.brand-av img{width:100%;height:100%;object-fit:contain;background:#fff;}
.brand-av:active{background:#EFDFEC;}
.brand-f{flex:1;min-width:0;}
.brand-f label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px;}
.brand-f input{width:100%;}
/* ЛИЦО ДЛЯ РИСОВАНИЯ — блок в карточке человека. Стоит сразу под тем,
чем человек дорог, потому что это про него же: каким его нарисуют. */
.kl-face{margin:0 0 18px;}
.klf-row{display:flex;align-items:center;gap:12px;background:var(--wa-soft);
border-radius:14px;padding:13px 14px;}
.klf-row.klf-off{background:var(--panel);}
.klf-av{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto;}
.klf-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.klf-t b{font-size:13px;font-weight:800;color:var(--wa-deep);}
.klf-t span{font-size:11.5px;color:var(--ink-3);line-height:1.4;}
.klf-go{flex:0 0 auto;border:none;background:var(--wa);color:#fff;border-radius:10px;
padding:9px 14px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.klf-x{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink-2);
border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;
font-family:'Inter',sans-serif;cursor:pointer;}
/* КАРТОЧКА ТАРИФА В ПРОФИЛЕ.
Первое, что видно при открытии профиля, и единственное место, где человек
узнаёт свой тариф. Выделена цветом нарочно: это самая денежная кнопка
приложения, и прятать её среди полей формы — значит не продавать. */
.s-plan-card{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin:0 0 18px;padding:13px 15px;border-radius:14px;cursor:pointer;
background:var(--wa-soft);border:1px solid #EBDCE6}
.s-plan-card:active{opacity:.88}
.s-plan-card.paid{background:var(--wa);border-color:var(--wa)}
.s-plan-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.s-plan-l b{font-size:14.5px;font-weight:800;color:var(--wa-deep)}
.s-plan-l span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.s-plan-card.paid .s-plan-l b,
.s-plan-card.paid .s-plan-l span,
.s-plan-card.paid .s-plan-go{color:#fff}
.s-plan-card.paid .s-plan-l span{opacity:.9}
.s-plan-go{font-size:12.5px;font-weight:700;color:var(--wa-deep);white-space:nowrap}
/* ЛЮДИ ПО ТЕМЕ.
Карточка узкая и высокая: лицо сверху, имя, строка объяснения. Ширина
такая, чтобы в ряд попадало два с половиной — обрезанный третий и есть
приглашение листать вбок. */
.fcard{flex:0 0 156px;width:156px;background:#fff;border:1px solid var(--line);
border-radius:14px;overflow:hidden;cursor:pointer;user-select:none}
.fcard:active{border-color:var(--wa)}
.fcard-i{width:100%;height:128px;object-fit:cover;display:block;background:var(--wa-soft)}
.fcard-no{display:flex;align-items:center;justify-content:center;
font-size:38px;font-weight:800;color:var(--wa);font-family:'Inter',sans-serif}
/* Имя в две строки: «Сергей Иванов (младший)» в одну не встаёт, а обрывать
человека на фамилии нельзя. */
.fcard-n{font-size:13px;font-weight:700;color:var(--ink);padding:8px 9px 0;line-height:1.25;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:32px}
/* Регалия под именем. Сервер присылает её уже короткой — «Глава Якутии»,
«Чешский геймдизайнер», — поэтому здесь хватает двух строк, и обрыв
на полуслове больше не случается. Высота задана: без неё карточки в ряду
разной длины, и низ ряда получается рваным. */
/* РЕГАЛИЯ ЦЕЛИКОМ. 23 августа: обрывалась на полуслове — «Основатель Apple,
представил iPhon…». Человек читает обрывок и не понимает, чем этот
человек связан с темой, а ради этого карточка и заведена.
Три строки вместо двух и карточка чуть шире: при 132 точках в строку
влезало три слова. Высота задана жёстко — иначе низ ряда рваный. */
/* РЕГАЛИЯ ЦЕЛИКОМ, БЕЗ ОБРЕЗКИ. 23 августа, вторая попытка.
Трёх строк не хватило: «Основатель Infinity Ward, со-создатель
оригинального Modern Warfare» — это 62 знака, а в три строки при
156 точках влезало около 69 только на глаз, с учётом узких букв.
На деле слова переносятся, и последняя строка обрывалась.
Теперь четыре строки и высота под них. Ряд от этого не стал ниже:
карточки и так одной высоты, просто в них появилось место. */
.fcard-s{font-size:11.5px;color:var(--ink-3);padding:4px 10px 12px;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
min-height:64px}
/* Сводка над рядом: что это за тема вообще. Отвечает на первый вопрос
человека, который ищет незнакомое дело или компанию. */
/* Кнопка под рядом людей: из найденного выходит карусель. Стоит внизу,
а не сверху — сперва человек смотрит, кого нашли, потом решает. */
/* Кнопка правки фото в просмотрщике — как остальные, без выделения:
она нужна не каждому кадру. */
#car-view-fix{white-space:nowrap;}
.faces-go{display:block;width:calc(100% - 32px);margin:14px 16px 0;padding:13px;border:none;
border-radius:12px;background:var(--wa);color:#fff;font:inherit;font-size:14px;
font-weight:600;cursor:pointer;}
.faces-go:active{opacity:.85;}
/* Снимок темы над сводкой. Широкий и низкий: это иллюстрация, а не
главный кадр, и отнимать у людей место ей незачем. */
.faces-pic{width:100%;height:140px;object-fit:cover;border-radius:10px;
display:block;margin-bottom:10px;background:var(--wa-soft);}
/* Пустой экран раздела: что вводить и что за это будет. */
/* ОТСТУПЫ ПО ОДНОЙ ЛИНИИ С КАРТОЧКАМИ. 23 августа.
Ряд карточек отступает от края на 16 точек (.rail), а мой текст стоял
на двух — и вываливался за край экрана, будто чужой. Всё, что лежит
в этом ряду, теперь держит ту же линию: и текст, и кнопки, и сводка. */
/* Строка «откуда смотрим» над рядом «Сегодня». */
/* Поздравление внизу линии жизни. */
.pv-cong{margin:14px 0 4px;}
.pv-cong-b{width:100%;padding:13px;border:none;border-radius:12px;background:var(--wa);
color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.pv-cong-n{display:block;margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--ink-3);}
/* Карточка события в ряду «Сегодня»: вместо лица — год. */
.pcard-ev .pcard-n{font-weight:600;}
.pcard-w{padding:2px 9px 9px;font-size:11px;color:var(--ink-3);}
.faces-empty{padding:2px 16px 4px;}
/* Строки .faces-empty-t/-s убраны 23 августа вместе с подписью под
полем: она повторяла заголовок раздела «Зри в корень». */
.faces-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.faces-chips button{padding:9px 14px;border:1px solid var(--line);background:var(--bg);
color:var(--ink);border-radius:999px;font:inherit;font-size:13px;cursor:pointer;}
.faces-chips button:active{border-color:var(--wa);color:var(--wa-deep);}
.faces-about{margin:0 16px 12px;padding:12px 14px;border-radius:12px;
background:var(--wa-soft);font-size:13px;line-height:1.55;color:var(--ink);}
/* Пустые карточки на время ожидания. Не крутилка: человек видит, что сейчас
будет, и ряд не дёргается, когда придут настоящие. */
.fcard-wait{pointer-events:none}
.fcard-wait .fcard-i,
.fcard-wait .fcard-n,
.fcard-wait .fcard-s{background:var(--wa-soft);color:transparent;border-radius:8px}
.fcard-wait .fcard-n{height:13px;margin:8px 9px 0;padding:0}
.fcard-wait .fcard-s{height:30px;margin:6px 9px 10px;padding:0}
.fcard-wait .fcard-i{animation:fcpulse 1.2s ease-in-out infinite}
@keyframes fcpulse{0%,100%{opacity:1}50%{opacity:.55}}
/* строка действий в просмотрщике: кнопки в ряд с переносом.
Кнопок стало три (фото, правка, надписи на видео) — на узком телефоне
в строку они не встают, поэтому перенос и одинаковая ширина, иначе
вторая строка выглядит обрубком первой. */
.car-view-edit{flex-wrap:wrap;gap:8px}
#car-view-photo{background:rgba(255,255,255,.92)}
/* КАДР ИЩЕТ. 14 сентября, слово хозяина: «после нажатия „Ситимҥэ бул“
должна начаться анимация в изображении». До этого менялась только
подпись на кнопке внизу, а человек смотрит на снимок — и двадцать
секунд не понимает, идёт работа или нет. Тихая пульсация: ничего не
закрывает, кадр виден, но видно и что он занят. */
@keyframes carЖдёт{0%,100%{opacity:1}50%{opacity:.42}}
#car-view-img.car-ждёт{animation:carЖдёт 1.1s ease-in-out infinite}
/* БЕЛАЯ КНОПКА БЕЗ НАДПИСИ. 14 сентября, снимок хозяина: в просмотрщике
кадра стояла сплошная белая плашка.
Это «Хаартысканы эбэтэр видеону эп». Фон у неё задан своим правилом и
остаётся белым в любой теме, а цвет текста приходит из общего списка
тёмной темы (.car-view-edit button → --ink), и там он светлый. Белым
по белому. Возвращаем ей тёмные буквы — те же, что и на светлой теме. */
html[data-theme="dark"] #car-view-photo{color:#4E3049}
.car-view-edit button[disabled]{opacity:.7;cursor:default}
#car-view-burn{background:var(--wa);color:#fff}
/* Вложения переносим на несколько рядов вместо прокрутки вбок:
при 11 снимках было видно 7, а домотать до остальных мышью неочевидно. */
.chat-att-row{flex-wrap:wrap !important;overflow-x:visible !important;
max-height:184px;overflow-y:auto;row-gap:7px}
.chat-att-row::-webkit-scrollbar{width:0;height:0}
/* окно хода работы при вжигании надписей */
.cv-prog{position:absolute;inset:0;z-index:180;display:none;align-items:center;
justify-content:center;background:rgba(30,16,28,.62);padding:22px}
.cv-prog.on{display:flex}
.cv-prog-b{background:#fff;border-radius:16px;padding:20px 18px;width:100%;max-width:320px;
box-shadow:0 12px 40px rgba(0,0,0,.3);text-align:center;font-family:'Inter',sans-serif}
.cv-prog-b b{display:block;font-size:15px;color:var(--ink);margin-bottom:14px;font-weight:700}
.cv-prog-bar{height:8px;border-radius:5px;background:var(--wa-soft);overflow:hidden}
.cv-prog-bar i{display:block;height:100%;width:0;background:var(--wa);border-radius:5px;
transition:width .25s var(--в)}
.cv-prog-b span{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.cv-prog-b em{display:block;margin-top:8px;font-size:12px;color:#B4404A;font-style:normal}
/* окно правки фото */
.pe{position:absolute;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
background:rgba(30,16,28,.66);padding:16px}
.pe.on{display:flex}
.pe-b{background:#fff;border-radius:16px;width:100%;max-width:360px;max-height:100%;overflow:auto;
padding:16px;font-family:'Inter',sans-serif}
/* ЛИСТ НЕ ВЫШЕ ОКНА. 31 августа, слово хозяина: «Поправить» и «Оставить»
в Сафари спрятались за системной панелью, оставить картинку не вышло.
Стояло max-height:92vh. В Сафари vh считается по экрану с УБРАННОЙ
нижней панелью, а окно центрирует лист. Когда панель видна (обычное
состояние), лист выше видимого поля, вылезает за верх и низ поровну —
и липкий низ с кнопками уходит под панель. С клавиатурой то же, только
под клавиатуру. Теперь лист не выше своего окна (100% — от окна .pe,
а его при открытом редакторе подгоняет под видимую область
peFitViewport в 76-photo-edit.js). */
.pe-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pe-h b{font-size:16px;color:var(--ink)}
.pe-x{border:none;background:var(--wa-soft);color:var(--wa-deep);width:30px;height:30px;
border-radius:50%;font-size:14px;cursor:pointer}
/* ПРЕВЬЮ ПОКАЗЫВАЕТ КАДР ЦЕЛИКОМ. 29 августа, две беды хозяина:
человек загрузил снимок 16:9, попросил убрать лишних людей — и не увидел
их ни в «было», ни в «стало», потому что рамка была вертикальная 4:5, а
object-fit:cover срезал края. Второй раз человек пытался приблизить
снимок пальцами, а тык был ничем не занят.
Теперь: contain вместо cover — видно весь кадр, ничего не срезается;
высота фиксированная, чтобы горизонтальный и вертикальный снимки не
прыгали; тык открывает во весь экран. */
.pe-pics{display:flex;gap:8px;margin-bottom:12px}
.pe-pics figure{flex:1;margin:0;min-width:0}
.pe-pics img{width:100%;height:var(--pe-h,190px);object-fit:contain;border-radius:10px;
background:#2A1F2C;display:block;cursor:zoom-in}
.pe-pics figcaption{font-size:11px;color:var(--ink-2);text-align:center;margin-top:4px}
/* Во весь экран — по тыку на любой из двух. */
.pe-zoom{position:fixed;inset:0;background:rgba(12,7,14,.94);z-index:400;
display:none;align-items:center;justify-content:center;padding:16px}
.pe-zoom.on{display:flex}
.pe-zoom img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px}
/* Крестик виден на любом снимке. 1 сентября: полупрозрачная белая заливка
на светлом кадре сливалась, и кнопку было не различить — а это
единственный выход из просмотра. Теперь белый кружок с тёмным знаком,
с тенью, и крупнее пальца. Высоту окна держит peZoomFit. */
.pe-zoom-c{position:absolute;top:calc(14px + env(safe-area-inset-top,0));right:14px;
width:44px;height:44px;border-radius:50%;border:none;background:#fff;
color:#1A1420;font-size:19px;font-weight:700;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 16px rgba(0,0,0,.45);z-index:2}
.pe-zoom-l{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0));
text-align:center;color:#c9b8c2;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
/* Старые крупные кнопки-карточки убраны 30 августа: подсказки стали
мелкими овалами в строку (ниже), а эти правила с ними спорили —
овалы вставали столбиком во всю ширину. Осталось только «нельзя нажать». */
.pe-acts button:disabled,.pe-go:disabled{opacity:.55;cursor:default}
#pe-free{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--line);
border-radius:10px;font-size:13.5px;margin-bottom:8px}
.pe-go{width:100%;border:none;background:var(--wa);color:#fff;border-radius:10px;padding:11px;
font-size:13.5px;font-weight:700;cursor:pointer}
.pe-note{min-height:18px;font-size:12px;color:var(--ink-2);margin:8px 0;text-align:center}
.pe-row{display:flex;gap:8px}
.pe-row button{flex:1;border-radius:10px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;border:none}
.pe-s{background:var(--wa-soft);color:var(--wa-deep)}
.pe-p{background:var(--wa);color:#fff}
/* две кнопки в шапке линии — скачать и поделиться */
.pbar .pshare + .pshare{margin-left:6px}
/* «Убрать виджеты» — только на мониторе: на телефоне панели сбоку нет
вовсе, и кнопка прятала бы то, чего не видно (5 сентября). */
.pshare.wfold{display:none;}
/* ЯЗЫЧОК ВОЗВРАТА — ТОЖЕ ТОЛЬКО НА МОНИТОРЕ. 5 сентября, слово хозяина:
«видишь маленькую противную стрелку в интерфейсе?».
Моя недоделка: все правила для #wshow я положил внутрь медиазапроса
для широких экранов, а само правило «прятать» — туда же. На телефоне
правил не оказалось вовсе, и браузер показал кнопку как обычную —
маленькую стрелку у левого края, которая там ничего не делает.
Прячем снаружи медиазапроса, чтобы правило действовало везде. */
#wshow{display:none;}
/* фото профиля в кружке настроек */
.bigav{background-size:cover;background-position:center}
.avhint a{color:var(--wa-deep);cursor:pointer;text-decoration:underline;margin:0 3px}
/* Шапка чата: только значки. Слева окружение, справа вдохновение.
Место освободилось под подсказку «Карусель про сегодня» внизу. */
.aiyy-tab.ico{width:40px;height:40px;padding:0;display:flex;align-items:center;
justify-content:center;border-radius:50%;flex:0 0 auto}
.aiyy-tab.ico span{display:none}
/* Повод дня на пустом экране: совпадение с чужой линией жизни. */
.chat-hook{margin:0 2px 8px;padding:11px 13px;border-radius:12px;background:var(--wa-soft);
border:1px solid #EBDCE6;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-hook span{flex:1;min-width:150px;font-size:13px;line-height:1.4;color:var(--ink)}
.chat-hook button{flex:0 0 auto;border:none;background:var(--wa);color:#fff;border-radius:9px;
padding:8px 13px;font-size:12.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer}
/* крестик подсказки: убрать на сегодня */
.chat-hook .hk-x{background:transparent;color:var(--ink-2);padding:6px 8px;font-size:13px;
font-weight:600;flex:0 0 auto}
.chat-hook .hk-x:active{opacity:.6}
/* свежие поводы: горизонтальная лента карточек */
.fresh-rail{margin:0 0 18px}
/* -webkit-overflow-scrolling нужен старым Safari, а touch-action —
чтобы палец прокручивал ряд вбок, а не тянул весь экран вниз. */
.fresh-rail .fr-row{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.fresh-rail .fr-row > *{scroll-snap-align:start}
.fresh-rail .fr-row::-webkit-scrollbar{display:none}
.fr-card{flex:0 0 auto;width:190px;background:#fff;border:1px solid var(--line);
border-radius:14px;padding:12px 13px;cursor:pointer}
.fr-card:active{background:var(--wa-soft)}
.fr-y{font-size:11px;font-weight:700;color:var(--wa-deep);letter-spacing:.04em}
.fr-w{font-size:14px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.25}
.fr-t{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.35}
.fr-s{font-size:10.5px;color:#A79BA4;margin-top:7px}
.fr-note{font-size:12px;color:var(--ink-2);padding:4px 16px 0}
/* Общий значок загрузки. Буквы имени пробегают волной — видно, что живое,
а не замерло. Всё на CSS: гифка весила бы сотни килобайт, мылила бы
на плотных экранах и не умела бы менять цвет вместе с темой. */
.ai-load{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.ai-load .ai-load-n{display:inline-flex;gap:1px;font-weight:800;letter-spacing:.5px;
font-size:11.5px;color:var(--wa-deep)}
.ai-load .ai-load-n i{font-style:normal;animation:aiwave 1.1s ease-in-out infinite}
.ai-load .ai-load-n i:nth-child(2){animation-delay:.13s}
.ai-load .ai-load-n i:nth-child(3){animation-delay:.26s}
.ai-load .ai-load-n i:nth-child(4){animation-delay:.39s}
@keyframes aiwave{0%,70%,100%{opacity:.28;transform:translateY(0)}
35%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){
.ai-load .ai-load-n i{animation:none;opacity:.75}
}
.fr-note button{border:none;background:transparent;color:var(--wa-deep);font-size:12px;
font-weight:700;text-decoration:underline;cursor:pointer;padding:0 2px}
/* карточка новости: даём прочитать, не обрезая на полуслове */
.fr-card{width:232px}
.fr-t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* разбор новости перед сборкой */
.fr-sheet{position:absolute;inset:0;z-index:150;display:none;align-items:flex-end;
justify-content:center;background:rgba(30,16,28,.6)}
.fr-sheet.on{display:flex}
.fr-sh-b{background:#fff;border-radius:18px 18px 0 0;width:100%;max-height:88vh;overflow:auto;
padding:16px 16px 20px;font-family:'Inter',sans-serif}
.fr-sh-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fr-sh-h b{font-size:11.5px;font-weight:700;color:var(--wa-deep);letter-spacing:.04em}
.fr-sh-x{border:none;background:var(--wa-soft);color:var(--wa-deep);width:30px;height:30px;
border-radius:50%;font-size:14px;cursor:pointer}
.fr-sh-b h3{margin:0 0 8px;font-size:19px;line-height:1.25;color:var(--ink)}
.fr-sh-b p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.fr-sh-b a{display:inline-block;font-size:12.5px;color:var(--wa-deep);margin-bottom:14px}
.fr-sh-b label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:5px}
.fr-sh-b textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--line);
border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;resize:vertical}
.fr-sh-hint{font-size:11.5px;color:#A79BA4;margin:6px 0 14px}
.fr-sh-row{display:flex;gap:8px}
.fr-sh-row button{flex:1;border:none;border-radius:11px;padding:12px;font-size:13.5px;
font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
.fr-sh-s{background:var(--wa-soft);color:var(--wa-deep)}
.fr-sh-p{background:var(--wa);color:#fff}
/* планета у поля ввода — переключатель поиска в сети */
.aiyy-web{width:36px;height:36px;border:none;background:transparent;color:var(--ink-2);
border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer}
.aiyy-web.on{background:var(--wa-soft);color:var(--wa-deep)}
/* Дерево вместо глобуса (8 сентября). У картинки цвет не меняется от
color, как у нарисованного значка, — поэтому включённость показываем
насыщенностью: выключено бледное, включено полное и в своей плашке.
В тёмной теме дерево выворачиваем, иначе тёмное на тёмном пропадёт. */
/* КНОПКА ВЫЗОВА В СТРОКЕ ВВОДА. 8 сентября: раньше она висела кружком
над строкой и появлялась по поводам — то есть то мешала кнопкам готовой
карусели, то пропадала, когда была нужна. Слово хозяина: «это её место,
рядом с микрофоном, просто так органично смотрится».
Здесь она не кружок с тенью, а такой же значок, как микрофон, — иначе
в ряду ровных значков цветной пузырь читался бы отдельной вещью.
Дерево при этом чёткое и в полную силу («сделай более выразительным»):
это главная кнопка строки, ей и быть заметной. */
.aiyy-make{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:none;
background:none;padding:0;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--wa-deep);font-size:21px;line-height:1;
transition:background .15s var(--в);}
.aiyy-make img{width:26px;height:26px;object-fit:contain;display:block;}
.aiyy-make:active{background:var(--wa-soft);}
body.fab-open .aiyy-make{background:var(--wa-soft);}
html[data-theme="dark"] .aiyy-make img{filter:invert(1) brightness(1.6);}
/* подсказка дня переехала под приветствие — низ разгрузился */
.aiyy-hero .chat-hook{max-width:340px;margin:18px auto 0;text-align:left;
display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:start}
/* текст занимает всю ширину, кнопка идёт под ним — иначе текст жмётся
в узкую колонку и растягивается на шесть строк */
.aiyy-hero .chat-hook span{grid-column:1;min-width:0}
.aiyy-hero .chat-hook .hk-x{grid-column:2;grid-row:1;padding:2px 0 0;font-size:12px;color:#B9AAB6}
.aiyy-hero .chat-hook button:not(.hk-x){grid-column:1 / -1;justify-self:start;margin-top:2px}
/* приглашение в зону вдохновения на пустом экране */
.aiyy-hero .chat-hook span b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.aiyy-hero .chat-hook span i{display:block;font-style:normal;font-size:11.5px;color:#A79BA4;
margin-top:7px;padding-top:7px;border-top:1px solid #EBDCE6}
/* зона вдохновения: примеры, вопрос дня, свои даты */
.ic-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;scrollbar-width:none}
.ic-rail::-webkit-scrollbar{display:none}
.ic-card{flex:0 0 auto;width:214px;background:#fff;border:1px solid var(--line);
border-radius:14px;padding:12px 13px;cursor:pointer;
/* строки должны идти столбиком: где-то в легаси карточку разворачивало в ряд */
display:block !important;box-sizing:border-box}
.ic-card > *{display:block;width:auto}
.ic-card:active{background:var(--wa-soft)}
.ic-top{display:flex;gap:10px;margin-bottom:8px}
.ic-l{font-size:12px;font-weight:700;color:var(--wa-deep)}
.ic-tag{font-size:10.5px;font-weight:700;color:#A79BA4;letter-spacing:.05em}
.ic-w{font-size:15px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.25}
.ic-s{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ic-n{font-size:11px;color:var(--wa-deep);margin-top:8px;font-weight:600}
.ic-card.own .ic-tag{color:var(--wa-deep)}
.iq-box{margin:0 16px 18px;padding:16px;border-radius:14px;background:var(--wa-soft);
border:1px solid #EBDCE6;cursor:pointer}
.iq-t{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3}
.iq-box button{margin-top:12px;border:none;background:var(--wa);color:#fff;border-radius:10px;
padding:9px 16px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer}
/* кнопки под вопросом дня */
.iq-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.iq-row button{border:none;background:var(--wa);color:#fff;border-radius:10px;padding:9px 16px;
font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer}
.iq-row .iq-next{background:#fff;color:var(--wa-deep);border:1px solid var(--line)}
/* вопрос дня одной строкой в самом низу ленты */
.iq-line{margin:6px 16px 24px;padding:12px 14px;border-radius:12px;background:#fff;
border:1px solid var(--line);cursor:pointer}
.iq-line .iq-l{font-size:11.5px;color:#A79BA4;margin-bottom:5px}
.iq-line .iq-t{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.iq-line .iq-next{margin-top:8px;border:none;background:none;color:var(--wa-deep);
font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;padding:0;text-decoration:underline}
/* переход в свою линию из «Твоих дат» */
.vcf-cta{margin:2px 16px 18px}
.vcf-cta button{width:100%;border:1px dashed var(--wa);background:var(--wa-soft);color:var(--wa-deep);
border-radius:12px;padding:12px;font-size:13.5px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer}
.vcf-cta span{display:block;font-size:11.5px;color:#A79BA4;margin-top:6px;text-align:center}
.vcf-list{max-height:44vh;overflow:auto;margin-bottom:14px}
.vcf-i{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line)}
.vcf-i input{width:18px;height:18px;flex:0 0 auto}
.vcf-i span{display:flex;flex-direction:column;min-width:0}
.vcf-i b{font-size:14px;color:var(--ink)}
.vcf-i i{font-style:normal;font-size:12px;color:var(--ink-2)}
/* Низ раздела вдохновения: содержимое бывает короче экрана, и снизу
проглядывал край контейнера светлой полосой. Тянем фон на всю высоту
и добавляем отступ, чтобы последний ряд не упирался в край. */
/* ТОЛЬКО когда страница открыта: селектор по id сильнее, чем .pg{display:none},
и без .on страница вдохновения переставала скрываться — висела поверх
окружения, из-за чего обе иконки в шапке будто вели в одно место. */
#pg-life.on{display:flex;flex-direction:column}
#pg-life{background:#fff}
/* min-height:100% не сработал — у родителя нет заданной высоты.
Растягиваем содержимое флексом, тогда белого хвоста внизу не остаётся. */
#people-rails{padding-bottom:28px;flex:1 0 auto}
/* дни рождения известных людей */
.ic-card.star .ic-tag{color:var(--wa-deep)}
.ic-card.star .ic-n{color:var(--wa-deep)}
/* подсказка про интерактивный экран сторис */
.car-ask{margin:2px 2px 8px;padding:10px 12px;border-radius:11px;background:var(--wa-soft);
border:1px solid #EBDCE6;font-size:12.5px;color:var(--wa-deep);font-weight:600;line-height:1.4}
.car-styletip b{font-weight:800}
.car-sign-ask{position:relative}
.car-sign-ask>b{display:block;font-weight:800;margin-bottom:8px}
.car-sign-row{display:flex;gap:12px;align-items:center}
.car-sign-row input{width:100%;box-sizing:border-box;margin-bottom:6px;font-family:inherit}
.car-sign-x{position:absolute;right:8px;top:6px;border:0;background:none;color:var(--ink-3);font-size:18px;cursor:pointer;line-height:1}
/* Отступ меньше прежнего: описание из блока убрано 23 августа, осталась
одна строка — при девяти точках кнопки повисали бы в пустоте. */
.car-styletip-b{display:flex;gap:8px;margin-top:7px;flex-wrap:wrap}
/* Фон переменной, а не белым намертво: в тёмной теме белая кнопка на
тёмном блоке светилась пятном. --bg в светлой теме и есть белый. */
.car-styletip-b button{border:1px solid var(--wa);background:var(--bg);color:var(--wa-deep);
border-radius:9px;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
font-family:inherit}
.car-styletip-b button:active{background:var(--wa-soft)}
/* Размер текста — ползунок: компактнее кнопок и понятнее как шкала.
(Первая версия была кнопками, и стили к ней не применились вовсе —
команда с CSS шла после проверки синтаксиса, а та упала.) */
/* Три ступени размера текста вместо ползунка. Выбранная закрашена —
видно с одного взгляда, что стоит сейчас. */
/* Строка «что включено и будут ли списания» — первое, что видно в окне
тарифов. Не украшение: на этот вопрос человек и приходит. */
/* Кнопка продления внутри строки состояния. Отписка не должна быть
яркой и не должна прятаться: обычная кнопка, читаемая с первого взгляда. */
.plan-auto{margin-top:9px;padding:8px 12px;border:1px solid var(--line);
background:#fff;color:var(--ink);border-radius:9px;font:inherit;font-size:12.5px;
cursor:pointer;}
.plan-auto.on{background:var(--wa);color:#fff;border-color:var(--wa);}
html[data-theme="dark"] .plan-auto{background:var(--panel);color:var(--ink);}
/* Окно сборки ролика. Держим его простым: полоса, время и одна кнопка.
Человеку тут нечего решать — ему надо знать, что идёт работа и сколько
ещё ждать. */
.reel-sheet{position:fixed;inset:0;z-index:60;display:none;align-items:center;
justify-content:center;background:rgba(20,12,18,.72);backdrop-filter:blur(3px);}
.reel-sheet.on{display:flex;}
/* Цвет берём из --bg, а не из --card: такой переменной в наших стилях
НЕТ ВОВСЕ, и окно выходило прозрачным — текст читался поверх страницы.
Проверять надо не только вёрстку, но и то, что переменная существует. */
.reel-b{width:min(340px,86vw);background:var(--bg);border-radius:18px;padding:22px 20px;
box-shadow:0 20px 60px rgba(20,10,18,.45);text-align:center;
border:1px solid var(--line);}
.reel-t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px;}
.reel-bar{height:8px;border-radius:6px;background:var(--wa-soft);overflow:hidden;}
.reel-bar i{display:block;height:100%;width:0;background:var(--wa);
transition:width .25s linear;}
.reel-n{margin-top:12px;font-size:12px;line-height:1.5;color:var(--ink-3);}
.reel-x{margin-top:16px;padding:9px 16px;border:1px solid var(--line);background:transparent;
color:var(--ink-2);border-radius:9px;font:inherit;font-size:13px;cursor:pointer;}
.reel-min{margin-top:16px;margin-right:8px;padding:9px 16px;border:1px solid var(--wa);
background:var(--wa);color:#fff;border-radius:9px;font:inherit;font-size:13px;cursor:pointer;}
/* Свёрнутое окно: маленькая полоска внизу, чтобы не заслоняла работу,
но было видно, что запись идёт и сколько осталось. */
.reel-chip{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:59;
display:none;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;
background:var(--bg);border:1px solid var(--line);box-shadow:0 8px 24px rgba(20,10,18,.22);
font-size:12.5px;color:var(--ink);cursor:pointer;}
.reel-chip.on{display:flex;}
.reel-chip i{width:8px;height:8px;border-radius:50%;background:#E5484D;
animation:reelBlink 1.1s infinite;}
@keyframes reelBlink{0%,100%{opacity:1}50%{opacity:.25}}
/* Неактивная кнопка отвязки: видна, но не нажимается, когда привязывать
нечего. Так на экране всегда виден сам орган управления. */
.s-key-btn.off{opacity:.45;cursor:default;}
/* ПОЧЕМУ ПАМЯТЬ И ЗНАКОМСТВО. Первый блок раздела «О тебе».
Читается как письмо, а не как справка: строки просторные, ударные
слова жирным, ничего лишнего вокруг. */
.ml-why{margin:10px 2px 0;font-size:13px;line-height:1.6;color:var(--ink-2);}
.ml-why b{color:var(--ink);}
/* Объяснение линии в карточке разговора — один раз, мелким. */
/* ЛИНИЯ ЖИЗНИ ЧУЖОГО ЧЕЛОВЕКА В КАРТОЧКЕ. Та же подача, что и у своей
линии: слева номер дня, справа что случилось. Подробность раскрывается
нажатием, поэтому по умолчанию она свёрнута. */
.td-life{margin-top:14px;max-height:46vh;overflow-y:auto;}
.td-life-h{font-size:12px;color:var(--ink-3);text-transform:uppercase;
letter-spacing:.04em;margin-bottom:10px;}
.td-life-w{font-size:13px;color:var(--ink-3);padding:8px 0;}
.td-ev{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);}
.td-ev:last-child{border-bottom:none;}
.td-ev.can{cursor:pointer;}
.td-ev-d{flex:0 0 auto;min-width:56px;font-size:12px;color:var(--wa-deep);
font-variant-numeric:tabular-nums;padding-top:2px;}
.td-ev-b b{display:block;font-size:13.5px;line-height:1.4;color:var(--ink);font-weight:600;}
.td-ev-b span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3);}
.td-ev.near .td-ev-d{font-weight:700;}
.td-ev.near .td-ev-b span{color:var(--wa-deep);}
.td-ev-p{display:none;margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2);}
.td-ev-p.on{display:block;}
.ev-what{margin:8px 0 4px;font-size:11.5px;line-height:1.55;color:var(--ink-2);}
.ev-what a{display:inline-block;margin-top:5px;color:var(--ink-3);
text-decoration:underline;cursor:pointer;}
/* Шапка линии, когда даты рождения ещё нет: то же место, но вместо
числа — просьба. */
.mlnow-ask .mln-v{opacity:.35;}
.ml-meet{margin:16px 0 4px;padding:16px;border-radius:14px;
background:var(--wa-soft);border:1px solid var(--line);}
.ml-meet-h{font-size:14px;font-weight:700;color:var(--wa-deep);margin-bottom:12px;}
.ml-meet-r{margin-bottom:12px;}
.ml-meet-r label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:6px;}
.ml-meet-in{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
background:var(--bg);color:var(--ink);font:inherit;font-size:14px;box-sizing:border-box;}
.ml-meet-n{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--ink-3);}
.ml-meet-b{width:100%;padding:12px;border:none;border-radius:10px;
background:var(--wa);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.plan-cur{margin:0 0 14px;padding:12px 14px;border-radius:12px;
background:var(--wa-soft);color:var(--ink);font-size:13px;line-height:1.5;}
.plan-cur b{color:var(--wa-deep);}
.se-sizes{display:flex;gap:8px;margin:6px 0 16px;}
.se-sizes button{flex:1;padding:10px 6px;border:1px solid var(--line);
background:#fff;color:var(--ink);border-radius:10px;font:inherit;font-size:13px;
cursor:pointer;}
.se-sizes button.on{background:var(--wa);color:#fff;border-color:var(--wa);}
html[data-theme="dark"] .se-sizes button{background:var(--panel);color:var(--ink);}
html[data-theme="dark"] .se-sizes button.on{background:var(--wa);color:#fff;}
.se-lbl{font-size:12px;color:var(--ink-2);margin:14px 0 8px;display:flex;
align-items:baseline;justify-content:space-between}
.se-lbl b{font-size:12.5px;color:var(--wa-deep);font-weight:700}
.se-scale{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.se-sc-a{font-size:13px;color:var(--ink-2);flex:0 0 auto}
.se-sc-b{font-size:22px;color:var(--ink-2);flex:0 0 auto;line-height:1}
#se-scale{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;
border-radius:2px;background:var(--line);outline:none;margin:0}
#se-scale::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
background:var(--wa);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.22);cursor:pointer}
#se-scale::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--wa);
border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.22);cursor:pointer}
/* PT Serif — антиква с ПОЛНОЙ поддержкой якутского: все ҕ ҥ ө һ ү на месте.
Второй такой шрифт после Stengazeta. */
@font-face{font-family:'PTSerif';src:url('../fonts/PTSerif-Regular.woff2') format('woff2');
font-weight:400;font-display:swap}
@font-face{font-family:'PTSerif';src:url('../fonts/PTSerif-Bold.woff2') format('woff2');
font-weight:700 900;font-display:swap}
/* ===== ШТОРКА СОХРАНЕНИЯ ===== */
.save-sheet{position:absolute;inset:0;background:rgba(30,16,28,.55);
/* 4 СЕНТЯБРЯ, снимок хозяина: «когда с редактора качаешь, окно
появляется сзади». Так и было: шторка сохранения стояла на слое 140,
а просмотр кадра и редактор — на 150, и она уезжала под них.
Ставим её выше всего, что можно открыть до неё: скачивание — всегда
последний шаг, и оно обязано быть сверху.
8 сентября то же самое повторилось с готовым видео субтитров: оно
стоит на 181, шторка была на 170 — и уезжала под него. Поднимаем
выше всех окон, из которых вообще можно нажать «сохранить». */
z-index:200;
display:none;align-items:flex-end;justify-content:center;}
.save-sheet.on{display:flex;}
.save-sheet .ss-b{background:#fff;border-radius:18px 18px 0 0;padding:18px 16px
calc(20px + env(safe-area-inset-bottom,0));width:100%;max-height:82%;overflow:auto;}
.save-sheet .ss-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.save-sheet .ss-h b{font-size:17px;font-family:'Inter',sans-serif;color:var(--ink);}
.save-sheet .ss-x{border:none;background:transparent;font-size:17px;color:var(--ink-3);
cursor:pointer;padding:4px 6px;}
.save-sheet .ss-note{font-size:12.5px;color:var(--ink-3);margin-bottom:14px;}
.save-sheet .ss-main{display:block;width:100%;border:none;background:var(--wa);color:#fff;
border-radius:12px;padding:15px;font-size:15.5px;font-weight:700;font-family:'Inter',sans-serif;
cursor:pointer;margin-bottom:9px;}
.save-sheet .ss-alt{display:block;width:100%;border:1px solid var(--line);background:#fff;
color:var(--ink);border-radius:12px;padding:13px;font-size:14.5px;font-family:'Inter',sans-serif;
cursor:pointer;}
.save-sheet .ss-thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px;}
.save-sheet .ss-thumbs img{width:70px;height:88px;object-fit:cover;border-radius:9px;
border:1px solid var(--line);}
.save-sheet .ss-hint{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.4;}
/* Кнопка входа в настройки ключа — в общем списке настроек, а не в углу
поверх «отправить». */
.s-key-btn{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);
background:#fff;color:var(--ink);font-size:14.5px;font-family:'Inter',sans-serif;}
.s-key-btn:active{background:var(--panel);}
/* ===== ОКНО ВХОДА ===== */
.acc-sheet{position:absolute;inset:0;background:rgba(30,16,28,.55);z-index:150;
display:none;align-items:flex-end;justify-content:center;}
.acc-sheet.on{display:flex;}
.acc-sheet .acc-b{background:#fff;border-radius:18px 18px 0 0;width:100%;
padding:18px 16px calc(22px + env(safe-area-inset-bottom,0));max-height:88%;overflow:auto;}
.acc-sheet .acc-h{display:flex;align-items:center;justify-content:space-between;}
.acc-sheet .acc-h b{font-size:17px;font-family:'Inter',sans-serif;color:var(--ink);}
.acc-sheet .acc-x{border:none;background:transparent;font-size:17px;color:var(--ink-3);padding:4px 6px;}
.acc-sheet .acc-note{font-size:12.5px;color:var(--ink-3);margin:2px 0 16px;line-height:1.4;}
.acc-sheet input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--line);
background:var(--panel);font-size:16px;font-family:'Inter',sans-serif;margin-bottom:9px;}
.acc-sheet .acc-main{width:100%;padding:14px;border-radius:11px;border:none;background:var(--wa);
color:#fff;font-size:15.5px;font-weight:700;font-family:'Inter',sans-serif;}
.acc-sheet .acc-alt{width:100%;padding:11px;border-radius:11px;border:none;background:transparent;
color:var(--wa-deep);font-size:13.5px;font-family:'Inter',sans-serif;margin-top:6px;}
.acc-sheet .acc-or{text-align:center;font-size:12px;color:var(--ink-3);margin:12px 0;}
.acc-sheet .acc-mail-l{display:block;text-align:center;font-size:12.5px;color:var(--ink-3);margin:14px 0 2px;
cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:'Inter',sans-serif;}
.acc-sheet .acc-mail-l:hover{color:var(--ink-2,var(--ink));}
.acc-sheet #acc-mail-w{margin-top:12px;}
.acc-sheet #acc-gbtn{display:flex;justify-content:center;}
.acc-sheet .acc-err{display:none;font-size:12.5px;color:#C0392B;margin-top:10px;line-height:1.4;}
.s-acc-row{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.s-acc-row .s-key-btn{width:auto;padding:9px 16px;flex:0 0 auto;}
/* ===== СПРАВКА О ЧЕЛОВЕКЕ ===== */
.pv-sheet{position:absolute;inset:0;background:rgba(30,16,28,.6);z-index:145;
display:none;align-items:flex-end;justify-content:center;}
.pv-sheet.on{display:flex;}
.pv-sheet .pv-b{background:#fff;border-radius:18px 18px 0 0;width:100%;max-height:88%;
overflow:auto;padding:18px 16px calc(22px + env(safe-area-inset-bottom,0));}
.pv-sheet .pv-h{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pv-sheet .pv-h b{font-size:19px;font-family:'Inter',sans-serif;color:var(--ink);line-height:1.2;}
.pv-sheet .pv-x{border:none;background:transparent;font-size:17px;color:var(--ink-3);padding:4px 6px;}
.pv-sheet .pv-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px;}
.pv-sheet .pv-now{background:var(--wa-soft);border-radius:13px;padding:13px 14px;margin:14px 0 6px;}
.pv-sheet .pv-now-t{font-size:11px;letter-spacing:.6px;text-transform:uppercase;
color:var(--wa-deep);font-weight:700;margin-bottom:5px;}
.pv-sheet .pv-now b{font-size:15px;line-height:1.35;color:var(--ink);}
.pv-sheet .pv-now-d{font-size:12px;color:var(--ink-3);margin-top:5px;}
.pv-sheet .pv-about{font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:10px;
border-top:1px solid rgba(0,0,0,.06);padding-top:10px;}
.pv-sheet .pv-list{margin-top:12px;}
.pv-sheet .pv-ev{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);}
.pv-sheet .pv-ev:last-child{border-bottom:0;}
.pv-sheet .pv-ev.near{background:var(--wa-soft);border-radius:9px;padding:9px 10px;border-bottom:0;}
.pv-sheet .pv-d{flex:0 0 58px;font-size:12px;font-weight:700;color:var(--wa-deep);
font-variant-numeric:tabular-nums;padding-top:2px;}
.pv-sheet .pv-ev b{display:block;font-size:14px;line-height:1.35;font-weight:600;}
.pv-sheet .pv-ev span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;}
.pv-sheet .pv-src{display:block;margin-top:14px;font-size:13px;color:var(--wa-deep);}
.pv-sheet .pv-load,.pv-sheet .pv-err{font-size:13px;color:var(--ink-3);padding:14px 0;}
.td-more{width:100%;margin-top:10px;padding:12px;border-radius:11px;border:1px solid var(--line);
background:#fff;color:var(--ink);font-size:14px;font-family:'Inter',sans-serif;}
/* ===== ВЫБОР КАДРА ДЛЯ КРУЖКА ===== */
.avc-sheet{position:absolute;inset:0;background:rgba(30,16,28,.6);z-index:160;
display:none;align-items:center;justify-content:center;padding:16px;}
.avc-sheet.on{display:flex;}
.avc-sheet .avc-b{background:#fff;border-radius:18px;width:100%;max-width:340px;padding:18px 16px 20px;}
.avc-sheet .avc-h{display:flex;align-items:center;justify-content:space-between;}
.avc-sheet .avc-h b{font-size:17px;font-family:'Inter',sans-serif;}
.avc-sheet .avc-x{border:none;background:transparent;font-size:17px;color:var(--ink-3);padding:4px 6px;}
.avc-sheet .avc-note{font-size:12.5px;color:var(--ink-3);margin:2px 0 14px;}
.avc-sheet .avc-win{position:relative;width:100%;max-width:280px;margin:0 auto;
aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--panel);
touch-action:none;cursor:grab;}
.avc-sheet .avc-win:active{cursor:grabbing;}
.avc-sheet #avc-cv{display:block;width:100%;height:100%;}
.avc-sheet .avc-mask{position:absolute;inset:0;border-radius:50%;pointer-events:none;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
.avc-sheet #avc-zoom{width:100%;margin:16px 0 4px;accent-color:var(--wa);}
.avc-sheet .avc-main{width:100%;padding:14px;border-radius:11px;border:none;background:var(--wa);
color:#fff;font-size:15.5px;font-weight:700;font-family:'Inter',sans-serif;margin-top:8px;}
/* Ряд «загрузить · скачать все» над списком разговоров убран 15 августа:
вошедшему разговоры сохраняет сервер. Правила оставлены — на .cl-load
ссылается кнопка загрузки внутри самого разговора. */
.cl-row{display:flex;gap:9px;}
.cl-row .cl-load{flex:1;}
/* ===== ВЫБОР ОБЛАСТИ НАД ЛЕНТОЙ ===== */
.fld-rail{padding:14px 16px 4px;}
.fld-t{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3);
font-weight:700;margin-bottom:8px;}
/* Кнопки переносятся по строкам, а не едут вбок.
Боковая прокрутка внутри страницы, которая сама прибита к экрану,
на телефоне не работала: палец двигал не ряд, а ничего. Половина
областей оставалась за краем, и выбрать их было нельзя. Перенос
по строкам работает всегда и показывает сразу все. */
.fld-btns{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:4px;}
.fld-b{flex:0 0 auto;padding:8px 13px;border-radius:999px;border:1px solid var(--line);
background:#fff;color:var(--ink-2);font-size:12.5px;font-family:'Inter',sans-serif;
white-space:nowrap;}
.fld-b.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);font-weight:700;}
/* Выбор области на втором экране первого входа */
.ob-fld{margin:22px 0 6px;text-align:left;}
.ob-fld-t{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.ob-fld-h{font-size:12px;color:var(--ink-3);line-height:1.4;margin-bottom:10px;}
.ob-fld-btns{display:flex;flex-wrap:wrap;gap:7px;}
.ob-fld-b{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
color:var(--ink-2);font-size:13px;font-family:'Inter',sans-serif;}
.ob-fld-b.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);font-weight:700;}
/* ===== ПРОСМОТР ВЛОЖЕНИЙ ИЗ РАЗГОВОРА ===== */
.cmsg-att{cursor:zoom-in;}
.cmsg-v{cursor:zoom-in;}
.catt-view{position:absolute;inset:0;background:rgba(18,10,16,.94);z-index:170;
display:none;flex-direction:column;align-items:center;justify-content:center;}
.catt-view.on{display:flex;}
.catt-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
border:none;background:rgba(255,255,255,.16);color:#fff;font-size:17px;z-index:2;}
.catt-body{flex:1;display:flex;align-items:center;justify-content:center;
width:100%;padding:56px 14px 8px;}
.catt-body img,.catt-body video{max-width:100%;max-height:100%;border-radius:12px;display:block;}
/* Зум пальцами (30 августа): жесты берём на себя, браузеру не отдаём. */
.catt-body{touch-action:none;overflow:hidden;}
.catt-body img{transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.pe-zoom{touch-action:none;overflow:hidden;}
.pe-zoom img{transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;}
.catt-bar{display:flex;align-items:center;gap:18px;padding:12px 0 calc(20px + env(safe-area-inset-bottom,0));}
.catt-bar button{width:42px;height:42px;border-radius:50%;border:none;
background:rgba(255,255,255,.14);color:#fff;font-size:20px;}
.catt-bar span{color:rgba(255,255,255,.75);font-size:13px;min-width:52px;text-align:center;}
/* Карточка тренда — отличается меткой, не цветом: ряд должен читаться ровно */
.fr-card.trend{border-color:var(--wa);}
.fr-y i{font-style:normal;color:var(--wa-deep);font-weight:700;}
/* Ник именинника: ссылка, а не украшение — по ней проверяют аккаунт */
.bd-ig{margin:8px 0 2px;}
.bd-ig a{font-size:14px;font-weight:700;color:var(--wa-deep);text-decoration:none;}
.bd-ig span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.35;}
.pcard-ig{font-size:11px;color:var(--wa-deep);margin-top:3px;font-weight:600;}
/* ===== ВЫБОР ЯЗЫКА ===== */
.lang-sheet{position:absolute;inset:0;background:rgba(30,16,28,.55);z-index:155;
display:none;align-items:flex-end;justify-content:center;}
.lang-sheet.on{display:flex;}
.lang-sheet .lang-b{background:#fff;border-radius:18px 18px 0 0;width:100%;max-height:80%;
overflow:auto;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0));}
.lang-sheet .lang-h{display:flex;align-items:center;justify-content:space-between;}
.lang-sheet .lang-h b{font-size:17px;font-family:'Inter',sans-serif;}
.lang-sheet .lang-x{border:none;background:transparent;font-size:17px;color:var(--ink-3);padding:4px 6px;}
.lang-sheet .lang-note{font-size:12.5px;color:var(--ink-3);margin:2px 0 14px;}
.lang-sheet .lang-list{display:flex;flex-wrap:wrap;gap:8px;}
.lang-sheet .lang-i{padding:11px 15px;border-radius:11px;border:1px solid var(--line);
background:#fff;color:var(--ink);font-size:14px;font-family:'Inter',sans-serif;}
.lang-sheet .lang-i.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);font-weight:700;}
/* ===== ТАРИФЫ ===== */
.plan-sheet{position:absolute;inset:0;background:rgba(30,16,28,.55);z-index:158;
display:none;align-items:flex-end;justify-content:center;}
.plan-sheet.on{display:flex;}
.plan-sheet .plan-b{background:#fff;border-radius:18px 18px 0 0;width:100%;max-height:88%;
overflow:auto;padding:18px 16px calc(22px + env(safe-area-inset-bottom,0));}
.plan-sheet .plan-h{display:flex;align-items:center;justify-content:space-between;}
.plan-sheet .plan-h b{font-size:17px;font-family:'Inter',sans-serif;}
.plan-sheet .plan-x{border:none;background:transparent;font-size:17px;color:var(--ink-3);padding:4px 6px;}
.plan-sheet .plan-why{display:none;background:var(--wa-soft);border-radius:12px;padding:12px 13px;
font-size:13px;color:var(--ink-1);line-height:1.45;margin:12px 0 4px;}
.plan-sheet .plan-list{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.plan-sheet .plan-i{border:1px solid var(--line);border-radius:14px;padding:14px;}
.plan-sheet .plan-i.on{border-color:var(--wa);background:var(--wa-soft);}
.plan-sheet .plan-n{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
.plan-sheet .plan-n i{font-style:normal;font-size:11px;font-weight:700;color:var(--wa-deep);
background:#fff;border:1px solid var(--wa);border-radius:999px;padding:2px 8px;}
.plan-sheet .plan-p{font-size:13px;color:var(--ink-3);margin-top:2px;}
.plan-sheet .plan-i ul{margin:10px 0 0;padding-left:18px;}
.plan-sheet .plan-i li{font-size:13px;color:var(--ink-2);line-height:1.5;}
.plan-sheet .plan-buy{margin-top:12px;width:100%;padding:12px;border-radius:11px;border:none;
background:var(--wa);color:#fff;font-size:14.5px;font-weight:700;font-family:'Inter',sans-serif;}
.plan-sheet .plan-note{font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:14px;}
/* ===== ОБРЕЗКА ВИДЕО ===== */
.vt-sheet{position:absolute;inset:0;background:rgba(18,10,16,.92);z-index:175;
display:none;align-items:center;justify-content:center;padding:14px;}
.vt-sheet.on{display:flex;}
.vt-sheet .vt-b{width:100%;max-width:360px;}
.vt-sheet .vt-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.vt-sheet .vt-h b{color:#fff;font-size:17px;font-family:'Inter',sans-serif;}
.vt-sheet .vt-x{border:none;background:rgba(255,255,255,.14);color:#fff;width:34px;height:34px;
border-radius:50%;font-size:15px;}
.vt-sheet .vt-win{width:100%;aspect-ratio:9/16;max-height:52vh;border-radius:14px;overflow:hidden;
background:#000;display:flex;align-items:center;justify-content:center;}
.vt-sheet #vt-v{width:100%;height:100%;object-fit:contain;display:block;}
.vt-sheet .vt-time{display:flex;align-items:center;justify-content:space-between;
color:rgba(255,255,255,.7);font-size:12px;margin:12px 2px 6px;}
.vt-sheet .vt-time b{color:#fff;font-size:14px;}
.vt-sheet .vt-bar{position:relative;height:38px;border-radius:10px;background:rgba(255,255,255,.14);
touch-action:none;}
.vt-sheet .vt-sel{position:absolute;top:0;bottom:0;background:rgba(199,125,168,.55);
border-top:2px solid #fff;border-bottom:2px solid #fff;}
.vt-sheet .vt-h1,.vt-sheet .vt-h2{position:absolute;top:-4px;width:16px;height:46px;margin-left:-8px;
border-radius:6px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.vt-sheet .vt-hint{color:rgba(255,255,255,.6);font-size:12px;line-height:1.4;margin:10px 2px 0;}
.vt-sheet .vt-row{display:flex;gap:9px;margin-top:14px;}
.vt-sheet .vt-all{flex:0 0 auto;padding:13px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.25);
background:transparent;color:#fff;font-size:14px;font-family:'Inter',sans-serif;}
.vt-sheet .vt-ok{flex:1;padding:13px;border-radius:11px;border:none;background:var(--wa);
color:#fff;font-size:15.5px;font-weight:700;font-family:'Inter',sans-serif;}
/* ---------- админка: люди и тарифы ---------- */
.adm-list{margin-top:12px;max-height:56vh;overflow:auto}
.adm-note{padding:14px 2px;color:#8b7b86;font-size:13px}
.adm-card{padding:11px 0;border-bottom:1px solid #f0e8ee}
.adm-card:last-child{border-bottom:0}
.adm-who{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.adm-who b{font-size:14px;word-break:break-word}
.adm-who span{font-size:12px;color:#8b7b86}
.adm-btns{display:flex;gap:6px;flex-wrap:wrap}
.adm-btns button{flex:1;min-width:74px;padding:8px 6px;border:0;border-radius:8px;
background:#f3ecf1;color:#5b4a56;font-size:12.5px;font-weight:600;cursor:pointer}
.adm-btns button/* Кулубата — тариф без пределов. Отделён чертой слева, чтобы его не
нажали вместо соседнего Про (5 сентября). */
.adm-own{background:#efe7f6;color:#5a3f72;margin-left:8px;
border-left:3px solid #b79ad0 !important}
.adm-off{background:#fdeceb;color:#7d2f28}
/* ---------- ссылки на документы в настройках ---------- */
/* ДОКУМЕНТЫ — СПИСКОМ, А НЕ КУЧЕЙ.
16 августа. Пять ссылок стояли подряд с мелким отступом, разной длины,
без разделителей — снизу панели это выглядело как обрывок текста,
а не как список, по которому ведут пальцем.
Теперь строка на ссылку во всю ширину, тонкая черта между, стрелка
справа. Заодно палец попадает: было девять точек высоты на ссылку,
стало сорок четыре — ровно столько, сколько нужно для касания. */
.s-docs{display:flex;flex-direction:column;margin:8px 0 18px;
border-top:1px solid var(--line);}
.s-docs a{display:flex;align-items:center;justify-content:space-between;gap:10px;
min-height:50px;padding:14px 4px;font-size:14px;color:var(--ink);
text-decoration:none;border-bottom:1px solid var(--line);}
.s-docs a span{color:var(--ink-3);font-size:16px;line-height:1;}
.s-docs a:active{background:var(--wa-soft);}
.s-docs-org{font-size:12px;color:var(--ink-3);margin:0 0 16px;text-align:center;}
/* ВОЗДУХ МЕЖДУ РАЗДЕЛАМИ НАСТРОЕК.
16 августа. Заголовки разделов шли впритык к предыдущему полю: «Откуда
ты», «Язык приложения», «Оформление» слипались в сплошную ленту, и глазу
не за что было зацепиться. Правило то же, что в «Памяти»: перед
заголовком воздух и тонкая черта, после — содержимое вплотную. */
/* Свой отступ у .grp — 16px сверху и 18 по бокам; черта должна идти
во всю ширину панели, поэтому боковые поля снимаем и возвращаем
их самому тексту. */
.pb .grp{margin:24px 0 0;padding:18px 18px 6px;border-top:1px solid var(--line);}
.pb .grp:first-of-type{margin-top:4px;padding-top:6px;border-top:none;}
/* ---------- зачем этот экран ---------- */
/* Блок .insp-why («О ком рассказать сегодня») удалён 14 августа вместе
с заголовком: он обещал людей, а экран стал про поводы. */
/* ---------- экран загрузки (4 сентября) ---------- */
/* Прячем ВСЁ, кроме самой заставки: на настольном боковые панели лежат
вне рамки телефона, и правило только для #phone их не закрывало. */
html.boot body > *:not(.boot-splash){visibility:hidden}
.boot-splash{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
background:var(--bg);}
html.boot .boot-splash{display:flex;animation:bootIn .2s ease-out .25s both;}
.boot-splash img{width:72px;height:72px;animation:bootPulse 1.4s ease-in-out infinite;}
@keyframes bootIn{from{opacity:0}to{opacity:1}}
@keyframes bootPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
html[data-theme="dark"] .boot-splash img{filter:brightness(0) invert(1);opacity:.9}
/* Телефон в тёмной теме — заставка тёмная, даже если приложение светлое
(22 сентября). Цвет тот же, что у фона тёмной темы. Красим и сам лист
под заставкой: пока она проявляется (первые четверть секунды), видно
именно его. */
html.boot.boot-dark, html.boot.boot-dark body{background:#1A1A18}
html.boot-dark .boot-splash{background:#1A1A18}
html.boot-dark .boot-splash img{filter:brightness(0) invert(1);opacity:.9}
/* ---------- сколько экранов: ползунок до сборки ---------- */
/* Поле «Что поправить?» в окне пересборки (3 сентября). Правила стоят
ОТДЕЛЬНО, а не внутри .carask-r: в первый раз я вложил их прямо в
правило ползунка, css вложенности здесь не понимает, и поле осталось
без стилей — узкая рамка сбоку от подписи. */
.carask-fixl{display:block;margin:14px 0 6px;font-size:13px;color:var(--ink-2);font-weight:600;}
.carask-fix{display:block;width:100%;box-sizing:border-box;border:1px solid var(--line);
border-radius:12px;padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);
background:var(--bg-2);resize:vertical;}
.carask-fix:focus{outline:none;border-color:var(--wa);}
.carask-n{text-align:center;margin:6px 0 2px;}
.carask-n span{font-family:'Inter',sans-serif;font-size:56px;font-weight:800;
line-height:1;color:var(--wa-deep);}
.carask-r{-webkit-appearance:none;appearance:none;width:100%;height:34px;
background:transparent;margin:2px 0 0;}
.carask-r::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#EDE3EA;}
.carask-r::-moz-range-track{height:6px;border-radius:3px;background:#EDE3EA;}
/* Кружок крупный: его тянут пальцем, и мелкий не поймать */
.carask-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
width:30px;height:30px;border-radius:50%;background:var(--wa);
border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.22);margin-top:-12px;}
.carask-r::-moz-range-thumb{width:30px;height:30px;border-radius:50%;
background:var(--wa);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.22);}
.carask-ends{display:flex;justify-content:space-between;
font-size:12px;color:var(--ink-3);margin:-2px 2px 0;}
.carask-note{text-align:center;font-size:13px;color:var(--ink-2);
min-height:34px;margin:10px 0 14px;line-height:1.4;}
/* ---------- «+» в конце ленты слайдов ---------- */
/* Плитка в конце ленты: теперь две кнопки одна над другой — дописать
рассказ и добавить пустой экран. Столбиком, а не рядом: ширина плитки
равна слайду, и вдвоём по горизонтали они стали бы нечитаемыми. */
.car-add-cell{display:flex;align-items:stretch;flex-direction:column;gap:8px;}
/* flex:1 вместо min-height:100%. Прежнее правило требовало полной высоты
плитки от КАЖДОЙ кнопки: пока их было две, вторая уезжала за низ ленты
и тянула за собой всю карусель. Кнопка теперь одна, но правило чинится
всё равно — иначе грабли дождутся следующей. */
.car-add{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;width:100%;flex:1;min-height:0;padding:14px 10px;cursor:pointer;
background:#FAF6F9;border:2px dashed #E0CFDA;border-radius:14px;color:var(--wa-deep);}
.car-add:active{background:#F3E9EF;}
.car-add-p{font-size:34px;line-height:1;font-weight:300;}
/* Дописать рассказ — главное из двух: залито, а не пунктиром. Пустой экран
под своё фото нужен реже, и он остаётся наброском. */
.car-add-go{background:var(--wa-soft);border-style:solid;border-color:#E3D2DE;}
.car-add-go:active{background:#EFDFEC;}
.car-add-go .car-add-p{font-size:24px;}
.car-add-go .car-add-t{color:var(--wa-deep);font-weight:700;}
.car-add-t{font-size:12px;line-height:1.35;text-align:center;color:var(--ink-2);}
/* ---------- перетаскивание кадра в просмотрщике ---------- */
#car-view-img.movable{cursor:grab;touch-action:none;}
#car-view-img.movable:active{cursor:grabbing;}
/* Ползунок приближения убран 18 августа — кадр двигают пальцем.
Осталась только подсказка сверху. */
.car-view-pos{display:flex;align-items:center;justify-content:center;gap:10px;
flex-wrap:wrap;margin:8px 14px 0;font-size:12.5px;color:rgba(255,255,255,.82);
text-align:center;}
.car-view-pos button{padding:6px 12px;border:0;border-radius:8px;
background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;cursor:pointer;}
.car-view-pos button:active{background:rgba(255,255,255,.28);}
/* ---------- приближение фото в просмотрщике ---------- */
/* Щипок не должен листать страницу, пока крутим кадр */
#car-view-img{touch-action:none;}
/* Полоска «скажи дату рождения» над строкой ввода. Живёт в потоке, а не
поверх: всплывающее окно посреди разговора раздражает сильнее, чем
помогает, а эту человек прочтёт между делом и закроет одним нажатием. */
.bday-ask{display:flex;align-items:center;gap:8px;margin:0 10px 8px;padding:9px 10px 9px 13px;
background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:13px;}
.bday-ask .ba-t{flex:1;font-size:12.5px;line-height:1.35;color:var(--wa-deep);font-weight:600;}
.bday-ask .ba-go{flex:0 0 auto;border:none;border-radius:9px;background:var(--wa);color:#fff;
font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;cursor:pointer;}
.bday-ask .ba-go:active{background:var(--wa-deep);}
.bday-ask .ba-x{flex:0 0 auto;border:none;background:none;color:var(--ink-3);font-size:15px;
padding:2px 4px;cursor:pointer;line-height:1;}
/* Снимок в плашке «запомнил о тебе»: человек должен увидеть, КАКОЙ кадр
встал на карточку, — обрезка по центру не всегда попадает в лицо. */
.ev-added .ms-face{display:block;width:56px;height:56px;border-radius:50%;
object-fit:cover;margin:2px 0 8px;border:2px solid #fff;
box-shadow:0 1px 6px rgba(30,16,28,.18);}
/* Три шрифта заголовков, добавленные 14 августа.
Onest и Unbounded — открытая лицензия SIL OFL, файлы лицензий лежат рядом
в папке fonts. Bolyar прислан хозяином проекта.
Формат woff2: он вдвое легче ttf, а поддерживают его все браузеры, до
которых нам есть дело. Onest и Unbounded весят по 6–12 Кб, потому что
это кириллический срез, а не всё семейство. */
@font-face{
font-family:'Onest';
src:url('../fonts/Onest-Regular.woff2') format('woff2');
font-weight:400; font-display:swap;
}
/* Onest-Bold удалён 30 сентября: Onest убран из выбора 5 сентября, а место в сборке (100 файлов) нужно образцу одежды. */
/* Unbounded убран 14 августа: якутских букв в нём нет, а для заголовков
карусели хватает Stengazeta и Montserrat. Файл шрифта тоже удалён. */
@font-face{
font-family:'Bolyar';
src:url('../fonts/FMBolyarPro-500.woff2') format('woff2');
font-weight:500; font-display:swap;
}
/* ===== NOTO SANS =====
20 августа. Имя «Noto Sans» стояло в запасной цепочке по всему
приложению — в тридцати восьми местах вида «'Inter', "Noto Sans",
sans-serif». Смысл цепочки простой: не нашлось якутской буквы в
основном шрифте — возьми её отсюда.
Только самого файла не было. Ни в fonts, ни в @font-face. Браузер
спокойно пропускал незнакомое имя и брал системный шрифт, а в системном
ҕ ҥ ө һ ү может не быть вовсе — тогда на их месте пустые прямоугольники
либо буквы из третьего шрифта, разной толщины внутри одного слова.
Запас, который был написан и не работал.
Проверил файлы по таблице глифов: все шесть якутских букв на месте,
в обоих начертаниях. Лицензия Apache 2.0, вшивать можно.
Курсив объявлен, хотя сегодня им никто не пользуется: браузер качает
только то начертание, которое понадобилось, — лежать оно ничего
не стоит, а понадобится завтра. */
@font-face{
font-family:'Noto Sans';
src:url('../fonts/NotoSans-Regular.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Noto Sans';
src:url('../fonts/NotoSans-Bold.woff2') format('woff2');
font-weight:700 900; font-style:normal; font-display:swap;
}
/* Курсивов Noto больше нет. Интерфейс набран Inter, а холст курсивом
не рисует ни в одном стиле — эти два файла (241 КБ) качались зря. */
/* Карточка «впиши дату рождения» на месте счётчика дней. Пунктир вместо
сплошной рамки: видно, что место пустует и ждёт заполнения. */
.self-card.self-ask{border-style:dashed;border-color:var(--wa);background:#fff;}
.self-card.self-ask .kin-i b{color:var(--wa-deep);}
/* Полоска «поставь на экран». Живёт над строкой ввода, в потоке, а не
поверх: всплывающее окно посреди разговора раздражает сильнее, чем
помогает. Скрыта, пока не заслужена — класс on ставит insPaint. */
.ins-bar{display:none;margin:0 10px 8px;padding:9px 10px 9px 13px;
background:var(--wa-soft);border:1px solid #EBD9E6;border-radius:13px;}
.ins-bar.on{display:block;}
.ins-bar .ins-row{display:flex;align-items:center;gap:8px;}
.ins-bar .ins-t{flex:1;font-size:12.5px;line-height:1.35;color:var(--wa-deep);font-weight:600;}
.ins-bar .ins-go{flex:0 0 auto;border:none;border-radius:9px;background:var(--wa);color:#fff;
font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;cursor:pointer;}
.ins-bar .ins-go:active{background:var(--wa-deep);}
.ins-bar .ins-x{flex:0 0 auto;border:none;background:none;color:var(--ink-3);font-size:15px;
padding:2px 4px;cursor:pointer;line-height:1;}
.ins-bar .ins-how{margin-top:8px;font-size:12px;line-height:1.45;color:var(--ink-2);}
/* Единственная кнопка пустого экрана. Крупнее и заметнее обычной подсказки:
это не «одно из», а то самое, что человек должен сделать первым. */
.chat-chip.chip-go{background:var(--wa);color:#fff;font-size:14px;font-weight:700;
padding:11px 20px;box-shadow:0 2px 10px rgba(199,125,168,.35);}
.chat-chip.chip-go:active{background:var(--wa-deep);opacity:1;}
/* Облачко-подсказка над «плюсом».
Хвостик снизу слева — треугольник из повёрнутого квадрата, направлен
ровно в кнопку. Лёгкое покачивание привлекает взгляд, но не мельтешит:
две секунды на ход и пауза между ними.
Скрыто по умолчанию, класс on ставит tipPlusPaint. */
/* Отсчёт от строки ввода: облачко и меню теперь внутри неё, и «bottom:100%»
означает «сразу над строкой», а не «над всей нижней частью экрана». */
.aiyy-input{position:relative;}
/* На телефоне кнопки в углу не нужны: панели сбоку нет, тариф живёт
в настройках. Прячем по умолчанию, монитор включает своим правилом. */
#h-widgets{display:none;}
.h-plan{border:1px solid var(--wa);background:transparent;color:var(--wa);
font:600 12.5px/1 'Inter',sans-serif;padding:7px 11px;border-radius:9px;
cursor:pointer;white-space:nowrap;}
.h-plan:hover{background:var(--wa-soft);}
/* Облачко «Начни с фото» — нашим розовым, а не чёрным.
16 августа. Оно было почти чёрным, как системная подсказка телефона, —
и на первом же экране рядом с розовой кнопкой «Войти» выглядело чужим,
будто это не наша часть, а всплывшее сообщение браузера.
Это первое, что видит новый человек. Цвет тут работает не украшением,
а признаком: своё или чужое. */
.tip-plus{display:none;position:absolute;left:6px;bottom:100%;margin-bottom:9px;
background:var(--wa);color:#fff;font-size:12.5px;font-weight:600;
padding:8px 13px;border-radius:13px;cursor:pointer;white-space:nowrap;
box-shadow:0 4px 14px rgba(199,125,168,.38);z-index:6;}
.tip-plus.on{display:block;animation:tipBob 2.4s ease-in-out infinite;}
/* Хвостик облачка смотрит ровно на плюс. Кнопка стоит у левого края
строки, поэтому и хвостик слева. */
.tip-plus::after{content:'';position:absolute;left:14px;bottom:-4px;width:10px;height:10px;
background:var(--wa);transform:rotate(45deg);border-radius:2px;}
@keyframes tipBob{
0%,72%,100%{transform:translateY(0)}
82%{transform:translateY(-5px)}
92%{transform:translateY(0)}
}
/* Кнопка «Обрезать» на плитке длинного ролика. Раньше вместо неё на каждый
ролик само открывалось окно обрезки — даже на пятисекундный, где резать
нечего. Теперь предложение видно, но не мешает. */
.chat-att-i .chat-att-cut{position:absolute;left:4px;bottom:4px;width:20px;height:20px;
border:none;border-radius:50%;background:rgba(30,16,28,.8);color:#fff;font-size:11px;
line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.chat-att-i .chat-att-cut:active{background:rgba(30,16,28,.95);}
/* ---------- обратная связь ---------- */
.fb-sheet{position:fixed;inset:0;z-index:400;display:none;align-items:flex-end;
justify-content:center;background:rgba(30,16,28,.45);}
.fb-sheet.on{display:flex;}
.fb-box{width:100%;max-width:420px;background:#fff;border-radius:18px 18px 0 0;
padding:16px 16px calc(18px + env(safe-area-inset-bottom,0));
max-height:86vh;overflow-y:auto;}
.fb-box.wide{max-width:520px;}
.fb-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.fb-h b{font-family:'Inter',sans-serif;font-size:19px;font-weight:800;
letter-spacing:-.01em;color:var(--ink);}
.fb-x{border:none;background:var(--wa-soft);color:var(--wa-deep);width:30px;height:30px;
border-radius:50%;font-size:14px;cursor:pointer;}
.fb-note{font-size:13px;line-height:1.5;color:var(--ink-2);margin-bottom:12px;}
.fb-box textarea,.fb-box input{width:100%;border:1px solid var(--line);border-radius:12px;
padding:11px 12px;font-family:inherit;font-size:14.5px;color:var(--ink);outline:none;
margin-bottom:9px;resize:vertical;}
.fb-box textarea:focus,.fb-box input:focus{border-color:var(--wa);}
.fb-err{min-height:16px;font-size:12.5px;color:#B4453C;margin-bottom:4px;}
.fb-send{width:100%;border:none;border-radius:12px;background:var(--wa);color:#fff;
font-family:inherit;font-size:15px;font-weight:700;padding:13px;cursor:pointer;}
.fb-send:active{background:var(--wa-deep);}
.fb-send:disabled{opacity:.6;}
.fba-list{font-size:13.5px;color:var(--ink);}
.fba-i{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:9px;}
.fba-i.seen{opacity:.5;}
.fba-m{font-size:11.5px;color:var(--ink-3);margin-bottom:5px;}
.fba-t{line-height:1.5;white-space:pre-wrap;}
.fba-i button{margin-top:8px;border:1px solid var(--wa);background:#fff;color:var(--wa-deep);
border-radius:9px;padding:5px 11px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}
/* Сводка в админской панели: плитки с числами. */
.adm-stat{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px;}
.adm-stat .adm-cell{flex:1 1 auto;min-width:82px;background:var(--wa-soft);
border:1px solid #EBD9E6;border-radius:11px;padding:8px 10px;
font-size:11px;color:var(--ink-2);line-height:1.25;}
.adm-stat .adm-cell b{display:block;font-family:'Inter',sans-serif;font-size:19px;
font-weight:800;color:var(--wa-deep);letter-spacing:-.02em;}
/* Выбор качества видео перед записью. */
.cvq-i{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;
border-radius:12px;padding:11px 13px;margin-bottom:9px;cursor:pointer;font-family:inherit;}
.cvq-i.on{border-color:var(--wa);background:var(--wa-soft);}
.cvq-i b{display:block;font-size:15px;font-weight:700;color:var(--ink);}
.cvq-i span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;}
.cvq-i i{display:block;font-size:12px;color:var(--wa-deep);font-style:normal;margin-top:4px;font-weight:700;}
/* Меню «плюса»: фото и видео, файл, пустая карусель.
Всплывает над кнопкой, а не поверх экрана: путь от плюса до пункта
короткий, и видно, откуда оно взялось. */
/* Цвет фона — переменной, а не белым намертво. 23 августа: в тёмной
теме меню оставалось белым пятном посреди тёмного приложения, потому
что здесь стояло #fff. --panel темнеет вместе со всем остальным. */
.plus-menu{display:none;position:absolute;left:4px;bottom:100%;margin-bottom:10px;z-index:8;
background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px;
box-shadow:0 10px 30px rgba(30,16,28,.16);min-width:212px;
transform-origin:left bottom;}
/* Появляется с ростом от плюса, а не возникает из ниоткуда: так видно,
что меню принадлежит именно этой кнопке. */
.plus-menu.on{display:block;animation:plusIn .16s cubic-bezier(.2,.9,.3,1.2);}
@keyframes plusIn{from{opacity:0;transform:scale(.92) translateY(6px)}
to{opacity:1;transform:scale(1) translateY(0)}}
.plus-menu button{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;
font-family:inherit;font-size:14.5px;color:var(--ink-1);padding:11px 12px;border-radius:11px;
cursor:pointer;text-align:left;}
.plus-menu button:active{background:var(--wa-soft);}
/* Значки того же цвета, что и текст, но приглушённые: они помогают найти
строку взглядом и не должны перетягивать внимание на себя. */
.plus-menu button svg{width:19px;height:19px;flex:0 0 19px;color:var(--wa-deep);opacity:.75;}
/* Пояснение под полем почты: про российские ящики и про то, что письмо
на зарубежные часто не доходит. */
.acc-tip{font-size:12px;line-height:1.45;color:var(--ink-3);margin:-4px 0 10px;}
/* Поле «за чем следишь» под кнопками областей. */
.wch{margin:14px 16px 4px;}
.wch input{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
font-family:inherit;font-size:14px;color:var(--ink);outline:none;background:#fff;}
.wch input:focus{border-color:var(--wa);}
.wch-h{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.wch-h button{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;
padding:5px 11px;font-family:inherit;font-size:12px;cursor:pointer;}
.wch-h button:active{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);}
.wch-n{font-size:11.5px;color:var(--ink-3);margin-top:7px;}
/* ПРЕДУПРЕЖДЕНИЕ ОБ ОШИБКАХ.
Стоит под строкой поиска — там, где человек уже смотрит, и до того, как
он начнёт верить карточкам. Приглушено нарочно: пугать нечем, но и
прятать нельзя. Всё, что ниже, придумано моделью, и часть этого будет
неправдой — имена, даты, цифры. */
.wch-warn{font-size:11px;color:var(--ink-3);margin-top:8px;line-height:1.45;opacity:.85}
/* Строка поиска над новостями — на месте прежнего ряда из тринадцати кнопок. */
.wch{margin:6px 16px 2px;}
.wch-row{display:flex;gap:8px;}
.wch-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;
padding:11px 13px;font-family:inherit;font-size:14.5px;color:var(--ink);outline:none;background:#fff;}
.wch-row input:focus{border-color:var(--wa);}
.wch-go{flex:0 0 auto;border:none;border-radius:12px;background:var(--wa);color:#fff;
font-family:inherit;font-size:14px;font-weight:700;padding:0 16px;cursor:pointer;}
.wch-go:active{background:var(--wa-deep);}
/* Вторая строка в пустом окружении — про детей. Тише основной: это
не главное, а напоминание, что и такое можно. */
.kin-empty .kin-empty-2{display:inline-block;margin-top:6px;color:var(--ink-3);}
.kin-empty .kin-empty-2 a{color:var(--wa-deep);}
/* Главная кнопка в подсказке про отсутствие фото — «Найти картинки».
Остальные рядом остаются запасным путём, поэтому светлые. */
.car-styletip-b button.prim{background:var(--wa);border-color:var(--wa);color:#fff;}
.car-styletip-b button.prim:active{background:var(--wa-deep);}
/* Снимок из профиля в вопросе «ты в кадре?» — человек должен видеть,
какое именно лицо пойдёт в дело. */
.cf-face{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;
margin:2px auto 14px;border:2px solid #fff;box-shadow:0 2px 10px rgba(30,16,28,.2);}
.fb-send.light{background:#fff;color:var(--wa-deep);border:1px solid var(--wa);margin-top:8px;}
.fb-send.light:active{background:var(--wa-soft);}
/* Кнопки в окне хода работы: свернуть и отменить. */
.cv-prog-row{display:flex;gap:8px;margin-top:14px;}
.cv-prog-row button{flex:1;border-radius:10px;padding:9px;font-family:inherit;
font-size:13px;font-weight:700;cursor:pointer;}
.cv-prog-min{border:1px solid var(--wa);background:#fff;color:var(--wa-deep);}
.cv-prog-stop{border:1px solid var(--line);background:#fff;color:var(--ink-2);}
.cv-prog-min:active{background:var(--wa-soft);}
.cv-prog-stop:active{background:#F3F4F6;}
/* Свёрнутый вид: полоска над строкой ввода, работа идёт дальше. */
.cv-prog .cv-prog-mini{display:none;}
.cv-prog.mini{background:none;pointer-events:none;align-items:flex-end;}
.cv-prog.mini .cv-prog-b{display:none;}
.cv-prog.mini .cv-prog-mini{display:flex;align-items:center;gap:8px;pointer-events:auto;
margin:0 12px calc(84px + env(safe-area-inset-bottom,0));padding:8px 12px;
background:var(--ink-1);color:#fff;border-radius:999px;font-size:12.5px;font-weight:700;
box-shadow:0 3px 14px rgba(30,16,28,.3);cursor:pointer;}
.cv-prog.mini .cv-prog-mini i{width:8px;height:8px;border-radius:50%;background:var(--wa);
animation:tipBob 1.2s ease-in-out infinite;}
/* ПОЛОСКА С ПРОЦЕНТАМИ НА ТЁМНОЙ ТЕМЕ. 14 сентября, снимок хозяина:
«33%» белым по белому, ничего не видно.
Фон пилюли взят из --ink-1 — это цвет БУКВ. В светлой теме он тёмный,
и выходит тёмная пилюля с белой надписью, как задумано. В тёмной теме
буквы светлые, значит и фон становится светлым, а надпись на нём так и
осталась белой.
Берём цвет панели и обычный цвет букв — как у всех прочих окон, — и
добавляем рамку, чтобы пилюля не сливалась с полотном. */
html[data-theme="dark"] .cv-prog.mini .cv-prog-mini{
background:var(--panel);color:var(--ink);border:1px solid var(--line);}
/* Ссылки в пузырях переписки. В ответе АЙЫЫ — лиловые с подчёркиванием,
в своём пузыре на лиловом фоне — белые: иначе не видно. */
.cmsg-b a{color:var(--wa-deep);text-decoration:underline;text-underline-offset:2px;}
.cmsg-b a:active{opacity:.7;}
.cmsg.me .cmsg-b a{color:#fff;text-decoration-color:rgba(255,255,255,.6);}
/* ЛИЦО ТОГО, О КОМ РЕЧЬ.
Снимок под ответом, когда рассказ шёл о постороннем человеке. Крупнее,
чем аватарка в биографии (там он справочный, здесь — ради него и спросили),
но не во всю ширину пузыря: лицо во весь экран читается как фотография
самого человека, а это чужой снимок из сети.
Подпись обязательна и кликабельна: без неё непонятно, откуда лицо,
а выдумывать источник нельзя. */
.cmsg-face{margin:10px 0 2px;}
.cmsg-face img{display:block;width:132px;height:132px;border-radius:16px;
object-fit:cover;object-position:center 22%;background:var(--wa-soft);}
.cmsg-face a, .cmsg-face span{display:inline-block;margin-top:5px;font-size:11px;
color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;}
.cmsg-face a:active{border-bottom-color:var(--ink-3);}
/* Окно «Кого рисуем»: имя добавленного руками человека и кнопка добавления.
Второй человек в кадре появляется только по этой кнопке — приложение
само его не выдумывает. */
.cfa-name{width:100%;border:1px solid var(--line);border-radius:9px;
padding:6px 9px;font:inherit;font-size:13.5px;font-weight:700;
color:var(--ink);background:#fff;}
.cfa-name:focus{outline:none;border-color:var(--wa);}
.cfa-add{width:100%;margin:10px 0 2px;border:1px dashed var(--line);
background:transparent;color:var(--ink-2);border-radius:12px;
padding:11px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.cfa-add:active{background:var(--wa-soft);}
html[data-theme="dark"] .cfa-name{background:var(--panel);}
/* Кнопка «Повторить» на сообщении о потере связи. Внутри пузыря, не рядом:
она относится к этому сообщению, а не к разговору вообще. */
.cmsg-retry{display:block;margin:10px 0 2px;border:0;border-radius:12px;
padding:10px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
background:var(--wa);color:#fff;}
.cmsg-retry:active{opacity:.85;}
/* Свои именинники (21-kin-sync.js). Переменные только существующие:
--wa, --line, --ink, --ink-2, --ink-3, --bg, --panel. */
.ks-in{display:block;width:100%;box-sizing:border-box;margin:8px 0;
padding:12px 14px;border:1px solid var(--line);border-radius:12px;
background:var(--bg);color:var(--ink);font:inherit;font-size:14px;}
.ks-in:focus{outline:none;border-color:var(--wa);}
.ks-file{display:block;margin:12px 0;padding:12px 14px;text-align:center;
background:var(--wa);color:#fff;border:none;width:100%;box-sizing:border-box;
border-radius:12px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;}
.ks-file:active{opacity:.85;}
.ks-file-2{background:var(--panel);color:var(--ink);border:1px solid var(--line);}
.ks-sep{margin:18px 0 2px;font-size:13px;font-weight:700;color:var(--ink-2);}
.ks-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;}
.ks-row:last-child{border-bottom:0;}
.ks-row span{color:var(--ink);}
.ks-row i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px;}
.ks-row button{border:none;background:none;color:var(--wa-deep);font:inherit;
font-size:12.5px;cursor:pointer;flex:0 0 auto;}
.ks-names{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0;}
.ks-names button{padding:8px 12px;border:1px solid var(--line);background:var(--bg);
color:var(--ink);border-radius:999px;font:inherit;font-size:13px;cursor:pointer;}
.ks-names button:active{border-color:var(--wa);color:var(--wa-deep);}
/* Вход в «О тебе» с экрана дерева (index.html, под карточкой «Ты»).
Переменные только существующие: --wa-deep, --line. */
.ml-more{margin:2px 16px 18px;padding:11px 0;font-size:13.5px;font-weight:600;
color:var(--wa-deep);cursor:pointer;border-bottom:1px solid var(--line);}
.ml-more:active{opacity:.7;}
/* Кнопки «+» для ручной правки половин викторины (81-quiz.js).
Переменные только существующие. */
/* Половины викторины в полноэкранном просмотре (81-quiz.js).
Обёртка кладётся ровно на картинку — её место считает quizPaintHalves. */
.quiz-halves{position:absolute;z-index:6;pointer-events:none;
display:flex;flex-direction:column;}
.quiz-half{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:12px;}
.quiz-halves .quiz-btn{pointer-events:auto;
width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
background:rgba(0,0,0,.5);color:#fff;font:700 28px/1 Inter,sans-serif;
cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.quiz-halves .quiz-btn:active{background:rgba(0,0,0,.75);}
/* Колесо ожидания на половине викторины: поиск в сети идёт до
четырнадцати секунд, и без него кажется, что приложение зависло. */
.quiz-wait{width:56px;height:56px;border-radius:50%;
border:3px solid rgba(255,255,255,.28);border-top-color:#fff;
animation:quizspin .8s linear infinite;display:block;}
@keyframes quizspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
.quiz-wait{animation:none;border-top-color:rgba(255,255,255,.7);}
}
/* Подсказки «что спросить» под кадром викторины (81-quiz.js).
Живут в приложении, на картинку не попадают никогда. */
.quiz-hints{padding:10px 14px 2px;text-align:center;}
.quiz-hints-t{font-size:11.5px;color:rgba(255,255,255,.6);margin-bottom:8px;}
.quiz-hint{display:inline-block;margin:0 5px 7px;padding:8px 14px;
border:1px solid rgba(255,255,255,.32);border-radius:999px;
background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;
cursor:pointer;}
.quiz-hint:active{background:rgba(255,255,255,.2);}
/* «Спроси у своих» в разборе (29-about-me.js). Переменные существующие. */
.ab-quiz{margin:16px 0 4px;padding:14px 16px;border:1px solid var(--line);
border-radius:14px;background:var(--wa-soft);}
.ab-quiz-t{font-size:14px;font-weight:800;color:var(--ink);}
.ab-quiz-s{margin-top:5px;font-size:13px;line-height:1.5;color:var(--ink-2);}
.ab-quiz-b{margin-top:11px;width:100%;padding:11px 14px;border:none;
border-radius:12px;background:var(--wa);color:#fff;font:inherit;
font-weight:700;font-size:13.5px;cursor:pointer;}
.ab-quiz-b:active{opacity:.85;}
/* Подсказанная пара над вопросами (81-quiz.js). */
.quiz-pair{font-size:14px;font-weight:700;color:#fff;margin-bottom:9px;}
.quiz-both{background:rgba(255,255,255,.2);font-weight:700;}
/* Объявление (82-ad.js). Переменные только существующие. */
.ad-in{display:block;width:100%;box-sizing:border-box;margin:10px 0;
padding:12px 14px;border:1px solid var(--line);border-radius:12px;
background:var(--bg);color:var(--ink);font:inherit;font-size:14px;resize:vertical;}
.ad-in:focus{outline:none;border-color:var(--wa);}
.ad-btn{display:block;width:100%;box-sizing:border-box;margin:10px 0;
padding:12px 14px;text-align:center;border:none;border-radius:12px;
background:var(--wa);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;}
.ad-btn:active{opacity:.85;}
.ad-btn[disabled]{opacity:.6;cursor:default;}
.ad-btn-2{background:var(--panel);color:var(--ink);border:1px solid var(--line);}
.ad-shots{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0;}
.ad-shot{position:relative;width:72px;height:72px;}
.ad-shot img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;}
.ad-shot button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;
border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;
font:12px/1 Inter,sans-serif;cursor:pointer;padding:0;}
.cl-new-2{background:var(--panel);color:var(--ink);border:1px solid var(--line);
margin-top:8px;}
/* ===== FAB «Собрать» и лист выбора. 28 августа. ===== */
.makefab{position:relative;height:0;margin:0 2px;}
/* 28 августа, слово хозяина: вместо ✦ — знак АЙЫЫ, тот же, что на
слайдах и в водяном знаке. Нажал знак — получил вещь со знаком.
Чужая четырёхлучевая искра читалась как гугловская и здесь не к месту:
FAB не про ИИ, а про «собрать из моего разговора».
Кружок поднят на 18 пунктов — стоял слишком близко к строке ввода. */
.makefab .fab-make{position:absolute;right:10px;bottom:28px;width:52px;height:52px;
border-radius:50%;border:none;background:var(--wa);color:#fff;font-size:21px;
display:flex;align-items:center;justify-content:center;z-index:60;
box-shadow:0 6px 18px rgba(0,0,0,.35);}
.makefab .fab-make:active{opacity:.85;}
.fab-sheet-bg{position:fixed;inset:0;background:rgba(10,6,12,.55);z-index:220;
display:flex;align-items:flex-end;}
.fab-sheet{width:100%;background:#1d1420;border-radius:18px 18px 0 0;
padding:14px 14px calc(16px + env(safe-area-inset-bottom));
display:flex;flex-direction:column;gap:8px;}
.fab-sheet-t{color:#9d8f97;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;
margin:0 4px 4px;}
.fab-sheet button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
border:none;border-radius:12px;background:rgba(255,255,255,.06);color:#fff;
padding:14px 14px;font-size:15px;text-align:left;}
.fab-sheet button b{font-weight:700;}
.fab-sheet button span{color:#9d8f97;font-size:12.5px;flex:0 0 auto;}
.fab-sheet button:active{background:rgba(255,255,255,.12);}
/* Кнопки под рисунком из разговора. */
.cmsg-paint{display:flex;gap:8px;margin-top:8px;}
.cmsg-paint button{flex:1;border:none;border-radius:10px;padding:10px 12px;font-size:13px;
font-weight:600;background:rgba(255,255,255,.08);color:#fff;}
.cmsg-paint button:first-child{background:var(--wa);}
.cmsg-paint button:disabled{opacity:.6;}
/* FAB-столбик: три кружка выскакивают кверху. 28 августа, образец хозяина. */
/* 28 августа, «не видно же»: столбик прыгал внутри контейнера ввода,
а над ним обрезка — кружки срезало. Теперь поверх всего окна (fixed),
место под кнопкой меряет fabMakeOpen по-настоящему. */
/* Экран притемняется, пока столбик открыт: кружки читаются, а нажатие
мимо — закрывает. 28 августа, слово хозяина. */
.fab-dim{position:fixed;inset:0;background:rgba(12,7,14,.45);z-index:290;
opacity:0;pointer-events:none;transition:opacity .18s var(--в);}
.makefab.open ~ .fab-dim, body.fab-open .fab-dim{opacity:1;pointer-events:auto;}
.fab-stack{position:fixed;right:16px;bottom:150px;display:flex;flex-direction:column;
gap:12px;align-items:flex-end;z-index:300;pointer-events:none;}
.fab-item{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(14px);
transition:opacity .18s var(--в),transform .18s var(--в);}
.makefab.open .fab-item{opacity:1;transform:none;pointer-events:auto;}
.makefab.open .fab-item:nth-child(1){transition-delay:.08s;}
.makefab.open .fab-item:nth-child(2){transition-delay:.04s;}
/* 28 августа, «где иконки»: кружки были белым по белому — на светлом
чате полупрозрачная заливка сливалась с фоном, и линий не видно.
Теперь кружок тёмный, линии белые, цвет задан явно. */
.fab-item button{width:50px;height:50px;border-radius:50%;border:none;
background:#3a2434;color:#fff;display:flex;align-items:center;
justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.35);}
.fab-item button svg{width:23px;height:23px;stroke:#fff;fill:none;display:block;}
.fab-item button svg [fill="currentColor"]{fill:#fff;}
.fab-item button:active{background:#4d3145;}
.fab-l{background:rgba(20,12,22,.85);color:#EADFE6;font-size:12px;font-weight:600;
padding:6px 11px;border-radius:9px;}
.makefab .fab-make{transition:transform .18s var(--в);}
/* Поворот на 45° у четырёхлучевой звезды невидим — знак меняет JS: ✦ → ✕. */
.makefab.open .fab-make{transform:rotate(90deg);}
/* Рисунок из разговора: крупно, кнопки не ломаются. 28 августа. */
/* 28 августа: картинка была во всю ширину, а кнопки под ней — тонкой
полоской. Уравновешено: снимок чуть уже, кнопки выше и заметнее. */
.cmsg-b:has(.cmsg-paint-img){max-width:78%;}
.cmsg-paint-img{display:block;width:100%;max-height:52vh;object-fit:contain;
min-width:220px;border-radius:14px;margin:2px 0 0;background:rgba(0,0,0,.06);}
.cmsg-paint{flex-wrap:nowrap;gap:9px;margin-top:10px;}
.cmsg-paint button{white-space:nowrap;font-size:14.5px;font-weight:700;padding:14px 12px;
border-radius:12px;}
/* 28 августа: вторая кнопка была светлой на светлом пузыре — не видна.
Теперь у неё тёмный текст и рамка. */
.cmsg-paint button:not(:first-child){background:#fff;color:#4a3542;
border:1.5px solid rgba(120,90,110,.35);}
.cmsg-paint button:not(:first-child):disabled{opacity:.55;}
/* Пузырь работы: звезда дышит, полоса переливается. */
.paint-wait{display:flex;align-items:center;gap:9px;position:relative;overflow:hidden;
padding-bottom:14px !important;}
/* Значок ожидания — знак АЙЫЫ (4 сентября). Раньше здесь стоял ромб ✦
текстом, поэтому правила были про шрифт; теперь это картинка, и размер
задаётся шириной. Старые font-size ниже безвредны: у картинки они ни
на что не влияют, но высоту всё же задаём явно. */
.pw-star{color:var(--wa);font-size:17px;width:17px;height:17px;object-fit:contain;
display:inline-block;vertical-align:-3px;animation:pwStar 1.2s ease-in-out infinite;}
@keyframes pwStar{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.25);opacity:1}}
.pw-bar{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
background:linear-gradient(90deg,transparent,var(--wa),#e7b7d0,var(--wa),transparent);
background-size:220% 100%;animation:pwBar 1.4s linear infinite;}
@keyframes pwBar{0%{background-position:200% 0}100%{background-position:-20% 0}}
/* Кнопка после скачивания: зелёная галочка, пять секунд не нажимается. */
.cmsg-paint button.saved{background:#2f7d4f !important;opacity:1;color:#fff;}
/* Знак в кружке: белый, с воздухом по краям. Логотип чёрный на прозрачном,
поэтому перекрашиваем его в белый фильтром, а не держим второй файл. */
.makefab .fab-make img{width:27px;height:27px;display:block;object-fit:contain;
filter:brightness(0) invert(1);}
.makefab.open .fab-make img{display:none;}
.makefab.open .fab-make{font-size:23px;line-height:1;}
/* Развилка по объявлению: кнопки столбиком, читаются с одного взгляда. */
.cmsg-ask{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
/* 28 августа: кнопки были белым по светлому пузырю — почти не видны.
Теперь у неглавных тёмный текст и рамка, у главной — заливка. */
.cmsg-ask button{border:1.5px solid rgba(120,90,110,.35);border-radius:11px;
padding:13px 14px;font-size:14px;font-weight:600;background:#fff;
color:#4a3542;text-align:left;}
.cmsg-ask button:first-child{background:var(--wa);color:#fff;border-color:transparent;}
.cmsg-ask button:active{opacity:.85;}
/* Лист правки объявления. 28 августа. */
/* Лист правки: поля прокручиваются, кнопки внизу стоят на месте.
28 августа — иначе до «Готово» и «Другой фон» просто не долистать. */
.ad-edit-b{display:flex;flex-direction:column;gap:11px;max-height:86vh;overflow-y:auto;
padding-bottom:0 !important;}
.ad-e-bottom{position:sticky;bottom:0;background:#fff;display:flex;flex-direction:column;
gap:8px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0));margin-top:2px;
box-shadow:0 -10px 16px -10px rgba(0,0,0,.18);}
.ad-e-l{display:flex;flex-direction:column;gap:5px;color:#7a6b74;font-size:11.5px;
letter-spacing:.3px;text-transform:uppercase;}
/* 28 августа: поля были белым по белому — человек решил, что они пустые.
Лист .acc-b светлый (#fff), значит и текст в полях тёмный. */
.ad-e-l input,.ad-e-l textarea{background:#F6F2F5;border:1.5px solid rgba(120,90,110,.22);
border-radius:10px;color:#1F1620;font-size:15px;padding:12px 12px;font-family:inherit;
text-transform:none;letter-spacing:0;resize:none;}
.ad-e-l input:focus,.ad-e-l textarea:focus{outline:none;border-color:var(--wa);background:#fff;}
.ad-e-l input::placeholder,.ad-e-l textarea::placeholder{color:#9d8f97;}
.ad-e-l textarea{line-height:1.4;}
.ad-e-where{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ad-e-where span{color:#7a6b74;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;
flex:0 0 100%;}
.ad-e-w{flex:1;border:1.5px solid rgba(120,90,110,.28);background:#fff;color:#4a3542;
border-radius:10px;padding:11px 8px;font-size:13px;font-weight:600;}
.ad-e-w.on{background:var(--wa);color:#fff;border-color:transparent;}
.ad-e-again{background:#fff;border:1.5px solid rgba(120,90,110,.28);color:#4a3542;
border-radius:11px;padding:13px;font-size:13.5px;font-weight:600;}
/* Просмотр в редакторе: правишь — видишь. 28 августа. */
.ad-e-prev{display:flex;justify-content:center;background:#EFE9EE;border-radius:12px;
padding:8px;margin-bottom:2px;}
.ad-e-prev img{max-height:34vh;max-width:100%;border-radius:8px;display:block;
object-fit:contain;}
/* Кнопки шрифтов в редакторе: своим начертанием, пометка «!» у тех,
где нет якутских букв. 28 августа. */
.ad-e-f{flex:0 0 auto;padding:9px 13px;font-size:13.5px;}
.ad-e-f i{font-style:normal;color:#C2588C;font-weight:800;}
.ad-e-where{row-gap:7px;}
/* Смена фона прямо в окне: старая картинка гаснет, поверх — звёзды. */
.ad-e-prev{position:relative;}
.ad-e-prev.busy img{opacity:.25;filter:blur(2px);transition:opacity .3s var(--в),filter .3s var(--в);}
.ad-e-wait{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:6px;}
.ad-e-wait b{color:#3a2434;font-size:14px;}
.ad-e-wait i{color:#7a6b74;font-size:12px;font-style:normal;font-variant-numeric:tabular-nums;}
.ad-e-wait .pw-star{font-size:26px;width:26px;height:26px;color:var(--wa);}
.ad-e-bar{width:120px;height:3px;border-radius:3px;margin-top:4px;
background:linear-gradient(90deg,transparent,var(--wa),#e7b7d0,var(--wa),transparent);
background-size:220% 100%;animation:pwBar 1.4s linear infinite;}
/* Две кнопки в ряд под «Готово». */
.ad-e-two{display:flex;gap:8px;}
.ad-e-two .ad-e-again{flex:1;padding:13px 8px;font-size:13px;}
/* Кнопки формата: доля мелкой подписью. */
.ad-e-fmt i{font-style:normal;color:#9d8f97;font-size:11px;margin-left:4px;}
.ad-e-fmt.on i{color:rgba(255,255,255,.75);}
/* Подсказка про пальцы под просмотром. */
.ad-e-hint{display:flex;align-items:center;justify-content:space-between;gap:8px;
color:#7a6b74;font-size:11.5px;margin:-4px 2px 0;}
.ad-e-hint button{background:none;border:none;color:var(--wa);font-size:11.5px;
font-weight:700;padding:4px 2px;}
.ad-e-prev{touch-action:none;}
/* ===== ПРАВКА ФОТО: один редактор. 29 августа. ===== */
/* Поле «своими словами» — главное, потому что люди хотят просить словами,
а не выбирать из меню (наблюдение хозяина за друзьями). */
.pe-free{width:100%;background:#F6F2F5;border:1.5px solid rgba(120,90,110,.24);
border-radius:12px;color:#1F1620;font-size:16px;padding:14px 14px;margin:14px 0 10px;
font-family:inherit;}
.pe-free:focus{outline:none;border-color:var(--wa);background:#fff;}
.pe-free::placeholder{color:#9d8f97;}
/* Подсказки — не меню, а примеры: мелкие, в строку. */
.pe-acts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;}
.pe-sm{border:1px solid rgba(120,90,110,.28);background:#fff;color:#4a3542;
border-radius:20px;padding:8px 13px;font-size:13px;font-weight:600;}
.pe-sm:active{background:#F2E8EF;}
.pe-car{width:100%;margin-top:12px;background:#fff;border:1.5px solid rgba(120,90,110,.28);
color:#4a3542;border-radius:12px;padding:14px;font-size:14px;font-weight:600;}
/* Кнопка под присланным снимком. 29 августа, второй заход: белая заливка
поверх розового пузыря выглядела наклейкой, «будто урок по дизайну на
первом курсе». Убрали заливку вовсе — тонкая рамка и разрядка, кнопка
читается частью пузыря, а не заплаткой на нём. */
/* Кнопка «Скопировать» под ответом (5 сентября). Приглушена: она нужна
часто, но не должна спорить с самим текстом. На телефоне не прячем по
наведению — наведения там нет, а именно там она и нужнее всего. */
/* ===== ОБУЧЕНИЕ: ВИТРИНА И КАРТОЧКА КУРСА (5 сентября) ===== */
/* Витрина живёт в колонке виджетов — она узкая, поэтому две плитки в ряд
и никаких внешних отступов: их даёт сама панель (5 сентября). */
.lrn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;}
/* Фон был вписан белым числом — в тёмной теме светлый текст ложился на
белое и пропадал (померено 7 сентября: контраст 1,16). */
.lrn-i{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
text-align:left;cursor:pointer;background:var(--panel,#fff);
border:1px solid var(--line,#e6dbe3);
border-radius:14px;padding:10px 10px 12px;}
.lrn-i:hover{border-color:#c894b0;}
.lrn-cover{display:flex;align-items:center;justify-content:center;
width:100%;aspect-ratio:4/3;border-radius:10px;margin-bottom:4px;
color:#fff;font:700 26px/1 'Inter',sans-serif;letter-spacing:.04em;}
.lrn-i b{font-size:13.5px;line-height:1.3;color:var(--ink,#42323d);}
.lrn-i i{font-style:normal;font-size:11.5px;line-height:1.35;color:var(--ink-3,#9c8f98);}
/* Цена: на светлой теме тёмно-розовая, на тёмной — светло-розовая.
Числом её задавать нельзя, темы читают по-разному (7 сентября). */
.lrn-i u{text-decoration:none;font-weight:700;font-size:13px;color:#8d5b76;margin-top:2px;}
html[data-theme="dark"] .lrn-i u{color:var(--wa);}
html[data-theme="dark"] .lrn-price s{color:var(--ink-3);}
html[data-theme="dark"] .lrn-who{color:var(--wa);}
.lrn-i u.free{color:#5b8d6b;font-weight:600;}
/* Встроенный проигрыватель: 16:9, во всю ширину карточки. */
.lrn-play{margin:0 -18px 14px;aspect-ratio:16/9;background:#000;}
.lrn-play iframe{width:100%;height:100%;border:0;display:block;}
.lrn-top span{display:block;font:500 12px/1 'Inter',sans-serif;opacity:.8;margin-top:8px;}
.lrn-sheet{position:fixed;inset:0;z-index:80;display:none;
background:rgba(40,20,35,.45);overflow-y:auto;padding:24px 12px;}
.lrn-sheet.on{display:block;}
.lrn-box{position:relative;max-width:520px;margin:0 auto;background:var(--bg,#fff);
border-radius:18px;padding:0 18px 20px;overflow:hidden;}
.lrn-x{position:absolute;right:10px;top:10px;z-index:2;width:32px;height:32px;
border:none;border-radius:50%;background:rgba(255,255,255,.85);
font-size:20px;line-height:1;cursor:pointer;color:#5b4a56;}
.lrn-top{margin:0 -18px 14px;height:120px;display:flex;align-items:center;
justify-content:center;flex-direction:column;color:#fff;font:700 42px/1 'Inter',sans-serif;}
.lrn-box h3{margin:0 0 6px;font-size:19px;line-height:1.25;color:var(--ink,#42323d);}
.lrn-who{margin:0 0 10px;font-size:12.5px;color:#8d5b76;}
.lrn-about{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2,#6b5a66);}
.lrn-meta{font-size:12px;color:var(--ink-3,#9c8f98);margin-bottom:14px;}
.lrn-cap2{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-3,#9c8f98);margin-bottom:6px;}
.lrn-parts{margin:0 0 16px;padding-left:18px;font-size:13.5px;line-height:1.6;
color:var(--ink-2,#6b5a66);}
.lrn-pay{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
border-top:1px solid var(--line,#e6dbe3);padding-top:14px;}
.lrn-price{display:flex;align-items:baseline;gap:8px;}
.lrn-price b{font-size:22px;color:var(--ink,#42323d);}
.lrn-price s{font-size:13px;color:var(--ink-3,#9c8f98);}
.lrn-buy{flex:1;min-width:150px;border:none;border-radius:12px;cursor:pointer;
background:#b0709a;color:#fff;font:600 15px/1 'Inter',sans-serif;padding:14px 16px;}
.lrn-buy:hover{background:#9c5f88;}
.lrn-note{margin-top:10px;font-size:13px;color:#8d5b76;min-height:18px;}
/* ===== СУБТИТРЫ: ПОЛНЫЙ ЭКРАН С НАДПИСЬЮ (7 сентября) =====
Встроенную кнопку разворота прячем: она разворачивает сам ролик,
а надпись лежит слоем поверх и остаётся снаружи. Рядом стоит наша,
она разворачивает ролик вместе с надписью. */
#sub-play::-webkit-media-controls-fullscreen-button{display:none;}
/* Размер обёртки в полном экране считает 85-subtitles.js по пропорции
ролика: у вертикального видео кадр — узкая полоса, и надпись со знаком
должны стоять по её краям, а не по краям экрана (7 сентября). */
/* В полном экране внешний слой отдаём браузеру (он всё равно ставит
width/height с !important), а размер кадра держит #sub-box — его
считает 85-subtitles.js по пропорции ролика. */
#sub-wrap:fullscreen, #sub-wrap:-webkit-full-screen{border-radius:0;background:#000;}
#sub-wrap:fullscreen #sub-play, #sub-wrap:-webkit-full-screen #sub-play{
max-height:none;border-radius:0;object-fit:contain;height:100%;}
#sub-wrap:fullscreen::backdrop{background:#000;}
/* ===== ПОЛОСЫ ПРОКРУТКИ =====
7 сентября, слово хозяина: показал свою полосу и нашу — у нас
браузерная по умолчанию: широкая, светлая, со стрелками на концах.
На тёмном полотне она светится белой чертой по краю и выглядит
чужой деталью.
Делаем как у Клода: узкая, без стрелок, ползунок в цвет рамок,
дорожка прозрачная. Стрелки убираются отдельным правилом — сами
по себе они не исчезают.
Список разговоров, окно правки и прочие места, где прокрутка своя,
это правило подхватят: оно задано для всех. */
/* Цвет ползунка отдельной переменной: в тёмной теме он в тон рамкам,
а в светлой рамки почти белые — ползунок из них был бы не виден
(померено 7 сентября: #E9EDF0 на белом). */
:root{--scroll:#C9C2C6;}
html[data-theme="dark"]{--scroll:#2C223C;}
*{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;
border:3px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3);
border:3px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-button{display:none;height:0;width:0;}
*::-webkit-scrollbar-corner{background:transparent;}
/* Ряд действий под сообщением. Под своим — прижат вправо, к той же
стороне, где пузырь; под ответом АЙЫЫ — влево (7 сентября). */
/* ===== РЯД ДЕЙСТВИЙ ПОЯВЛЯЕТСЯ ПРИ НАВЕДЕНИИ =====
7 сентября, слово хозяина: «когда она стоит — ничего не видно, а
когда мышкой тянешь к тексту, тогда показывается. Сделай так же».
Верно: значки нужны в тот миг, когда человек к сообщению потянулся,
а до того они шум. Прячем их прозрачностью, а не удалением: место
под ряд остаётся занятым, и переписка не прыгает, когда мышь
проходит мимо.
ТОЛЬКО ТАМ, ГДЕ ЕСТЬ МЫШЬ. На телефоне наведения не бывает вовсе:
спрятанный ряд там пропал бы навсегда. Правило заперто в проверку
на «указатель точный и наведение работает» — планшет с пальцем и
телефон её не проходят и видят значки как прежде. */
/* Правка вопроса прямо в пузыре (7 сентября). */
.cmsg-edit{width:100%;min-width:260px;box-sizing:border-box;resize:vertical;
border:1px solid var(--line);border-radius:10px;background:var(--bg);
color:var(--ink);font:inherit;font-size:15px;line-height:1.45;padding:9px 11px;}
.cmsg-edit:focus{outline:none;border-color:var(--wa);}
.cmsg-edit-row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
.cmsg-edit-row button{border:none;border-radius:9px;cursor:pointer;
font:600 13px/1 'Inter',system-ui,sans-serif;padding:9px 14px;}
.ce-x{background:transparent;color:var(--ink-3);border:1px solid var(--line)!important;}
.ce-ok{background:var(--wa);color:#fff;}
html[data-theme="dark"] .ce-ok{color:#181424;}
.cmsg-acts{display:flex;align-items:center;gap:4px;margin:3px 2px 0;opacity:.72;width:100%;}
@media (hover:hover) and (pointer:fine){
.cmsg-acts{opacity:0;transition:opacity .14s ease;}
.cmsg:hover .cmsg-acts,
.cmsg-acts:focus-within{opacity:.85;}
.cmsg:hover .cmsg-acts:hover{opacity:1;}
}
.cmsg-acts.me{justify-content:flex-end;}
.cmsg-acts.ai{justify-content:flex-start;}
.cmsg-acts:hover{opacity:1;}
.cmsg-acts .cmsg-time{font-size:11.5px;color:var(--ink-3);margin-right:4px;}
.cmsg-acts button{display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:7px;
color:var(--ink-3);cursor:pointer;}
.cmsg-acts button:hover{background:rgba(0,0,0,.06);color:var(--ink-2);}
html[data-theme="dark"] .cmsg-acts button:hover{background:rgba(255,255,255,.08);}
.cmsg-acts button.ok{color:#2e7d5b;}
.cmsg-copy{margin:8px 0 0;}
/* Прежние правила .cmsg-copy оставлены пустыми: ряд под ответом теперь
тот же .cmsg-acts, что и под своим сообщением (7 сентября). */
/* КНОПКА ПРАВКИ — ДЕЙСТВИЕ, А НЕ ВЫВЕСКА. 15 сентября, слово хозяина:
«фото, под ним хаартысканы көннөр, и текст — всё вперемешку, некрасиво».
Стояла она между снимком и подписью, во всю ширину, заглавными буквами —
и разрывала сообщение надвое: человек писал одно целое, а читалось как
снимок, вывеска, и зачем-то текст после неё.
Теперь снимок и подпись идут подряд, как их и писали, а кнопка стоит
последней, по своему тексту, обычными буквами — тихое действие под
готовым сообщением. */
.cmsg-fix{margin-top:10px;}
.cmsg-fix button{width:auto;background:transparent;color:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.28);border-radius:11px;padding:7px 12px;
font-size:12.5px;font-weight:500;
transition:background .15s var(--мяг),border-color .15s var(--мяг);}
.cmsg-fix button:active{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);}
/* Остаток правок под кнопкой — тихо, пока не последняя. 29 августа. */
.pe-left{color:#8a7d88;font-size:12.5px;text-align:center;margin-top:8px;}
.pe-left.last{color:var(--wa);font-weight:700;}
.pe-note.wall{color:#4a3542;font-size:14px;line-height:1.45;white-space:pre-line;
background:#F6F2F5;border-radius:11px;padding:13px 14px;margin-top:10px;text-align:left;}
.pe-car.main{background:var(--wa);color:#fff;border-color:transparent;}
/* ===== РЕДАКТОР ФОТО: ярусы и разделители. 30 августа. =====
Разделы отбиты линиями и подписаны, чтобы с одного взгляда было понятно,
где что: снимок — просьба — текст на снимке — решение. */
.pe .pe-b{padding-bottom:0 !important}
.pe-go{margin-top:2px}
/* Раскрывающийся ярус «Добавить текст». */
.pe-more{display:flex;align-items:center;justify-content:space-between;width:100%;
margin-top:14px;padding:14px 2px 13px;background:none;border:none;
border-top:1px solid rgba(120,90,110,.16);color:#4a3542;font-size:14px;font-weight:700;}
.pe-more i{font-style:normal;font-size:19px;color:var(--wa);line-height:1;
width:26px;height:26px;border-radius:50%;background:rgba(199,125,168,.14);
display:flex;align-items:center;justify-content:center;}
.pe-more.on{color:var(--wa)}
.pe-more.on i{background:var(--wa);color:#fff}
.pe-text{display:flex;flex-direction:column;gap:11px;padding:2px 0 4px}
.pe-text .pe-l{display:flex;flex-direction:column;gap:5px;color:#7a6b74;
font-size:11px;letter-spacing:.4px;text-transform:uppercase;}
.pe-text input,.pe-text textarea{background:#F6F2F5;border:1.5px solid rgba(120,90,110,.22);
border-radius:11px;color:#1F1620;font-size:15px;padding:12px;font-family:inherit;
text-transform:none;letter-spacing:0;resize:none;line-height:1.4;}
.pe-text input:focus,.pe-text textarea:focus{outline:none;border-color:var(--wa);background:#fff}
.pe-text input::placeholder,.pe-text textarea::placeholder{color:#a2939f}
.pe-grp{display:flex;flex-direction:column;gap:7px}
.pe-gl{color:#7a6b74;font-size:11px;letter-spacing:.4px;text-transform:uppercase}
.pe-btns{display:flex;flex-wrap:wrap;gap:7px}
.pe-b2{border:1.5px solid rgba(120,90,110,.24);background:#fff;color:#4a3542;
border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;}
.pe-b2 i{font-style:normal;color:#9d8f97;font-size:11px;margin-left:4px}
.pe-b2.on{background:var(--wa);color:#fff;border-color:transparent}
.pe-b2.on i{color:rgba(255,255,255,.78)}
/* Низ листа стоит на месте: до кнопок всегда можно дотянуться. */
.pe-row{position:sticky;bottom:0;background:#fff;padding:12px 0
calc(12px + env(safe-area-inset-bottom,0));margin-top:6px;
border-top:1px solid rgba(120,90,110,.16);
box-shadow:0 -10px 16px -12px rgba(0,0,0,.2);}
/* Скрытые группы в правке фото и объявления (30 августа): «Бумага»
показывается только с фотокарточкой. flex перебил бы hidden — гасим явно. */
.pe-grp[hidden],.ad-e-where[hidden],.pe-text[hidden]{display:none!important}
/* «Добавить текст» не сворачивался (30 августа): .pe-text стоит display:flex,
и он перебивал hidden. Теперь hidden сильнее — ярус сворачивается. */
/* РАБОТА ИДЁТ. 30 августа, слово хозяина: как на остальных фото — кадр
уходит под звёзды, поверх слово. Накрываем правую рамку «стало». */
.pe-pics figure{position:relative}
.pe-pics figure.busy img{opacity:.22;filter:blur(2px);transition:opacity .3s var(--в),filter .3s var(--в)}
.pe-wait{position:absolute;left:0;right:0;top:0;height:var(--pe-h,190px);display:none;
flex-direction:column;align-items:center;justify-content:center;gap:6px;
border-radius:10px;pointer-events:none}
.pe-pics figure.busy .pe-wait{display:flex}
/* ЗНАК АЙЫЫ ВО ВРЕМЯ ПРАВКИ. 4 сентября, слово хозяина: «лого дерева не
видно». Знак тёмный по рисунку и лежит поверх снимка — на тёмном кадре
пропадал совсем.
Первая попытка была неверной: я перекрасил его в белый через инверсию,
но у общего правила для снимков внутри .pe-pics задан светлый фон, и
после инверсии он стал белым квадратом ПОВЕРХ белого же дерева — знак
исчез окончательно. Видно только на увеличенном снимке, глазом на
телефоне это читается как «пятно».
Правильно так: дерево оставляем как есть и кладём в светлый кружок.
Кружок читается на любом кадре — и на тёмном, и на светлом, — а знак
остаётся нашим знаком, а не белым силуэтом.
Селекторы длиннее нужного НАМЕРЕННО: у «.pe-pics figure.busy img»
стоят размытие и свой фон, и короткое правило оно перебивает молча. */
.pe-pics figure.busy .pe-wait img.pw-star,
.ad-e-wait img.pw-star{
width:34px; height:34px; padding:5px; box-sizing:border-box;
background:rgba(255,255,255,.94); border-radius:50%;
filter:none; box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.pe-wait .pw-star{font-size:26px;width:26px;height:26px;color:var(--wa)}
.pe-wait b{color:#fff;font-size:13px;text-align:center;padding:0 8px}
.pe-wait i{width:96px;height:3px;border-radius:3px;font-style:normal;
background:linear-gradient(90deg,transparent,var(--wa),#e7b7d0,var(--wa),transparent);
background-size:220% 100%;animation:pwBar 1.4s linear infinite}
/* ВОЗДУХ. 30 августа, слово хозяина: «впритык, душно». Отступы шире
между ярусами, овалы подсказок не липнут друг к другу. */
.pe-b{padding:18px 18px 0}
.pe-h{margin-bottom:16px}
.pe-pics{margin-bottom:18px;gap:10px}
.pe-pics figcaption{margin-top:6px}
#pe-free{margin-bottom:12px;padding:12px}
.pe-acts{gap:9px;margin-bottom:14px}
.pe-go{margin-top:4px}
.pe-more{margin-top:20px;padding:16px 2px 15px}
.pe-text{gap:14px;padding:4px 0 8px}
.pe-grp{gap:9px;margin-top:2px}
.pe-btns{gap:9px}
.pe-note{margin-top:10px}
.pe-row{margin-top:10px;gap:10px}
/* «✦ Стикер» в пузыре (30 августа): третья кнопка, розовая обводка. */
.cmsg-paint button.stk-go{background:#fff;color:var(--wa-deep);border:1.5px solid var(--wa);}
.cmsg-stk{margin-top:8px;}
.cmsg-paint{flex-wrap:wrap;}
/* Правка фото, 31 августа: главное действие — в липком низу. */
.pe-undo{margin:-6px 0 10px;text-align:right}
.pe-undo button{border:none;background:none;color:var(--wa-deep);font-size:12.5px;
padding:4px 2px;cursor:pointer;opacity:.85}
.pe-row .pe-p{flex:1.6}
/* Кошелёк токенов в окне тарифов (31 августа). */
.tok-box{background:var(--wa-soft);border-radius:14px;padding:14px;margin:14px 0 4px}
.tok-box:empty{display:none}
.tok-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tok-h b{font-size:26px;color:var(--wa-deep);line-height:1}
.tok-h span{font-size:12.5px;color:#7a6b74}
.tok-d{font-size:12.5px;color:#7a6b74;margin-top:6px}
.tok-packs{display:flex;gap:9px;margin-top:11px}
.tok-p{flex:1;background:#fff;border:1.5px solid var(--wa);border-radius:12px;
padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.tok-p b{font-size:19px;color:var(--wa-deep)}
.tok-p span{font-size:13px;color:#241a22;font-weight:600}
.tok-p s{color:#a89aa2;font-weight:400}
.tok-p i{font-size:11px;color:#8a7a85;font-style:normal}
/* ===== ЭКРАН МОНИТОРА. 31 августа =====
Слово хозяина: «нужна полная вебка для мониторов». До сих пор всё
приложение жило в колонке 420 точек посреди пустого экрана — на
ноутбуке это читалось как «сделано для телефона, а вы тут случайно».
Для делопроизводителя, у которого рядом открыт Word, это приговор.
Сделано надстройкой, а не переписыванием: мобильные правила не
тронуты, с 1024 точек включается другой расклад. На телефоне не
изменился ни один байт.
Разметка настоящая, а не выдуманная (проверял по index.html):
#phone
.hdr — фиолетовая шапка
#body — всё остальное
.cl-shade — затемнение под ящиком
.chatlist — ящик разговоров
#pg-chat — экран чата
.aiyy-top — вкладки и подсказки
#chat-scroll — сама переписка
.aiyy-input-wrap— поле ввода
Главная разница между телефоном и монитором: ящик разговоров не
выезжает поверх, а просто стоит слева и никуда не девается. */
@media (min-width:1024px){
/* ВО ВЕСЬ ЭКРАН. 31 августа: до этого приложение стояло колонкой
посреди белых полей — на мониторе это читалось как «мы тут в
гостях». Теперь занимает окно целиком; читаемость держим не рамкой
окна, а шириной колонки писем внутри. */
#phone{max-width:none;width:100%;height:100dvh;max-height:none;
border-radius:0;box-shadow:none;overflow:hidden;}
/* ФИОЛЕТОВОЙ ШАПКИ НА МОНИТОРЕ НЕТ. 31 августа, слово хозяина:
«может быть удалим тот хедер, который сверху — она зачем нужна?»
Что она делала. На телефоне её в разговоре не видно вовсе:
#pg-chat.on ложится поверх всего окна. Она показывается только на
внутренних экранах — «Свои люди», «О тебе», «Человек» — и там она
единственная полоса возврата: «‹ АЙЫЫ», название экрана, точки.
Поэтому на телефоне она остаётся как была.
На мониторе от неё не оставалось ничего: возврат скрыт (разговор
и так на виду), название «АЙЫЫ» — вывеска, а в точках два пункта,
у которых есть свои места: «Настройки» — шестерёнка в профиле
внизу ящика, «Свои люди» — дерево и кнопка «‹» на линии. Полоса
в 60 точек во всю ширину ради двух дублей — убираем, тело
занимает окно целиком. */
#phone > .hdr{display:none!important;}
#phone > #body{flex:1;min-height:0;}
/* Тело центрировало приложение и оставляло по бокам полосы фона.
На мониторе центрировать нечего — приложение и есть окно
(31 августа, по снимку хозяина: «чтобы по бокам не было розовых зон»). */
body{display:block;justify-content:normal;background:var(--bg);}
/* Тело — две колонки: ящик и работа.
Осторожно с наследством: на телефоне #body прокручивается САМ и
держит отступ снизу под нижнее меню. Если оставить как есть, на
мониторе прокрутка окажется у всего тела разом, и шапка чата уедет
вместе с перепиской. Поэтому здесь тело только делит место, а
прокручивают уже колонки. */
/* ЭКРАНЫ СМЕНЯЮТ ДРУГ ДРУГА, А НЕ СТОЯТ РЯДОМ.
31 августа, вторая правка по снимку. Сперва я сделал тело строкой,
и каждый экран (.pg) стал в ней отдельной колонкой: слева ящик, в
середине разговор, справа — втиснутая «О тебе», которая никуда не
прокручивалась. На телефоне экраны лежат друг на друге и меняются;
тем же способом делаем и здесь, только со сдвигом вправо на ширину
ящика. Никаких колонок — ящик прибит слева, экран занимает всё
остальное и прокручивается сам. */
/* Отступ снизу в 70 точек остался от нижнего меню, которого на
мониторе нет: под приложением висела пустая белая полоса
(31 августа, снимок хозяина). Убираем и её, и саму полосу. */
#body{display:block;position:relative;overflow:hidden;
margin-bottom:0!important;height:100%;}
.bottom-nav{display:none!important;}
.chatlist{position:absolute;left:0;top:0;bottom:0;
width:320px;max-width:320px;overflow-y:auto;}
.pg{position:absolute;left:320px;right:0;top:0;bottom:0;
padding-bottom:0;overflow-y:auto;}
/* РАЗГОВОР ЗАЛЕЗАЛ ПОД ЯЩИК. 31 августа, найдено при проверке №347
рендером: поле ввода читалось как «…щение» — левая треть под ящиком.
Конфликт с собственным старым правилом: у телефона #pg-chat.on
стоит inset:0, а это id+класс, и он молча перебивает .pg{left:320px}
выше — класс против id всегда проигрывает. Поэтому левый край
разговора задаём тем же весом, что и у телефонного правила. */
#pg-chat.on{left:320px;}
.pg.on{display:flex;flex-direction:column;min-height:0;}
#chat-scroll{flex:1;min-height:0;overflow-y:auto;}
/* ===== НАСТРОЙКИ И ПРОФИЛЬ — ОТДЕЛЬНЫМ ОКНОМ =====
31 августа, слово хозяина: «почему меню закрывает и разговор, и
вообще открыто так, что я не могу его свернуть». Я сперва просто
сдвинул выезжающую панель вправо — вышло хуже: она легла поверх
работы, обрезалась по краю и не закрывалась.
На телефоне панель выезжает сбоку — там иначе некуда. На мониторе
так не делают: настройки открывают окном по центру, а фон гасят.
Нажал мимо — закрылось, разговор на месте. */
.panel{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;
width:min(560px,90vw);max-width:560px;height:auto;max-height:82vh;
border-radius:20px;overflow:hidden;
transform:translate(-50%,-50%) scale(.97)!important;opacity:0;pointer-events:none;
transition:opacity .18s var(--в),transform .18s var(--в);
box-shadow:0 30px 90px rgba(40,20,35,.34);z-index:160;}
.panel.on{transform:translate(-50%,-50%) scale(1)!important;opacity:1;pointer-events:auto;}
.panel .ph{border-radius:20px 20px 0 0;}
/* Затемнение должно лежать НАД работой, но под самим окном — иначе
нажатие мимо окна не доходит до закрытия. */
.scrim{z-index:155;}
/* ОКНА ИЗ МЕНЮ — НАД МЕНЮ. 31 августа, слово хозяина: «как люди будут
оплачивать тариф, если после нажатия меню не исчезает и загораживает
окно?»
Утром окно настроек подняли на 160, чтобы оно легло над своим
затемнением (155). Но окна, которые открываются ИЗ него, — тарифы
(158), язык (155), вход (150), знак (160 — на равных, кто позже в
разметке), «О тебе» (145) — остались ниже и легли под меню. На
телефоне у панели 150, и там всё работало. Здесь поднимаем их над
меню: крестик и нажатие мимо возвращают к меню, как на телефоне.
Просмотр карусели (170) и обрезка видео (175) остаются выше всех. */
.pv-sheet, .acc-sheet, .lang-sheet, .plan-sheet, .save-sheet,
.mld-sheet, .fr-sheet, .avc-sheet{z-index:165;}
/* ===== ТРЕТЬЯ ЗОНА: «О ТЕБЕ» И ЛИНИЯ ЖИЗНИ =====
Слово хозяина: «слева разговоры, посередине зона работы, справа о
тебе и твоя линия — класс». Сперва это вышло случайно и криво:
экраны стали колонками, и «О тебе» оказалась зажата без прокрутки.
Теперь то же самое, но нарочно и по-человечески.
Эти экраны не заменяют разговор — они стоят рядом с ним. Разговор
остаётся на виду, потому что человек смотрит на свою линию и тут же
рассказывает дальше. Ширина 520 точек: линия жизни и карточки людей
в неё влезают, а разговору остаётся достаточно.
Остальные экраны (правка, тарифы, курсы) — по-прежнему во всю
рабочую зону: они самостоятельные, разговор рядом им не нужен. */
/* Главный экран не должен выглядеть пустым: когда справа ничего не
открыто, разговор занимает всю зону, а дерево стоит по центру
колонки писем, а не посреди всего монитора (31 августа). */
/* Приветствие — в той же колонке, что и письмо (5 сентября). Раньше
оно было шире: человек видел один разлёт строк на пустом экране и
другой, как только начинал переписку. */
#pg-chat .aiyy-hero{max-width:720px;margin:0 auto;}
/* ===== ЛИНИЯ ЖИЗНИ СТОИТ РЯДОМ ВСЕГДА =====
31 августа, слово хозяина. Зона держится классом «линия-рядом» на
теле: он ставится при запуске на широком экране и снимается кнопкой,
если человек хочет убрать. Показываем ДАЖЕ БЕЗ класса «on» — этот
экран больше не «открывают», он просто есть. */
body.линия-рядом #pg-selfline{
display:flex!important;flex-direction:column;
left:auto;right:0;width:520px;
border-left:1px solid var(--line);background:var(--bg);
box-shadow:-8px 0 28px rgba(60,30,50,.06);}
body.линия-рядом #pg-chat{right:520px;}
#pg-myline.on, #pg-selfline.on, #pg-life.on,
#pg-kinline.on, #pg-person.on, #pg-contacts.on{
left:auto;right:0;width:520px;
border-left:1px solid var(--line);background:var(--bg);
box-shadow:-8px 0 28px rgba(60,30,50,.06);}
/* Пока справа открыта третья зона, разговор ужимается — иначе поле
ввода уезжает под неё. */
#body:has(#pg-myline.on) #pg-chat,
#body:has(#pg-selfline.on) #pg-chat,
#body:has(#pg-life.on) #pg-chat,
#body:has(#pg-kinline.on) #pg-chat,
#body:has(#pg-person.on) #pg-chat,
#body:has(#pg-contacts.on) #pg-chat{right:520px;}
/* ПРАВАЯ ЗОНА — ОДНО МЕСТО. 31 августа, слово хозяина: «по нажатию
на дерево она должна открыться вместо „Твоей линии“».
До этого дерево на мониторе не делало ничего видимого: «Свои люди»
вставали в ту же правую зону, но линия стоит в разметке ниже и
закрывала их собой. Проверено рендером — нажал, картинка не
изменилась. Теперь пока справа открыт другой экран, линия
прячется; закрыли его — линия на месте, как и была. */
#body:has(#pg-life.on) #pg-selfline,
#body:has(#pg-myline.on) #pg-selfline,
#body:has(#pg-kinline.on) #pg-selfline,
#body:has(#pg-person.on) #pg-selfline,
#body:has(#pg-contacts.on) #pg-selfline{display:none!important;}
/* «‹» С ЛИНИИ УБРАНА. Слово хозяина: «если линия не сворачивается,
то и стрелку назад оттуда надо убрать». Стрелка вела не назад,
а в «Своих людей» — на её месте стоит дерево: тот же вход, что и
на пустом экране, иначе из разговора с сообщениями (дерева на
нём уже нет) к людям было бы не попасть. На телефоне стрелка
остаётся: там линия — отдельный экран, и назад с него нужно. */
#pg-selfline .pback{display:none!important;}
/* ШАПКА ПАНЕЛИ — ЭТО НАЗВАНИЕ РАЗДЕЛА, А НЕ КАРТОЧКА ЧЕЛОВЕКА.
5 сентября, слово хозяина: «на ПК не видно слово Виджеты; вместо
Власий / день 13 403 и вместо этих кнопок напиши Виджеты».
Он прав по сути. Имя и счёт дней здесь повторялись дважды: они и
так стоят в блоке «Дней на земле» прямо под шапкой. А три кнопки
(скачать линию, загрузить, поделиться) — редкие действия, ради
которых занимать всю строку незачем; они переехали под знак «⋯».
На телефоне шапка остаётся прежней: там это отдельный экран, имя
в нём к месту, и места хватает. */
#pg-selfline #ml-meta{display:none;}
/* Кнопка виджетов в углу — только на мониторе: на телефоне панели
сбоку нет вовсе, и прятать нечего (5 сентября). */
#h-widgets{display:flex;}
body.виджеты-убраны #h-widgets{color:var(--wa);}
/* Язычок у кромки остаётся как запасной путь, но больше не главный. */
/* ===== ПАНЕЛЬ ВИДЖЕТОВ УБИРАЕТСЯ ЦЕЛИКОМ (5 сентября) =====
Убрали — разговор занимает всю ширину, у правого края остаётся
язычок в 22 точки, чтобы вернуть. Кнопка «›» видна всегда, а не
по наведению: прятать то, чем пользуются каждый день, — та же
ошибка, что была с «Настроить, что здесь» внизу панели. */
#pg-selfline .pshare.wfold{display:inline-flex;font-size:19px;line-height:1;}
body.виджеты-убраны #pg-selfline{display:none!important;}
body.виджеты-убраны #pg-chat{right:0;}
/* ЯЗЫЧОК У ПРАВОГО КРАЯ УБРАН. 9 сентября, слово хозяина: «мне кажется,
вот эта стрелка не нужна».
Не нужна. Заводили её, чтобы вернуть убранные виджеты, — но кнопка
«Виджеты» в шапке никуда не девается и делает то же самое. Выходило
два входа в одну дверь, причём второй — узкая полоска, прилипшая к
краю экрана посреди пустоты.
Сама кнопка в разметке осталась: она ничего не весит, а если язычок
когда-нибудь понадобится, хватит вернуть эти правила. */
#wshow{display:none;}
body.виджеты-убраны #wshow{display:none;}
#pg-selfline .pbi b{font-size:17px;font-weight:700;}
/* В шапке панели остаются две кнопки: «⋯» и «›». Прежние три уехали
под «⋯» ещё раньше; правило «показывать по наведению» больше не
нужно — прятать то, чем пользуются, мы уже пробовали. */
#pg-selfline .pshare{display:inline-flex;}
#pg-selfline .pshare.wfold{display:inline-flex;}
/* Дерева в шапке панели больше нет — место под него не держим. */
#pg-selfline .zone-tree{display:none!important;}
/* ЗНАК ПО ЦЕНТРУ КВАДРАТА. 5 сентября, слово хозяина: «почему
неправильно знак стоит внутри квадрата, почему так криво».
Кнопка — обычный