: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 сентября, слово хозяина: «светлая и розовая — это из дома: мама
       кормила нас кёрчэхом со смородиной, и ели мы это утром, в светлое
       время. А тёмное время не до еды. Розовый убрать, а то несерьёзно».

       Довод не про вкус, а про смысл, и он верный: у двух тем разные
       роли. Светлая — дом и утро, там розовый на месте и остаётся
       нетронутым. Тёмная — работа, ей нужен спокойный тёплый акцент.

       Берём терракотовый, как у Клода: он из той же тёплой семьи, что
       и фон (тон 15 против 60), поэтому не спорит с ним, а лежит рядом.
       Розовый в самих каруселях это не трогает — там цвета рисуются
       в кадре и живут своей жизнью. */
    --wa:#D97757; --wa-dark:#332B29; --wa-deep:#E08E6F; --wa-dark2:#A4512E;
    /* ЕЩЁ НА СТУПЕНЬ ТЕМНЕЕ. 7 сентября, второе слово хозяина: «у тебя
       чернее, я же просил 1в1». Первый заход дал #262624 — средний
       серый; у Клода полотно заметно глубже. Опускаем всё на ступень:
       ящик почти чёрный, полотно тёмное, карточки на нём читаются как
       карточки, а не сливаются с фоном. */
    --bg:#1A1A18; --panel:#262624;
    --ink:#F0EEE6; --ink-1:#F0EEE6; --ink-2:#C7C4B8; --ink-3:#93908899;
    --line:#333330;
    --amber:#F0A63C; --amber-soft:#3A3229;
  }
  /* Мягкий подсвет: сплошной, а не прозрачный — прозрачный розовый на
     тёмном даёт грязь. На тёплой основе он тоже тёплый. */
  html[data-theme="dark"]{ --wa-soft:#33302C; --ink-3:#938F86; }
  /* ПОЛОСА «АЙЫЫ СОБИРАЕТ» НА ТЁМНОМ. 14 сентября, снимок хозяина:
     презентация собиралась, а на экране была пустая тёмная плашка —
     «на тёмном фоне тёмный шрифт».

     Так и есть. У .car-load фон берётся из --wa-soft, и на тёмной теме
     он темнеет (строка выше), а текст стоит на --wa-dark — тёмно-сливовый
     и в тёмной теме не меняется. Тёмное по тёмному. Кружок-вертушка
     светлый, поэтому он один и был виден.

     Тем же местом лечится и надпись «не получилось собрать»: правило
     одно на обе. */
  html[data-theme="dark"] .car-load{ color:#E9CFE2; }
  /* Ящик разговоров на ступень темнее полотна — как у Клода: взгляд
     сразу отделяет список от работы. */
  /* Стоит ПОСЛЕ общего списка (строка ~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:#F5D9CB; border-color:var(--wa);
    background:#3A2A22;}
  html[data-theme="dark"] .car-font-l{color:var(--ink-3);}
  /* Пометка «!» у шрифта без якутских букв: тёмно-красный на тёмном
     не читается. */
  html[data-theme="dark"] .car-f i{color:#F0846F;}

  /* ===== ТЁМНАЯ ТЕМА: ВШИТЫЕ ЦВЕТА ===== 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"] .ck-bar .ck-b,
  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:#141413;}

  /* Карточка «Төһө бардын» была фиолетовой — последнее розово-лиловое
     пятно в тёмной теме (7 сентября). Тёплая, из той же семьи, что фон
     и акцент. */
  html[data-theme="dark"] .mlnow{
    background:linear-gradient(155deg,#33241C,#4A3324);}

  /* СВОИ СООБЩЕНИЯ: ТЁМНЫЕ БУКВЫ НА РОЗОВОМ. Померено 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:#2E2E2B;color:var(--ink);
    border:1px solid #3B3B37;}

  /* ===== ПЛАШКА СООБЩЕНИЙ И ОШИБОК =====

     7 сентября, слово хозяина: «когда ошибки выходят, они ужасно белого
     цвета». Так и есть: плашка красится в --ink, а в тёмной теме это
     почти белый — белые буквы на белом фоне, то есть сообщения об
     ошибке не видно вовсе. Раньше --ink был тёмным, и правило работало.

     В тёмной теме плашка тёмная, буквы светлые, рамка как у карточек. */
  html[data-theme="dark"] .toast{background:#30302E; 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:#33302C; 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:#241A14;}

  /* ===== СТОПКА «СОБРАТЬ» =====

     Кружки и подписи были фиолетово-розовыми числами (#3a2434) — с новой
     тёплой темой они выпадали из общего вида (7 сентября). */
  html[data-theme="dark"] .fab-item button{background:#33302C;}
  html[data-theme="dark"] .fab-item button:active{background:#403C36;}
  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:#241A14;}
  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:'Montserrat', 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;}
  #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;} }
  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:'Montserrat',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','Montserrat',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:'Montserrat',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:'Montserrat',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-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:'Montserrat',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;}
  /* Одиночное вложение раньше рисовалось <img> без размеров: чёрная
     обложка растягивалась на весь пузырь. Теперь оно в той же сетке. */
  .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:'Montserrat',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:'Montserrat',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:'Montserrat',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:'Montserrat',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:'Montserrat',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}
.car-f i{font-style:normal;color:#c0392b;margin-left:5px;font-weight:700}
/* РЯД ШРИФТОВ НЕ МЕНЯЕТ ВЫСОТУ. 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:'Montserrat',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:140;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}
/* Отступ меньше прежнего: описание из блока убрано 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:'Montserrat',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:'Montserrat',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-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:'Montserrat',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:'Montserrat',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:'Montserrat',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:'Montserrat',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:'Montserrat',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}

/* ---------- сколько экранов: ползунок до сборки ---------- */
/* Поле «Что поправить?» в окне пересборки (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:'Montserrat',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;}

/* Предупреждение про cookie. Лежит поверх всего у нижнего края, как на
   любом сайте: человек ждёт его именно там. Появляется снизу вверх —
   без движения его принимают за часть экрана и не замечают. */
.ck-bar{position:absolute;left:0;right:0;bottom:0;z-index:300;padding:10px;
  transform:translateY(120%);transition:transform .28s var(--в);pointer-events:none;}
.ck-bar.on{transform:translateY(0);pointer-events:auto;}
.ck-bar .ck-b{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:15px 16px 14px;box-shadow:0 6px 26px rgba(30,16,28,.18);}
.ck-bar .ck-t{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;
  color:var(--ink);margin-bottom:6px;}
.ck-bar .ck-p{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-bottom:12px;}
.ck-bar .ck-p a{color:var(--wa-deep);}
.ck-bar .ck-ok{width:100%;padding:13px;border-radius:11px;border:none;background:var(--wa);
  color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.ck-bar .ck-ok:active{background:var(--wa-deep);}

/* Полоска «скажи дату рождения» над строкой ввода. Живёт в потоке, а не
   поверх: всплывающее окно посреди разговора раздражает сильнее, чем
   помогает, а эту человек прочтёт между делом и закроет одним нажатием. */
.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;
}
@font-face{
  font-family:'Onest';
  src:url('../fonts/Onest-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
/* 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» стояло в запасной цепочке по всему
   приложению — в тридцати восьми местах вида «"Montserrat", "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:'Montserrat',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:'Montserrat',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:#3E3E3A;}
*{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:#241A14;}

.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 сентября, слово хозяина: «почему
     неправильно знак стоит внутри квадрата, почему так криво».

     Кнопка — обычный <button> с текстом внутри: браузер ставит букву
     по базовой линии шрифта, а не по середине рамки. У «›» и «⋯»
     нижние вылеты разной высоты, оттого и косо. Выравниваем содержимое
     флексом — тогда любой знак встаёт ровно посередине. */
  #pg-selfline .pshare{align-items:center;justify-content:center;padding:0;}

  /* НАЗВАНИЕ ПО ЦЕНТРУ. Слева дерево, справа две кнопки — они разной
     ширины, и при обычном потоке «Виджеты» вставали бы левее середины.
     Кладём в центр жёстко, тем же приёмом, что и название разговора. */
  #pg-selfline .pbar{position:relative;}
  #pg-selfline .pbi{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:auto;max-width:52%;text-align:center;}
  .zone-tree{display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:10px;border:none;
    background:var(--wa-soft);flex:0 0 auto;cursor:pointer;padding:0;}
  .zone-tree img{width:26px;height:26px;display:block;}
  .zone-tree:active{opacity:.75;}

  /* Полоса с названием у «Своих людей» и «О тебе» — только здесь.
     На телефоне их называет фиолетовая шапка, на мониторе её нет,
     и экран справа стоял без имени и без выхода. «‹» ведёт обратно:
     у людей — к линии, у «О тебе» — к людям, откуда в него заходят. */
  .zone-bar{display:flex;}
  /* ---- ящик разговоров всегда открыт ---- */
  /* Ящик от самого верха до низа и всегда на месте. */
  .chatlist{transform:none!important;transition:none;
    box-shadow:none;border-right:1px solid var(--line);}
  .cl-shade{display:none!important;}
  /* Крестик «закрыть» на мониторе не нужен: ящик никуда не убирается.
     Кнопка его открытия во вкладках — тоже (31 августа, по снимку). */
  .cl-x{display:none!important;}
  .aiyy-tab.ico[onclick*="openChatList"]{display:none!important;}
  .cl-head{padding:20px 18px 14px;}

  /* ---- правая часть ---- */
  #pg-chat{display:flex;flex-direction:column;min-width:0;}

  /* Правила про положение фиолетовой шапки на мониторе сняты 31 августа
     вместе с самой шапкой (см. #phone > .hdr выше). Ящик и работа
     начинаются от самого верха окна. */
  #phone{position:relative;}
  .chatlist{margin-top:0;}

  /* ---- переписка ---- */
  /* Строка во всю ширину монитора не читается: держим колонку письма
     по центру, как в книге. */
  /* КОЛОНКА ПИСЬМА — 720, А НЕ 860. 5 сентября.

     Померил на живом экране 1400 точек: с открытой панелью виджетов
     разговору достаётся 560 — это 65 знаков в строке, впритык к нижней
     границе читаемости. Убрал панель — стало 1080, и колонка растянулась
     до 860, а это уже под сто знаков: глаз не находит начало следующей
     строки и перечитывает её заново.

     Ширина колонки не должна зависеть от того, открыта панель или нет.
     720 при кегле 16 даёт около 75 знаков — верхняя граница того, что
     читается без усилия. Убрал панель, вернул — текст выглядит
     одинаково, меняются только поля вокруг. */
  .aiyy-scroll{padding:0 26px;}
  .aiyy-scroll > *{width:100%;max-width:720px;margin-left:auto;margin-right:auto;}
  /* ВЕРХНЯЯ СТРОКА: НАЗВАНИЕ ПО ЦЕНТРУ, КНОПКИ ПО КРАЯМ.

     31 августа, слово хозяина: «кнопка вызова „твоя линия“ висит
     посередине, а должна быть с краю; новый разговор и АЙЫЫ пусть стоят
     посередине». Прошлые попытки я делал вслепую, по догадке об именах.
     Теперь по разметке: название разговора — .aiyy-mark, правые кнопки —
     .aiyy-right, слева кнопка ящика (на мониторе скрыта).

     Название растягиваем на всё свободное место и центруем в нём, а
     правую группу прижимаем к краю. Тогда положение не зависит от того,
     сколько кнопок слева видно. */
  /* КНОПКА У КРАЯ — ЖЁСТКО, А НЕ ВЫРАВНИВАНИЕМ.

     Я трижды пытался прижать её к краю через flex, и трижды мимо: строка
     ведёт себя не так, как я предполагал, а проверить своими глазами я
     не могу. Поэтому кладу кнопку в угол прямо: строка — точка отсчёта,
     кнопка прибита к её правому краю, название занимает всю ширину и
     стоит по центру. Тут ошибиться уже негде. */
  /* НАЗВАНИЕ РАЗГОВОРА — РОВНО ПО ЦЕНТРУ, КАК «АЙЫЫ» НАД НИМ.

     31 августа, слово хозяина: «АЙЫЫ сверху, новый разговор снизу, оба
     посередине, ровно над деревом». Выравниванием я это уже пробовал —
     мимо. Поэтому и название кладу в центр жёстко: середина строки,
     сдвиг на половину своей ширины. Так оно встаёт под словом АЙЫЫ и
     над деревом, что бы ни творилось с соседями по строке.

     Строка держит высоту сама (min-height): все трое внутри стоят
     отдельно от потока, и без этого она бы схлопнулась. */
  /* СТРОКА РАЗГОВОРА — ВРОВЕНЬ С СОСЕДЯМИ. 31 августа, слово хозяина:
     «чат слишком высоко начинается, опустить до линии „Разговоры“ и
     „Твоя линия“, чтобы ровно было».

     Мерил рендером: «Разговоры» стоят по центру на 32-й точке, кнопка
     в шапке линии — на 31-й, а название разговора было на 23-й. Строке
     даём ту же высоту, что у шапки линии (60 + черта), название по
     центру — и все три колонки начинаются с одной линии. */
  .aiyy-top{position:relative;max-width:none!important;width:100%;
    box-sizing:border-box;margin:0;padding:0 26px;display:block;
    min-height:62px;}
  /* Название по центру, но не под правой группой. 52% хватало, пока
     справа было пусто; с кнопками «Виджеты» и «Перейти в Старт» группа
     занимает 234 точки, и на узком мониторе название налезало на неё
     (померено: 70 точек внахлёст при 1280). Оставляем ему середину
     между ящиком и группой — 260 точек по краям с запасом. */
  .aiyy-mark{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:auto;max-width:calc(100% - 520px);padding:0;text-align:center;}
  /* КНОПКИ В СТРОКЕ НЕТ ВОВСЕ. 31 августа, слово хозяина: «даже свернув
     твою линию мы видим такой ужасный интерфейс — убери кнопку с
     середины экрана».

     Кнопка открывала линию. Линия теперь стоит справа постоянно, и
     открывать нечего: кнопка осталась висеть посреди пустой строки и
     только портила вид. Убираем — в строке остаётся одно название
     разговора по центру, и промахнуться с её положением больше негде.

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

     Прячем в ней только старую кнопку линии (она и правда никуда не
     ведёт), а сама группа видима: в ней стоят «Виджеты» и «Перейти
     в Старт». */
  /* ПРАВАЯ ГРУППА — У ПРАВОГО КРАЯ, А НЕ В ПОТОКЕ. 5 сентября, слово
     хозяина: «почему эта кнопка стоит рядом с „Разговоры“?».

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

     Кладу её в правый угол так же жёстко, как название в центр: строка —
     точка отсчёта, группа прибита к её правому краю. Тем же способом,
     каким 31 августа чинилось положение названия, и по той же причине —
     выравниванием тут уже промахивались. */
  .aiyy-right{display:flex!important;position:absolute;right:26px;top:50%;
    transform:translateY(-50%);gap:8px;align-items:center;}
  .aiyy-right > .aiyy-tab.ico.right[onclick*="openMyLine"]{display:none!important;}
  /* Кнопка ящика слева на мониторе скрыта — место под неё не держим. */
  .aiyy-top > .aiyy-tab.ico:first-child{position:absolute;left:26px;
    top:50%;transform:translateY(-50%);}

  /* Здесь стояли правила для кнопки «‹ АЙЫЫ», отбивки шапки и её
     названия по центру. Все сняты 31 августа: шапки на мониторе нет,
     а мёртвые правила ниже по файлу уже однажды стоили часа
     (.aiyy-top{max-width:992px}). */
  .cmsg-b{max-width:70%;}
  .cmsg-b img{max-height:60vh;object-fit:contain;}
  .aiyy-input-wrap{padding:12px 26px 18px;}
  /* Строка ввода стоит в той же колонке, что и письмо: иначе поле
     съезжает относительно текста, к которому оно относится. */
  .aiyy-input{max-width:720px;margin:0 auto;}
  /* ПОД ОДНУ ШИРИНУ С ПОЛЕМ ВВОДА. 8 сентября, слово хозяина: «может фото
     над „напишите сообщение“ поставятся? А то стоят слишком широко,
     вообще не айс».

     Стояли они и правда над полем — но во всю ширину разговора, а поле
     сужено до 720 и стоит по центру. Полоска на полтора экрана над узким
     полем и есть та самая ширина. Всё, что живёт над вводом, теперь
     держится той же колонки: и снимки, и подсказки, и плашки. */
  .chat-attach, .chips-wrap, .chat-hook, .ins-bar, .bday-ask{
    max-width:720px;margin-left:auto;margin-right:auto;}

  /* ПОЛЕ ВВОДА ВЫШЕ. 5 сентября.

     Померил: 39 точек высоты — полоска на одну строку. Она говорит
     «напиши запрос», а нам нужно ровно обратное: человек должен
     рассказать про свой день, а из одной фразы карусель не собрать.
     Высота поля — это обещание, и наше обещание было неверным.

     78 точек — это две строки текста плюс поля. Не пустая трата места:
     до этой высоты поле и так дорастало, стоило начать вторую строку.
     Теперь оно с этого начинается, а дальше растёт как росло, до 168.

     Только на мониторе: на телефоне экран короткий, и лишние 39 точек
     там отняли бы строку переписки. */
  /* СТРОКА ВВОДА ВЫРОВНЕНА. 5 сентября, слово хозяина: «почему
     „напишите сообщение“ такое уродское».

     Виноват я, вчерашней правкой. Я поднял высоту у самого поля
     (min-height у textarea), а строка выравнивает содержимое по НИЖНЕМУ
     краю — align-items:flex-end. Поле выросло вверх, подпись уехала под
     потолок, а «+» и микрофон остались внизу: три вещи на трёх разных
     высотах.

     Правильно так: высоту держит САМА СТРОКА, а содержимое стоит по
     центру. Тогда подпись, «+» и микрофон на одной линии, а при длинном
     рассказе строка растёт вниз, как и росла. */
  .aiyy-input{padding:8px 10px 8px 16px;border-radius:22px;
    min-height:74px;align-items:center;}
  .aiyy-input textarea{font-size:16px;line-height:1.5;padding:4px 0;}

  /* ДЕРЕВО ДЕРЖИТСЯ СТРОКИ ВВОДА. 5 сентября.

     Кнопка сборки прижата к правому краю ВСЕГО разговора. Пока разговор
     был узким, она стояла у поля ввода и читалась как его часть. Стоило
     убрать панель виджетов — разговор стал 1080 точек, колонка письма
     осталась 720, и дерево уехало в пустое поле справа: висит само по
     себе, непонятно к чему относится.

     Лечится тем же, чем и колонка: обёртка кнопки получает ширину
     письма и встаёт по центру. Кнопка остаётся у правого края — но
     теперь у правого края СТРОКИ ВВОДА, а не окна.

     Заодно уменьшаю её с 52 до 44 и опускаю к строке: на мониторе
     кнопка не пальцем нажимается, ей не нужен размер под палец, а
     тяжёлый кружок в 52 точки спорил с самим полем. */
  /* ВСЁ ЭТО ОТМЕНЕНО 8 сентября вместе с переносом кнопки в строку ввода.

     Правила выше держали ПЛАВАЮЩИЙ кружок: обёртку в 720 точек, кружок
     поменьше, а список — прибитым к обёртке (position:absolute) и в
     семидесяти точках над ней. Кнопка переехала в строку, обёртка стала
     пустой полосой высотой в ноль — и список продолжал считать место от
     неё: выскакивал посреди разговора, поверх сообщений.

     Слово хозяина: «выскакивает в одном месте, возвращается в другом,
     ужасная анимация».

     Теперь место у списка одно на все экраны: он прибит к окну и встаёт
     ровно над своей кнопкой, а считает это fabMakeOpen по её настоящему
     месту. Ни телефону, ни монитору отдельных правил не нужно. */
  .makefab{max-width:720px;margin-left:auto;margin-right:auto;}
  .aiyy-input textarea{font-size:16px;}

  /* ---- карусель: на мониторе видно сразу несколько экранов ---- */
  .car-strip{gap:14px;}
  .car-slide,.car-add-cell{width:190px;}
  .car-view img{max-height:82vh;}

  /* ===== ВСЕ ОКНА — ПО ЦЕНТРУ, А НЕ ВО ВСЮ ШИРИНУ =====

     31 августа, слово хозяина про редактор стикера: «кто будет работать
     в таком редакторе?». Окно растянулось на весь монитор, кнопки
     настроения разъехались по метру друг от друга — работать в таком
     и правда нельзя.

     Причина моя: в приложении ДВЕНАДЦАТЬ семейств окон (.pv-sheet,
     .acc-sheet, .plan-sheet, .lang-sheet и другие), а я чинил одно —
     .sheet. Остальных просто не видел. Устроены все одинаково: тёмная
     подложка во весь экран, внутри белая коробка, прижатая к низу. На
     телефоне это правильно, на мониторе — нет.

     Поэтому правим не по одному, а разом: подложка ставит коробку по
     центру, коробка получает разумную ширину и скруглённые углы со всех
     сторон. Ширину даём с запасом на содержимое: в редакторе стикера
     три ряда кнопок, им нужно место. */
  .sheet{left:50%;right:auto;bottom:auto;top:50%;
    transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none;
    width:min(680px,88vw);max-height:86vh;border-radius:20px;
    box-shadow:0 24px 80px rgba(40,20,35,.28);transition:opacity .2s var(--в),transform .2s var(--в);}
  .sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}

  .pv-sheet, .acc-sheet, .lang-sheet, .plan-sheet, .save-sheet,
  .mld-sheet, .fr-sheet, .fb-sheet, .vt-sheet{
    align-items:center!important;justify-content:center!important;}

  /* ОКНО ЧЕЛОВЕКА ВО ВСЮ ШИРИНУ. 31 августа, снимок хозяина: карточка
     Билла Гейтса из «В твой день» растянулась на весь монитор.

     Причина — правило ниже метило в класс, которого нет: .fr-b. Ящик
     у этой семьи окон зовётся .fr-sh-b (новость, человек из «В твой
     день», вдохновение — все три). Той же ошибкой был .fb-b: у окон
     обратной связи ящик — .fb-box. Проверено по разметке всех
     двенадцати семей: остальные имена верны. */
  .pv-sheet .pv-b, .acc-sheet .acc-b, .lang-sheet .lang-b,
  .plan-sheet .plan-b, .save-sheet .ss-b, .mld-sheet .mld-b,
  .fr-sheet .fr-sh-b{
    width:min(720px,86vw)!important;max-width:720px!important;
    max-height:84vh!important;border-radius:20px!important;
    box-shadow:0 24px 80px rgba(40,20,35,.30);}
  /* Окна обратной связи уже, чем остальные: форма на 720 точек —
     это поле ввода в полметра. Свою ширину они держат сами, здесь
     только углы и тень, как у окна, а не у выезжающего снизу листа. */
  .fb-sheet .fb-box{border-radius:20px!important;max-height:84vh!important;
    box-shadow:0 24px 80px rgba(40,20,35,.30);}
  /* Линия внутри окна человека: на телефоне ей дают 46% высоты экрана,
     чтобы шапка окна с крестиком не уезжала при прокрутке. В окне на
     84vh список может быть выше — шапка всё равно остаётся на месте. */
  .fr-sheet .fr-sh-b .td-life{max-height:calc(84vh - 230px);}

  /* Ряды кнопок внутри окон не растягиваем на всю ширину: кнопка
     «Приветствие» шириной в полметра выглядит нелепо и по ней трудно
     попасть глазом. */
  .pv-sheet .pv-b .stk-moods,
  .pv-sheet .pv-b .stk-row{max-width:640px;margin-left:auto;margin-right:auto;}

  /* ---- правка фото: было и стало крупно, рядом ---- */
  /* Тот же класс-призрак, что у окон (31 августа): .pe-wrap и .pe-box в
     разметке нет, лист редактора зовётся .pe-b — правило не работало, и
     редактор на мониторе стоял в 360 точек. */
  .pe .pe-b{width:min(920px,92vw)!important;max-width:920px!important;}
  .pe-pics{gap:16px;}
  .pe-pics img{max-height:46vh;}
  .pe-b{padding:22px 26px 0;}

  /* ---- тарифы в два столбца ---- */
  .plan-sheet .plan-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
  .plan-sheet .plan-why,.plan-sheet .tok-box{grid-column:1 / -1;}
  /* БЛОК КОНТОР — ВО ВСЮ ШИРИНУ. 13 сентября: на мониторе список тарифов
     это сетка в две колонки, а заголовок «Тэрилтэлэргэ» я поставил
     обычным блоком — он занял свободную ячейку справа и повис в пустоте
     отдельно от своей карточки. Заголовок и карточка — одно целое,
     значит оба тянутся на всю ширину и стоят друг под другом. */
  .plan-sheet .plan-org-h,.plan-sheet .plan-i.org{grid-column:1 / -1;}
  .plan-sheet .plan-org-h{margin-top:8px;}

  /* Плавающая кнопка не должна висеть посреди пустоты. */
  .fab-wrap{right:34px;bottom:34px;}
}

/* Очень широкий монитор: колонки шире. */
@media (min-width:1500px){
  .chatlist{width:360px;max-width:360px;}
  .pg{left:360px;}
  #pg-chat.on{left:360px;}
  .panel{width:min(620px,88vw);max-width:620px;}
  body.линия-рядом #pg-selfline{width:600px;}
  body.линия-рядом #pg-chat{right:600px;}
  #pg-myline.on, #pg-selfline.on, #pg-life.on,
  #pg-kinline.on, #pg-person.on, #pg-contacts.on{width:600px;}
  #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:600px;}
  /* На очень широком мониторе колонку не расширяем: 940 знаков в строке
     читаются ХУЖЕ, чем 720, а не лучше. Растут только поля (5 сентября). */
  .aiyy-scroll > *{max-width:720px;}
  .aiyy-input{max-width:720px;}
  /* .aiyy-top{max-width:992px} УБРАНО 31 августа.

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

     Строка должна идти во всю рабочую зону: колонкой держится только
     текст писем, а не шапка над ними. */
}

/* ВКЛАДКИ В ОКНЕ ТАРИФОВ. 1 сентября: подписка · токены · история. */
.plan-tabs{display:flex;gap:6px;margin:0 0 12px;}
.plan-tab{flex:1;padding:9px 6px;border:none;border-radius:10px;cursor:pointer;
  background:var(--wa-soft);color:var(--ink-2);font-size:13.5px;font-weight:700;
  font-family:inherit;}
.plan-tab.on{background:var(--wa);color:#fff;}
.plan-per{display:flex;gap:6px;margin:0 0 12px;}
.plan-pb{flex:1;padding:9px 6px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink-2);font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:inherit;}
.plan-pb.on{border-color:var(--wa);color:var(--wa-deep);background:var(--wa-soft);}
.plan-pb i{font-style:normal;color:var(--wa-deep);font-size:12px;}
.plan-p s{opacity:.5;font-weight:400;}
/* История трат: дата · за что · сколько. */
.hist{display:flex;flex-direction:column;}
.hist-r{display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-bottom:1px solid var(--line);font-size:13.5px;}
.hist-d{flex:0 0 auto;color:var(--ink-3);font-size:12px;min-width:64px;}
.hist-d span{opacity:.7;}
.hist-w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hist-n{flex:0 0 auto;font-weight:800;color:var(--ink-2);}
.hist-n.plus{color:#2E7D32;}

/* Выбор, когда стикеры кончились: токены · тариф · потом (1 сентября). */
.stk-more{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;}
.stk-more-b{flex:1 1 44%;padding:11px 8px;border-radius:12px;border:1.5px solid var(--wa);
  background:#fff;color:var(--wa-deep);font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;}
.stk-more-b.main{background:var(--wa);color:#fff;border-color:var(--wa);}
.stk-more-b.thin{flex:1 1 100%;border-color:var(--line);color:var(--ink-3);font-weight:600;}
.stk-more-d{flex:1 1 100%;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px;}

/* СТИКЕР НА МОНИТОРЕ — В КОЛОНКУ, А НЕ ВО ВСЮ ШИРИНУ. 1 сентября, снимок
   хозяина: наклейка вылезла на весь экран, в кадре остался один венок.

   Причина. Окна стикера (#stk-view — показ готовых, #stk-arch — «Мои
   стикеры») лежат на #phone во всю его ширину, а сама картинка внутри
   стоит width:100%. На телефоне #phone — 390 точек, и всё правильно;
   после переноса приложения на монитор он стал во всё окно, и та же
   сотня процентов превратилась в 1900 точек.

   Держим содержимое в колонке той же ширины, что и телефон: стикер
   квадратный, и больше 420 точек ему ни к чему — он всё равно уйдёт в
   переписку размером с ноготь. На телефоне правило ничего не меняет:
   там ширина окна и так меньше предела. */
#stk-view, #stk-arch{align-items:center;}
#stk-view > *, #stk-arch > *{width:100%;max-width:420px;box-sizing:border-box;}

/* ТЕНЬ ВМЕСТО СПЛОШНОЙ ЛИНИИ. 1 сентября, второе правило из того же набора.

   Сплошная рамка режет глаз и делает карточку плоской наклейкой: линия
   одинаково темна со всех сторон, а в жизни свет падает сверху. Мягкая
   тень отделяет не хуже, но даёт глубину и не спорит с содержимым.

   Меняем не везде — 265 рамок в файле, и большая часть держит разметку
   (полосы списков, разделители). Берём только карточки, на которые
   человек смотрит и выбирает: тарифы и пакеты токенов. Рамка не убрана
   совсем, а ослаблена до полупрозрачной — иначе на тёмной теме карточка
   растворится. */
.plan-sheet .plan-i{border-color:rgba(40,20,35,.06);box-shadow:var(--тень-1);
  transition:box-shadow .18s var(--мяг), border-color .18s var(--мяг);}
.plan-sheet .plan-i.cur{box-shadow:var(--тень-2);}
.tok-p{border-color:rgba(199,125,168,.35);box-shadow:var(--тень-1);
  transition:box-shadow .18s var(--мяг), border-color .18s var(--мяг), transform .14s var(--в);}
.tok-p:active{transform:scale(.985);box-shadow:var(--тень-2);}

/* Карточка для организаций в списке тарифов (1 сентября). Отличается от
   личных: без цены за месяц и без «Выбрать» — у контор счёт и договор. */
.plan-sheet .plan-i.org{background:var(--wa-soft);border-color:rgba(199,125,168,.28);}
/* Строка «кому» у контор шла крупной и чёрной — крупнее названия тарифа.
   Даём тот же вид, что у личных карточек (1 сентября). */
.plan-sheet .plan-i.org .plan-w{font-size:13px;font-weight:700;color:var(--wa-deep);}
/* ОКНО «КАК РИСУЕМ?» (13 сентября). Спрашиваем до траты токена: что
   рисовать, что должно быть в кадре, каким должен быть стиль. */
.cw-back{position:fixed;inset:0;z-index:1200;background:rgba(20,10,16,.55);
  display:flex;align-items:flex-end;justify-content:center;}
@media (min-width:720px){ .cw-back{align-items:center;} }
/* ОКНО «КАК РИСУЕМ?» НА ТЁМНОЙ ТЕМЕ. 14 сентября, снимок хозяина.

   Фон коробки брался из переменной --bg-1, а такой переменной в
   приложении нет вовсе — ни в светлой теме, ни в тёмной. Работала
   только запаска «#fff», и работала всегда: на тёмной теме выходила
   белая коробка, а буквы в ней — светлые, из общей темы. Белым по
   белому: заголовок «Как рисуем?» пропадал, а тёмное поле ввода
   висело на белом посреди тёмного экрана.

   Берём --bg: он задан в обеих темах, белый в светлой и тёмный в
   тёмной, и коробка встаёт как все прочие окна. */
.cw-box{background:var(--bg);width:min(520px,100%);max-height:88vh;overflow:auto;
  border-radius:18px 18px 0 0;padding:16px 16px 20px;box-shadow:var(--тень-2);}
@media (min-width:720px){ .cw-box{border-radius:18px;} }
.cw-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cw-h b{font-size:17px;font-weight:800;color:var(--ink-1);}
.cw-close{background:none;border:none;font-size:19px;color:var(--ink-3);cursor:pointer;
  padding:4px 6px;line-height:1;}
/* ИМЯ РАЗВЕДЕНО. 15 сентября: «Айыы интернетынан көрдүүр» вылезала
   огромной плашкой на телефоне. Причина не в шрифте — класс cw-t был
   объявлен дважды. Выше, в полоске ожидания, он значит «мелкий серый
   текст». Здесь значил «поле ввода во всю ширину с рамкой». Это правило
   стоит в файле ниже и при равном весе побеждало — полоска получала
   рамку, скругление и отступы и раздувалась на всю строку.
   Полю карусели даём своё имя; полоска остаётся как была. */
.cw-area{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;font:inherit;font-size:15px;color:var(--ink-1);background:transparent;
  resize:vertical;}
.cw-slots{display:flex;gap:12px;margin-top:14px;}
.cw-slot{flex:1;min-width:0;}
.cw-lab{font-size:12.5px;color:var(--ink-3);line-height:1.35;margin-bottom:6px;min-height:34px;}
.cw-add{width:100%;height:92px;border:1.5px dashed var(--line);border-radius:12px;
  background:transparent;color:var(--ink-3);font-size:26px;cursor:pointer;}
.cw-pic{position:relative;height:92px;border-radius:12px;overflow:hidden;}
.cw-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.cw-x{position:absolute;top:5px;right:5px;width:24px;height:24px;border:none;
  border-radius:50%;background:rgba(20,10,16,.62);color:#fff;font-size:13px;
  cursor:pointer;line-height:1;}
/* Карандаш — заменить снимок, слева от крестика. Тот же вид и размер:
   это два действия одного ряда, и выделять одно из них незачем. */
.cw-e{position:absolute;top:5px;right:34px;width:24px;height:24px;border:none;
  border-radius:50%;background:rgba(20,10,16,.62);color:#fff;font-size:13px;
  cursor:pointer;line-height:1;}
.cw-go{width:100%;margin-top:16px;padding:15px 18px;border:none;border-radius:14px;
  background:var(--wa);color:#fff;font-size:16px;font-weight:800;cursor:pointer;}

/* Замок на пакетах токенов для бесплатного тарифа (13 сентября).
   Не серые кнопки и не пустота: объяснение и дорога на тариф. */
.tok-gate{background:var(--wa-soft);border:1px solid rgba(199,125,168,.28);
  border-radius:14px;padding:16px;text-align:center;margin-top:12px;}
.tok-gate b{display:block;font-size:15px;font-weight:800;color:var(--ink-1);}
.tok-gate span{display:block;font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:6px;}
.tok-gate button{margin-top:12px;padding:12px 18px;border-radius:12px;background:#fff;
  color:var(--wa-deep);border:1.5px solid var(--wa);font-size:14.5px;font-weight:800;
  cursor:pointer;}

/* Заголовок и ряды пакетов у контор (13 сентября). Тэрилтэ вынесен из
   общего ряда тарифов: он не четвёртая ступень, а другой способ купить. */
.plan-org-h{font-size:13px;font-weight:800;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;margin:18px 0 8px;}
.org-rows{margin-top:10px;border-top:1px solid rgba(199,125,168,.22);}
.org-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid rgba(199,125,168,.22);}
.org-row b{font-size:14px;font-weight:800;color:var(--ink-1);min-width:74px;}
.org-row span{font-size:14px;font-weight:700;color:var(--wa-deep);}
.org-row i{font-size:12.5px;font-style:normal;color:var(--ink-3);
  margin-left:auto;white-space:nowrap;}
.plan-buy.org{display:block;width:100%;box-sizing:border-box;text-align:center;
  padding:13px 10px;border-radius:12px;background:#fff;color:var(--wa-deep);
  border:1.5px solid var(--wa);font-size:14.5px;font-weight:800;text-decoration:none;
  margin-top:12px;}

/* «Скачать память файлом» в окне «Поделиться линией» (2 сентября). */
.sh-app.sh-file{flex-basis:100%;background:var(--wa-soft);color:var(--wa-deep);font-weight:700;}

/* Погода под событием на линии (2 сентября): «🌡 −41° · метель». */
.llpi-w{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;min-height:0;}
.llpi-w:empty{display:none;}

/* ЛИСТИКИ ДНЯ (2 сентября). Жёлтые, как бумажка на мониторе, — не кнопка. */
/* Воздух вокруг листиков и черта под ними: впритык к счётчику и к линии
   они читались как одна куча (снимок хозяина, 2 сентября). */
.mlnotes{margin:18px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.mlnotes:empty{display:none;}
.notes-row{display:flex;flex-wrap:wrap;gap:8px;}
.note{position:relative;width:calc(33.333% - 6px);min-height:64px;background:#FFF3A8;
  border-radius:3px 3px 12px 3px;box-shadow:0 2px 6px rgba(120,90,0,.18), inset 0 -18px 0 rgba(0,0,0,.02);
  transform:rotate(-.6deg);padding:8px 22px 8px 9px;box-sizing:border-box;}
.note:nth-child(2n){transform:rotate(.7deg);background:#FFEE8C;}
.note:nth-child(3n){transform:rotate(-.3deg);background:#FFF6B8;}
.note-t{font:600 13px/1.3 "Caveat","Comic Sans MS",Inter,sans-serif;font-size:14px;color:#3A2E00;
  outline:none;min-height:34px;word-break:break-word;}
/* Подпись «что сегодня» на пустом листике убрана 2 сентября: пусто и есть пусто. */
.note-x{position:absolute;top:3px;right:4px;border:none;background:transparent;color:#C0392B;
  font-size:12px;font-weight:700;cursor:pointer;padding:3px 5px;line-height:1;opacity:.55;}
.note-x:hover{opacity:1;}
/* Зелёная галочка «сделал» — внизу справа, уходит в линию (2 сентября). */
.note-ok{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;
  border:none;background:#2E9E5B;color:#fff;font-size:14px;font-weight:800;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.2);opacity:.9;}
.note-ok:hover{opacity:1;transform:scale(1.06);}
.note{padding-bottom:34px;}
/* Плюс — строго по центру. Он наследовал отступы листика (справа под
   крестик, снизу под галочку) и уезжал влево-вверх. Снимок хозяина,
   2 сентября: «перфекционисты увидят и дропнут». */
.note-add{display:flex;align-items:center;justify-content:center;padding:0;font-size:26px;font-weight:300;
  line-height:1;color:#A08B2A;background:#FFF9D6;border:1.5px dashed #E0CF6A;box-shadow:none;transform:none;cursor:pointer;}
.notes-hint{font-size:12px;color:var(--ink-3);margin-top:8px;}
@media (max-width:480px){ .note{width:calc(50% - 4px);} }
/* Вечерний вопрос. */
.notes-ask{background:var(--wa-soft);border-radius:12px;padding:12px 12px 10px;margin-bottom:10px;}
.notes-ask b{display:block;font-size:14px;margin-bottom:8px;color:var(--wa-deep);}
.notes-ask-i{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid rgba(199,125,168,.18);font-size:13.5px;}
.notes-ask-i span{flex:1;min-width:0;}
.notes-ask-i button{border:none;background:var(--wa);color:#fff;border-radius:9px;padding:6px 10px;font-size:12.5px;font-weight:700;cursor:pointer;}
.notes-ask-i button.thin{background:transparent;color:var(--ink-3);border:1px solid var(--line);}
.notes-ask-done{margin-top:8px;border:none;background:transparent;color:var(--wa-deep);font-weight:700;font-size:13px;cursor:pointer;padding:4px 0;}
/* Порядок и состав блоков. */
/* ЗАГОЛОВОК БЛОКА С ПЕРЕКЛЮЧАТЕЛЕМ. 5 сентября, второй заход.

   Сперва я поставил в углу голый знак «−» — почти прозрачный, без
   названия. Хозяин: «их хрен сыщешь, они невидимые и криво стоят».
   Верно: знак без подписи не читается как кнопка, а прижатый к правому
   краю висел непонятно над чем.

   Теперь это полноценная строка-заголовок: название слева, знак справа,
   вся строка нажимается. Отступы одинаковые сверху и снизу, свёрнутый
   и развёрнутый вид одной высоты — панель не дёргается при сворачивании. */
.mlfold{display:block;margin:14px 0 6px;}
.mlfold:first-child{margin-top:2px;}
.mlfold-b{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;box-sizing:border-box;cursor:pointer;text-align:left;
  border:1px solid var(--line,#e6dbe3);background:transparent;border-radius:9px;
  padding:7px 10px;color:var(--ink-2,#6b5a66);font-size:12.5px;line-height:1.2;}
.mlfold-b:hover{background:rgba(0,0,0,.035);}
.mlfold-t{font-weight:600;letter-spacing:.01em;}
.mlfold-z{font-size:15px;line-height:1;opacity:.75;flex:0 0 auto;}
.mlfold.off .mlfold-b{opacity:.72;border-style:dashed;}

/* Плитки поводов (5 сентября). Ближайший — заметнее остальных. */
.povod-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  border:1px solid var(--line,#e6dbe3);background:var(--panel,#fff);border-radius:10px;
  padding:9px 11px;margin:0 0 7px;}
.povod-i:hover{border-color:#c894b0;}
.povod-i b{font-size:13.5px;color:var(--ink,#42323d);font-weight:600;}
.povod-i i{font-style:normal;font-size:11.5px;color:var(--ink-3,#9c8f98);}
.povod-i.near{background:var(--wa-soft,#f8f0f5);border-color:var(--wa,#dcbcd0);}
/* Строка без названия: остался только «+ Добавить», и держать под неё
   полную высоту заголовка незачем (5 сентября). */
.mlcap-bare{min-height:0;margin-bottom:2px;}

/* Ряд под виджетами: два дела, которым больше негде стоять. Приглушён —
   это не то, за чем сюда приходят (5 сентября). */
.mllay-row{text-align:right;margin:10px 0 0;opacity:.65;}
.mllay-row:hover{opacity:1;}
.mllay-b{border:none;background:transparent;color:var(--ink-3);font-size:12.5px;cursor:pointer;padding:6px 0;}
.mllay{background:var(--panel);border-radius:12px;padding:8px 12px;margin:6px 0 10px;}
.mllay-i{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.mllay-i:last-child{border-bottom:none;}
.mllay-i label{display:flex;align-items:center;gap:8px;cursor:pointer;}
.mllay-mv button{border:1px solid var(--line);background:#fff;border-radius:7px;width:28px;height:26px;cursor:pointer;color:var(--ink-2);margin-left:4px;}
.mllay-mv button:disabled{opacity:.3;cursor:default;}

/* Вход через Яндекс — кнопка в окне входа (2 сентября). */
.acc-ya{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;
  padding:13px 12px;border-radius:12px;background:#000;color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;margin:4px 0 10px;}
.acc-ya-y{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:#FC3F1D;color:#fff;font-weight:900;font-size:14px;}
.acc-or{text-align:center;font-size:12.5px;color:var(--ink-3);margin:0 0 10px;}

/* Переключатель «Саха · Все» над рядом «В твой день» (2 сентября). */
.tday-geo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;}
.tday-mode{display:inline-flex;gap:6px;}
.tday-sep{flex:1;min-width:6px;}
.tday-g{border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.tday-g.on{background:var(--wa-soft);border-color:var(--wa);color:var(--wa-deep);}

/* Имена под лицами афиши. 8 сентября: по одному полю на артиста,
   ноготок рядом — чтобы человек видел, кому пишет имя. */
.ad-e-names{margin:10px 0 4px;}
.ad-e-nh{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px;}
.ad-e-nrow{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.ad-e-nrow img{width:38px;height:38px;border-radius:50%;object-fit:cover;
  flex:0 0 38px;border:2px solid var(--line);}
.ad-e-nrow input{flex:1;min-width:0;}

/* Пример под тычок в пузыре АЙЫЫ (8 сентября): виден только вопрос,
   пример разворачивается по нажатию и не закрывает экран. */
.cmsg-ex{margin-top:9px;}
.cmsg-ex-b{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border-radius:11px;border:1.5px solid var(--line);background:none;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  color:var(--wa-deep);cursor:pointer;line-height:1.2;}
.cmsg-ex-b i{font-style:normal;font-size:15px;opacity:.7;}
.cmsg-ex-b:active{background:var(--wa-soft);}
.cmsg-ex-t{margin-top:9px;font-size:14px;line-height:1.5;color:var(--ink-2);}
html[data-theme="dark"] .cmsg-ex-b{color:var(--wa);}

/* ===== ПЛАШКА ОШИБКИ И ПОЛОСА ЗАПИСИ В ТЁМНОЙ ТЕМЕ =====

   8 сентября, слово хозяина: «цвет ошибку сделай под стать тёмному цвету
   интерфейса, а то глаза режет» и «сделай вровень элемент записи, а то
   она растянута опять на весь экран».

   Плашка была кремовой с коричневыми буквами — из светлой темы, где ей и
   место. На чёрном экране это горящий прямоугольник: глаз цепляется за
   него раньше, чем за сам разговор. Берём тёмную подложку и мягкую
   янтарную рамку — читается как предупреждение, но не слепит.

   Ширина — та же беда, что была у полоски со снимками: поле ввода сужено
   до 720 и стоит по центру, а плашка и полоса записи тянулись во всю
   ширину разговора. Ставим их в ту же колонку. */
html[data-theme="dark"] .mic-note{
  background:rgba(120,84,28,.16);
  border-color:rgba(214,164,74,.34);
  color:#E4C88E;}
html[data-theme="dark"] .mic-note b{background:rgba(255,255,255,.07);}
html[data-theme="dark"] .mic-live{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);}
html[data-theme="dark"] .mic-live-t{color:var(--ink-2);}

@media (min-width:1024px){
  .mic-note, .mic-live{max-width:720px;margin-left:auto;margin-right:auto;}
}

/* ===== «ЗАПИСАНО В ЛИНИЮ» В ТЁМНОЙ ТЕМЕ =====

   9 сентября, снимок хозяина: «твоя линия обновлена реально так выглядит
   в тёмной теме?»

   Нет, так быть не должно. Плашка осталась из светлой темы: светло-сиреневый
   фон с жёстко прописанными цветами, а буквы на ней — тёмные из общей темы,
   которая в потёмках стала светлой. Получилась светлая карточка с почти
   невидимым текстом.

   Здесь цвета были вбиты числами (#F3EEF7, #EBD9E6, #B45309), а такие
   переключение темы не переживают. Переводим на прозрачные слои: они
   ложатся и на светлое, и на тёмное. */
html[data-theme="dark"] .ev-added{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);}
html[data-theme="dark"] .ev-added.kin{
  background:rgba(199,125,168,.10);
  border-color:rgba(199,125,168,.26);}
html[data-theme="dark"] .ev-added b{color:var(--wa);}
html[data-theme="dark"] .ev-added b.new{color:var(--wa);}
html[data-theme="dark"] .ev-added b.upd{color:#E8B473;}
html[data-theme="dark"] .ev-added b.nm{color:var(--ink);}
html[data-theme="dark"] .ev-added span{color:var(--ink-2);}
html[data-theme="dark"] .ev-added button{color:var(--wa);}

/* ===== ЧЁРНАЯ ПЛАШКА НА ШИРОКОМ ЭКРАНЕ =====

   9 сентября, слово хозяина: «мне не нравится, где они выходят».

   Он прав. На телефоне плашка стоит над полем ввода, и это верно: там
   узко, и глаз всё равно внизу. А на мониторе она всплывает посреди
   огромной пустоты — будто её обронили. Ни к чему не привязана, и оттого
   кажется случайной.

   Переносим её в правый нижний угол окна. Так делают везде, и на то есть
   причина: угол — место служебных вестей, он не спорит с содержимым и не
   лезет туда, куда человек смотрит. Плашка уходит сама, места не занимает,
   а глаз её замечает боковым зрением.

   Телефон не трогаем: там она на месте. */
@media (min-width:1024px){
  .toast{
    left:auto; right:24px; bottom:24px;
    transform:none;
    max-width:340px;
    white-space:normal;
    text-align:left;
    transition:opacity .22s var(--в), transform .22s var(--в);
  }
  /* Выезжает снизу — движение подсказывает, что это весть, а не часть
     страницы. */
  .toast:not(.show){ transform:translateY(8px); }
  .toast.show{ transform:translateY(0); }
}

/* ===== ТУМБЛЕР «ОБЫЧНЫЙ / ТЭРИЛТЭ» =====

   9 сентября, слово хозяина: «с эффектом стекла как у iOS, но сильно не
   выделяющийся в общем фоне дизайна».

   Стекло здесь настоящее, а не нарисованное: полупрозрачная подложка плюс
   размытие того, что под ней (backdrop-filter). Оттого он не спорит с
   фоном — он им и подкрашен, и в светлой теме, и в тёмной.

   Не выделяется нарочно: буквы мелкие, рамки почти нет, цветом отмечен
   только выбранный. Это переключатель для своих, а не призыв. */
.org-tumb{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin:0 auto 12px;
  padding:3px;
  border-radius:999px;
  background:rgba(120,100,115,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.org-tumb button{
  position:relative; z-index:2;
  border:none; background:none; cursor:pointer;
  padding:6px 15px; border-radius:999px;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  color:var(--ink-3);
  transition:color .18s var(--в);
  white-space:nowrap;
}
.org-tumb button.on{ color:var(--ink); }
/* Бегунок — тоже стеклянный, ездит под буквами. */
.org-tumb-i{
  position:absolute; z-index:1; top:3px; bottom:3px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.10);
  transition:left .22s var(--в), width .22s var(--в);
}
html[data-theme="dark"] .org-tumb{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
}
html[data-theme="dark"] .org-tumb-i{
  background:rgba(255,255,255,.10);
  box-shadow:none;
}
html[data-theme="dark"] .org-tumb button.on{ color:#fff; }

/* ТУМБЛЕР РОВНО ПОД КНОПКОЙ, ТЕХ ЖЕ РАЗМЕРОВ. 9 сентября, слово хозяина:
   «тумблер должен занимать место ровно как и саҥа кэпсэтии, столько же».

   У кнопки «Новый разговор» отступы по 16 точек с боков и 14 снизу —
   я же поставил тумблер во всю ширину панели, и он вылезал на 32 точки
   шире неё. Берём те же отступы и ту же высоту, чтобы они стояли одной
   колонкой, край в край. */
#org-tumb-side{
  display:flex;
  width:auto;
  margin:0 16px 14px;
  height:44px;
  box-sizing:border-box;
  align-items:stretch;
}
#org-tumb-side button{ flex:1; padding:0 12px; font-size:13px; }
#org-tumb-side .org-tumb-i{ top:3px; bottom:3px; }
/* Вопрос «Где ты работаешь?» над кнопками заведений. */
.org-где-п{ width:100%; text-align:center; font-size:12.5px; color:var(--ink-3); margin-bottom:2px; }
.aiyy-what.org-где-сменить{ opacity:.6; }