/*
  viby — тёмная неоновая тема.

  ПРАВИЛА ЭТОГО ФАЙЛА (держимся их, чтобы вёрстка не разъехалась):

  1. Никаких случайных чисел. Отступы берутся только из шкалы ниже
     (--gap-1…--gap-5), радиусы — из --radius. Понадобилось значение,
     которого нет, — сначала добавь его в шкалу, потом используй.
  2. Классы именуются блоками: .card, .card__mix, .card--clickable.
     Так стили переедут как есть, если когда-нибудь возьмём React.
  3. Цвета — только переменными. Сменить неон = одна строка.

  Раскладка: десктоп — меню слева; мобилка — меню уезжает вниз.
*/

:root {
  /* Браузер рисует часть элементов сам: выпадающий список, календарь у даты,
     полосы прокрутки. Без этой строки он берёт светлые системные цвета —
     получается чёрный текст на сером */
  color-scheme: dark;

  /* --- Цвета ------------------------------------------------------------ */
  --bg: #14151a;
  --bg-soft: #1b1d25;
  --bg-lift: #21242e;
  --line: #2c3040;
  --text: #e9eaf0;
  --muted: #9298ab;

  --red: #ff2e55;                       /* угли */
  --violet: #a855f7;                    /* подсветка лаунжа */
  --tiffany: #4fd6cd;                   /* мастера: третий фирменный цвет */
  --tiffany-line: rgba(79, 214, 205, .38);   /* их рамки: цвет виден, но не кричит */
  --orange: #ff9f1c;                    /* повторы чужих миксов */
  --orange-line: rgba(255, 159, 28, .5);
  --red-glow: rgba(255, 46, 85, .45);
  --violet-glow: rgba(168, 85, 247, .4);
  --violet-line: rgba(168, 85, 247, .32);

  /* Цвета кусков микса. Первый — самый заметный: обычно основной табак */
  --mix-1: #ff2e55;
  --mix-2: #a855f7;
  --mix-3: #22d3ee;
  --mix-4: #fbbf24;
  --mix-5: #4ade80;
  --mix-6: #f472b6;

  /* --- Шкала отступов --------------------------------------------------- */
  /* Только эти значения. Промежуточных «на глаз» быть не должно */
  --gap-1: .25rem;
  --gap-2: .45rem;
  --gap-3: .7rem;
  --gap-4: 1rem;
  --gap-5: 1.5rem;

  /* --- Размеры ---------------------------------------------------------- */
  --radius: 12px;
  --radius-sm: 8px;
  --nav-width: 12rem;
  --nav-height: 3.8rem;                 /* нижнее меню на мобилке */

  /* --- Шкала размеров текста -------------------------------------------- */
  /* Как и с отступами: только эти значения, промежуточных «на глаз» нет.
     Раньше в файле жило шестнадцать разных размеров, и подписи в соседних
     блоках отличались на пару пикселей — глаз это ловит как неаккуратность */
  --text-xs: .75rem;                    /* мелкие пометки: 18+, ярлык типа */
  --text-sm: .85rem;                    /* вторичное: подписи, даты, фильтры */
  --text: 1rem;                         /* основной текст и поля ввода */
  --text-lg: 1.2rem;                    /* акценты: логотип, +V, цифра ползунка */
  --text-xl: 1.5rem;                    /* оценка в карточке */
  --text-2xl: 2.4rem;                   /* звёзды на мобилке */
  --text-3xl: 3rem;                     /* заголовок на первой странице */

  /* Моноширинный: цифры стоят колонкой, проценты и оценки читаются
     как приборная панель */
  --font: Consolas, "JetBrains Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;
  --line-height: 1.35;                  /* плотно: строки не разъезжаются */
}

* { box-sizing: border-box; }

/* --- Всё с маленькой буквы ---------------------------------------------- */
/* Интерфейс и сообщения — строчными, это часть стиля. Контент (ники,
   бренды, вкусы, комментарии) помечен классом .keep и остаётся как ввели.
   Поля ввода и списки подсказок — тоже как есть. */
body { text-transform: lowercase; }

/* Атрибут hidden прячет ВСЕГДА. Без !important его перебивает любой
   display: flex у класса — на этом мы попадались трижды (пагинатор,
   полоска куки, подсказки поиска) */
[hidden] { display: none !important; }
.keep, input, textarea, select, option, .search-select__list, .nav__add-mark, .follow__mark {
  text-transform: none;
}

body {
  margin: 0;
  /* Дотянул список до конца — страница под ним не едет и не пружинит */
  overscroll-behavior-y: contain;
  background: var(--bg);
  color: var(--text);
  font: 15px/var(--line-height) var(--font);
  /* Подсветка по углам — будто где-то тлеет уголь */
  background-image:
    radial-gradient(60rem 40rem at 110% -10%, rgba(168, 85, 247, .10), transparent 60%),
    radial-gradient(50rem 35rem at -10% 110%, rgba(255, 46, 85, .10), transparent 60%);
  background-attachment: fixed;
}

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--red); }

h1 { font-size: var(--text-xl); margin: 0 0 var(--gap-4); }
h2 { font-size: var(--text); margin: var(--gap-4) 0 var(--gap-2); color: var(--muted); font-weight: 600; }
p { margin: var(--gap-2) 0; }
small { color: var(--muted); }

/* ==========================================================================
   Раскладка: меню + страница
   ========================================================================== */

.layout { display: flex; min-height: 100vh; }

.nav {
  width: var(--nav-width);
  flex: 0 0 var(--nav-width);
  padding: var(--gap-4) var(--gap-3);
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  position: sticky;
  top: 0;
  height: 100vh;
}

.nav__logo {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: var(--gap-3);
  text-shadow: 0 0 18px var(--violet-glow);
}
.nav__logo:hover { color: var(--text); }

/* Стрелка у логотипа — намёк, что слово нажимается (ведёт в ленту) */
.nav__logo-arrow {
  display: inline-block;
  margin-left: .3em;
  font-size: .7em;
  color: var(--violet);
  transition: transform .15s;
}
.nav__logo:hover .nav__logo-arrow,
.topbar__logo:hover .nav__logo-arrow { transform: translateX(-3px); }

.agemark {
  display: flex; align-items: center; gap: var(--gap-2);
  margin-bottom: var(--gap-3);
  color: var(--muted); font-size: var(--text-xs); line-height: 1.2;
}
.agemark b {
  flex: 0 0 auto;
  border: 1px solid var(--red); color: var(--red);
  border-radius: var(--radius-sm); padding: 0 var(--gap-1);
  font-size: var(--text-xs);
}
.agemark--short { margin: 0 0 0 auto; }   /* в верхней полоске — только значок, справа перед ником */
.topbar__me { margin-left: 0; }

/* Значок QR рядом со своим ником */
.qr-link { display: inline-flex; align-items: center; vertical-align: middle; margin-left: var(--gap-1); color: var(--muted); }
.qr-link:hover { color: var(--violet); }
.qr-link__icon { width: 1.15em; height: 1.15em; fill: currentColor; }

/* Ник автора — ссылка в его профиль. Цвет ника не трогаем (белый или
   бирюзовый у мастера), подчёркивание — только при наведении.
   Поверх растянутой ссылки карточки (z-index), как лайк и теги */
.author-link { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.author-link:hover { text-decoration: underline; }

/* Под ником в профиле: +V и модераторская кнопка — одной строкой,
   с воздухом до цифр ниже */
.person__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-3); margin: var(--gap-3) 0 var(--gap-4); }

/* --- rest+ ---------------------------------------------------------------- */
.promo__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-3); }
.promo__title { margin: 0; font-size: var(--text-lg); color: var(--text); }
.promo__until { color: var(--violet); font-size: var(--text-sm); white-space: nowrap; }
.promo__text { margin: var(--gap-3) 0; }
.promo__codes { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin: var(--gap-3) 0; }
/* Промокод — кнопка: нажал и скопировал. Пунктир — «это можно взять» */
.promo__code {
  background: var(--bg-lift); border: 1px dashed var(--violet-line); color: var(--violet);
  font-family: var(--font); letter-spacing: .05em;
}
.promo__code.is-done { border-style: solid; }
.promo-state--on { color: var(--tiffany); }
.promo-state--soon { color: var(--orange); }
.promo-state--off { color: var(--muted); }

/* Вкладка «справочник» в модерации: поиск и формы «добавить» одной строкой */
.dictionary__search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2); margin: 0 0 var(--gap-3); }
.dictionary__search input[type="text"] { flex: 1 1 12rem; min-width: 0; }

/* Место работы мастера в профиле — той же строкой со значком, что у похода */
.person__place { margin: var(--gap-2) 0; }

/* Контакты в профиле: значок сервиса + @ник */
.person__contacts { display: flex; flex-wrap: wrap; gap: var(--gap-2) var(--gap-4); margin: var(--gap-3) 0; }
.contact { display: inline-flex; align-items: center; gap: var(--gap-1); text-decoration: none; }
.contact__icon { width: 1.15em; height: 1.15em; fill: currentColor; }
.contact__icon--line { fill: none; stroke: currentColor; stroke-width: 1.8; }

.nav__link {
  display: flex;
  align-items: center;
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  line-height: 1.2;
}
.nav__link:hover { background: var(--bg-lift); color: var(--text); }
.nav__link.is-active {
  background: var(--bg-lift);
  box-shadow: inset 3px 0 0 var(--violet), inset -3px 0 0 var(--violet);
}

/* Главная кнопка — прямоугольная, ярче остальных. «V+» = viby плюс поход */
.nav__add {
  margin: var(--gap-3) 0;
  padding: var(--gap-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--red), var(--violet));
  box-shadow: 0 0 18px var(--red-glow);
}
.nav__add:hover { color: #fff; filter: brightness(1.12); }

/* В моноширинном шрифте плюс сидит ниже центра заглавной V — приподнимаем */
.nav__add-plus { position: relative; top: -.04em; }

.nav__add-mark {
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  text-shadow: 0 0 12px rgba(255, 255, 255, .55);
}

.nav__bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--gap-2); }
.nav__me { color: var(--muted); font-size: var(--text-sm); padding: 0 var(--gap-3); line-height: 1.3; }
.nav__me b { color: var(--text); }

.nav__logout {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: var(--gap-1) var(--gap-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
}
.nav__logout:hover { border-color: var(--red); color: var(--red); }

.page { flex: 1; padding: var(--gap-5) var(--gap-5) 3rem; max-width: 44rem; }

/* Верхняя полоска (видна на мобилке) и шапка для гостя */
.topbar { display: flex; align-items: center; gap: var(--gap-3); }
.topbar__logo { font-weight: 800; font-size: var(--text-lg); color: var(--text); letter-spacing: .04em; }

.guestbar { display: flex; align-items: baseline; margin-bottom: var(--gap-5); }
.guestbar__links { margin-left: auto; }
.page--guest { margin: 0 auto; }

/* Плашки «Ник изменён» и прочие сообщения */
.messages { list-style: none; margin: 0 0 var(--gap-4); padding: 0; }
.messages li {
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-sm);
  background: var(--bg-lift);
  border-left: 3px solid var(--violet);
}

/* ==========================================================================
   Карточка похода
   ========================================================================== */

.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-3) var(--gap-4);
  margin: 0 0 var(--gap-3);
}

/* Поход мастера — рамка того же бирюзового, что и его ник. Цвет уже
   значит «мастер», второй подписи не нужно */
.card--master { border-color: var(--tiffany-line); }

/* Повтор чужого микса — оранжевая рамка. Ниже мастера в файле — значит
   важнее: у мастера, повторившего чужой микс, рамка оранжевая */
.card--copy { border-color: var(--orange-line); }
.card__copy { margin: var(--gap-1) 0 0; color: var(--orange); font-size: var(--text-sm); position: relative; z-index: 1; }
.copy-note {
  margin: 0 0 var(--gap-4); padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--orange-line); border-radius: var(--radius);
  color: var(--orange);
}
.card:hover { border-color: var(--violet-line); }

/* Кликабельная карточка: ссылка растянута поверх всего блока */
.card--clickable { position: relative; cursor: pointer; }
.card--clickable:hover { background: var(--bg-lift); box-shadow: 0 0 24px rgba(168, 85, 247, .18); }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }

/* Если внутри карточки появятся свои ссылки — они должны быть НАД растяжкой */
.card a:not(.card__link) { position: relative; z-index: 2; }

.card__head { display: flex; align-items: baseline; gap: var(--gap-2); }
.card__head b { color: var(--text); }
.card__head time { color: var(--muted); font-size: var(--text-sm); }

.card__overall {
  margin-left: auto;
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--red);
  text-shadow: 0 0 16px var(--red-glow);
}
.card__star { font-size: .8em; margin-left: .15em; }

/* --- Лайк ---------------------------------------------------------------- */
/* Палец — фирменный красный: контур, пока не лайкнул; залитый — когда лайкнул.
   Кнопка лежит поверх растянутой ссылки карточки, иначе клик открывал бы поход */
.like-form { display: inline; position: relative; z-index: 1; }
.like {
  display: inline-flex; align-items: center; gap: var(--gap-1);
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: var(--gap-1) var(--gap-2); color: var(--muted); font: inherit; cursor: pointer;
}
.like:hover { border-color: var(--red); filter: none; }
.like--own { cursor: default; }
.like--own:hover { border-color: transparent; }
.like__icon { width: 1.15em; height: 1.15em; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linejoin: round; }
.like.is-on { color: var(--red); }
.like.is-on .like__icon { fill: var(--red); filter: drop-shadow(0 0 6px var(--red-glow)); }
.like__count { min-width: 1ch; }

/* Значок «под походом говорят» — брат лайка: тот же размер, тот же
   красный контур, есть комментарии — заливается, как лайк. Не кнопка:
   карточка и так открывает поход */
.talk {
  display: inline-flex; align-items: center; gap: var(--gap-1);
  padding: var(--gap-1) var(--gap-2); border: 1px solid transparent;
  color: var(--muted);
}
.talk__icon { width: 1.15em; height: 1.15em; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linejoin: round; }
.talk__count { min-width: 1ch; }
.talk.is-on { color: var(--red); }
.talk.is-on .talk__icon { fill: var(--red); filter: drop-shadow(0 0 6px var(--red-glow)); }

/* Репост — третий брат: тот же размер и красный контур. Поверх растянутой
   ссылки карточки (z-index), иначе нажатие открывало бы поход */
.share {
  display: inline-flex; align-items: center; gap: var(--gap-1);
  position: relative; z-index: 1;
  padding: var(--gap-1) var(--gap-2); border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--red); text-decoration: none;
}
.share:hover { border-color: var(--red); }
.share__icon { width: 1.15em; height: 1.15em; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linejoin: round; }
.share__count { min-width: 1ch; color: var(--muted); }
/* «ссылка скопирована» — всплывает над стрелкой и гаснет */
.share__done {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: var(--gap-1) var(--gap-2);
  background: var(--bg-lift); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--text-xs);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.share.is-done .share__done { opacity: 1; }
.share.is-done .share__icon { fill: var(--red); }

/* Гость пришёл по репосту — приглашение над карточкой */
.guest-note {
  margin: 0 0 var(--gap-4); padding: var(--gap-3) var(--gap-4);
  background: var(--bg-soft); border: 1px solid var(--violet-line); border-radius: var(--radius);
}
.guest-note p { margin: 0; }

/* --- Теги ----------------------------------------------------------------- */
/* На карточке — вверху, над миксом. Одного вида с «фишками» в форме:
   видно, что это одно и то же */
/* Поверх растянутой ссылки карточки (z-index), как лайк и стрелка:
   иначе нажатие по тегу открывало бы поход, а не фильтр */
.card__tags { display: flex; flex-wrap: wrap; gap: var(--gap-1); margin: var(--gap-2) 0 0; position: relative; z-index: 1; }
.tag {
  padding: var(--gap-1) var(--gap-2);
  border: 1px solid var(--violet-line); border-radius: var(--radius-sm);
  color: var(--violet); font-size: var(--text-sm); line-height: 1.2;
}
/* В фильтре ленты теги — ссылки; выбранный залит, как фишка в форме */
a.tag { text-decoration: none; }
a.tag:hover { border-color: var(--violet); }
.tag--on { background: var(--violet); border-color: var(--violet); color: #fff; }
.feed__tags .sorts__group { flex-wrap: wrap; }
/* На мобилке у ссылок фильтра отступов по бокам нет (.sorts__group a ниже
   в файле) — тегу они нужны, иначе текст липнет к рамке */
.sorts__group a.tag { padding: var(--gap-1) var(--gap-2); }

/* В форме: каждая фишка — label с галочкой внутри. Галочку прячем
   (но не display: none — тогда её не нажать с клавиатуры), а выбранную
   фишку заливаем и показываем × — нажал ещё раз, тег снят */
.tags-pick__title { margin: 0 0 var(--gap-2); }
.tags-pick__list { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.tag-chip {
  display: inline-flex; align-items: center; gap: var(--gap-1);
  padding: var(--gap-1) var(--gap-3);
  border: 1px solid var(--violet-line); border-radius: var(--radius-sm);
  color: var(--violet); font-size: var(--text-sm); cursor: pointer; user-select: none;
}
.tag-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-chip__x { display: none; font-weight: 700; }
.tag-chip:has(input:checked) { background: var(--violet); border-color: var(--violet); color: #fff; }
.tag-chip input:checked ~ .tag-chip__x { display: inline; }
.tag-chip:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
/* Выбрано пять — остальные гаснут */
.tag-chip.is-off { opacity: .4; cursor: not-allowed; }
.tags-pick__own { display: flex; gap: var(--gap-2); margin-top: var(--gap-3); }
.tags-pick__input { flex: 1; min-width: 0; }

/* Витрина для гостя под приглашением: видно, на что ссылка, но ничего
   не нажимается — работают только кнопки самой плашки.
   Главную работу делает атрибут inert в разметке: браузер сам не даёт
   кликать, не пускает туда Tab и не отдаёт читалкам как кнопки. Новая
   кнопка завтра уснёт сама. Это правило — страховка для браузеров,
   которые inert не знают */
.guest-lock, .guest-lock * { pointer-events: none; cursor: default; }

/* --- Страница QR ---------------------------------------------------------- */
.qr { display: flex; flex-direction: column; align-items: center; gap: var(--gap-3); text-align: center; }
.qr__title { margin: 0; }
/* Белая плитка: перевёрнутый код (светлое на тёмном) читают не все камеры */
.qr__code { background: #fff; padding: var(--gap-3); border-radius: var(--radius); line-height: 0; }
.qr__code svg { width: min(72vw, 18rem); height: auto; }
.qr__url { margin: 0; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* «поделиться» крупной кнопкой — тот же share.js, что у стрелки на карточке */
.share--button {
  gap: var(--gap-2); padding: var(--gap-2) var(--gap-5);
  background: linear-gradient(135deg, var(--red), var(--violet)); border: none;
  color: #fff; font-weight: 600;
}
.share--button .share__icon { stroke: #fff; }
.share--button.is-done .share__icon { fill: #fff; }
.share--button:hover { filter: brightness(1.12); }
.guest-note__actions { display: flex; align-items: center; gap: var(--gap-4); margin-top: var(--gap-3) !important; }
/* Оценки ещё нет — звезда рядом с прочерком не нужна */
.overall.is-empty .card__star { display: none; }

/* --- Кольцо микса ------------------------------------------------------- */
/* Сегменты рисует conic-gradient (заливку собирает Session.mix_gradient),
   дырку в середине — псевдоэлемент цвета карточки. Никаких библиотек.
   row-reverse: в разметке кольцо идёт первым, на экране — справа. */

.card__mixblock {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--gap-4);
  margin: var(--gap-3) 0;
}
.card__mixblock .card__mix { flex: 1; }
/* Кольцо и лайк под ним — одной колонкой справа */
.card__side { display: flex; flex-direction: column; align-items: center; gap: var(--gap-1); }
/* Лайк и комментарии — одной строкой под кольцом */
.card__reactions { display: flex; align-items: center; }

.donut {
  flex: 0 0 auto;
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 22px rgba(168, 85, 247, .18);
}
.donut::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: var(--bg-soft);
}
.card--clickable:hover .donut::after { background: var(--bg-lift); }

.swatch {
  display: inline-block;
  width: .65rem; height: .65rem;
  border-radius: 3px;
  vertical-align: middle;
}

.mix--1 { background: var(--mix-1); }
.mix--2 { background: var(--mix-2); }
.mix--3 { background: var(--mix-3); }
.mix--4 { background: var(--mix-4); }
.mix--5 { background: var(--mix-5); }
.mix--6 { background: var(--mix-6); }

.card__mix { border-collapse: collapse; margin: 0; width: 100%; }
.card__mix td { padding: 0 var(--gap-2) 0 0; line-height: 1.5; }
.card__swatch { width: 1.1rem; }
.card__brand { color: var(--muted); }
.card__percent { color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card__sep { color: var(--line); margin: 0 var(--gap-1); }

.card__gear, .card__scores { margin: var(--gap-1) 0; color: var(--muted); font-size: var(--text-sm); }
.card__scores b { color: var(--text); }
/* --- Модерация (только супер-админ, только десктоп) ---------------------- */
.moderation__table { width: 100%; border-collapse: collapse; }
.moderation__table th {
  text-align: left; color: var(--muted); font-weight: 500;
  font-size: var(--text-sm); padding: 0 var(--gap-3) var(--gap-2) 0;
}
.moderation__table td {
  padding: var(--gap-3) var(--gap-3) var(--gap-3) 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.moderation__kind {
  display: inline-block;
  border: 1px solid var(--violet-line); color: var(--violet);
  border-radius: var(--radius-sm); padding: 0 var(--gap-2);
  margin-right: var(--gap-2); font-size: var(--text-xs);
}
.moderation__when { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.moderation__nobody { color: var(--muted); }
/* Решения — строками: поправить и принять · объединить с кем · отклонить */
.moderation__act form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-2); }
.moderation__line { display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; }
/* В таблице поле и его кнопка — всегда одной строкой: иначе в узкой
   колонке кнопка падала под поле, и строка вырастала в три этажа */
.moderation__act .moderation__line { flex-wrap: nowrap; margin: var(--gap-1) 0; }

/* Модерация — только на компьютере, а таблица широкая: даём ей экран,
   а не узкую колонку ленты */
.page:has(.moderation__table) { max-width: 72rem; }
.moderation__name { width: 14rem; }
.moderation__act button { min-height: 2rem; padding: var(--gap-1) var(--gap-3); font-size: var(--text-sm); }
.moderation__merge { background: var(--bg-lift); border: 1px solid var(--violet-line); color: var(--violet); }

/* Список «куда объединить» бывает длинным — не даём ему распирать строку */
.moderation__target { max-width: 14rem; }

/* «Отклонить» — приглушённое, а не красное: рядом стоит кнопка в красном
   градиенте, и две красные надписи сливались в одно пятно. Краснеет при наведении */
.moderation__reject {
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-sm);
  padding: 0 var(--gap-2);
  min-height: 2rem;
}
.moderation__reject:hover { color: var(--red); filter: none; }
.moderation__mobile { display: none; }

/* --- Комментарии ---------------------------------------------------------- */
/* Отдельный раздел под карточкой похода — в такой же рамке, как карточка.
   Крестик удаления появляется при наведении на строку, чтобы не мозолил
   глаз в спокойном состоянии */
.comments {
  margin: var(--gap-3) 0 0;
  padding: var(--gap-3) var(--gap-4);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.comments__title { font-size: var(--text-lg); margin: 0 0 var(--gap-3); }
.comment {
  display: flex; align-items: baseline; gap: var(--gap-2);
  margin: var(--gap-2) 0;
  padding: var(--gap-2) var(--gap-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
/* Мастер и тут узнаётся по бирюзовой рамке — как его поход в ленте */
.comment--master { border-color: var(--tiffany-line); }
.comment__text { color: var(--text); overflow-wrap: anywhere; }
.comment__delete { margin-left: auto; }
.comment__delete button {
  background: none; border: none; color: var(--muted);
  font-size: var(--text); line-height: 1; padding: 0 var(--gap-1);
  min-height: 0; opacity: 0; transition: opacity .12s;
}
.comment:hover .comment__delete button { opacity: 1; }
.comment__delete button:hover { color: var(--red); filter: none; }

.comments__form { display: flex; align-items: flex-start; gap: var(--gap-2); margin-top: var(--gap-3); }
.comments__form textarea { flex: 1; min-width: 0; }

/* --- Мастера -------------------------------------------------------------- */
/* Принятый мастер виден по цвету и букве «М» — без подписи, одним взглядом */
.nick--master { color: var(--tiffany); }
/* Буква в кружке рядом с ником.
   Высота — главное. Кружок выше строчных букв, и с базовой линией
   (baseline) он падает вниз: его низ садится на линию строки. Поэтому
   центр кружка ставим на середину строчных букв ника — vertical-align:
   middle. Размеры в em: кружок растёт вместе с ником в любом месте —
   в шапке, в ленте, в таблице друзей */
.nick__mark {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: 1.4em; height: 1.4em;
  margin-left: .3em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: .75em;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

/* --- Подписки ------------------------------------------------------------ */
.people__search { display: flex; align-items: center; gap: var(--gap-2); margin: 0 0 var(--gap-3); }
.people__search input { flex: 1 1 14rem; max-width: 20rem; }

/* Кнопка «следить» — та же +V, что в меню: там плюс к походу, тут плюс
   к своей ленте. Подписан — приглашение меняется на галочку, при наведении
   становится минусом: видно, что нажатие отпишет */
.follow-form { display: inline-block; }
.follow {
  display: inline-flex; align-items: center; justify-content: center;
  /* Ширина фиксирована: значок меняется, а строка таблицы не дёргается */
  min-width: 3.6rem;
  min-height: 2.25rem;
  padding: var(--gap-1) var(--gap-2);
  background: linear-gradient(135deg, var(--red), var(--violet));
  color: #fff; border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.follow__mark { font-weight: 900; letter-spacing: -.04em; }
.follow__mark::before { content: "+V"; }

/* Подпись нужна только читалкам: на экране хватает значка, а слова
   двигали ширину кнопки и всю строку вместе с ней */
.follow__word {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.follow.is-on {
  background: none;
  border: 1px solid var(--violet-line);
  color: var(--violet);
}
.follow.is-on .follow__mark::before { content: "V ✓"; }

.follow.is-on:hover { border-color: var(--red); color: var(--red); filter: none; }
.follow.is-on:hover .follow__mark::before { content: "−V"; }

/* Глаз: человек следит за тобой */
.eye {
  width: .8em; height: .8em; fill: var(--violet);
  vertical-align: baseline; margin-left: var(--gap-1);
}

/* --- Место --------------------------------------------------------------- */
.card__place {
  display: flex; align-items: center; gap: var(--gap-3);
  margin: var(--gap-2) 0 0; padding: var(--gap-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none;
  position: relative; z-index: 1;                 /* поверх растянутой ссылки карточки */
}
.card__place:hover { border-color: var(--violet); }
.place-preview { flex: 0 0 7.5rem; height: 3.6rem; border-radius: var(--radius-sm); overflow: hidden; }
.place-preview svg { width: 100%; height: 100%; display: block; }
.card__place-text { display: flex; flex-direction: column; gap: var(--gap-1); min-width: 0; }
.card__place-text b { color: var(--text); }
.card__place-text span { color: var(--muted); font-size: var(--text-sm); }
.card__place-line { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--gap-1); }
.card__place-line:hover { color: var(--violet); }
.place-pin { width: 1em; height: 1em; fill: var(--red); }
.place-item { display: flex; flex-direction: column; }
.place-item small { color: var(--muted); }
.lab-here, .place-picker__here {
  background: none; border: 1px dashed var(--line); color: var(--violet);
  padding: var(--gap-1) var(--gap-3); margin-left: var(--gap-2);
}
.place-picker__here:hover { border-color: var(--violet); filter: none; }
/* Корень — свой класс, не .search-select: иначе search_select.js примет поле за справочник */
.place-picker { position: relative; display: inline-block; }
.place-picker .search-select__input { min-width: 16rem; }
.place-map { height: 14rem; margin-top: var(--gap-3); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }

.card__comment {
  margin: var(--gap-3) 0 0;
  padding-left: var(--gap-3);
  border-left: 3px solid var(--line);
  color: var(--text);
}

/* Под бесконечной лентой: «загружаю…» и «это всё» */
.feed__more { margin: var(--gap-4) 0; text-align: center; color: var(--muted); font-size: var(--text-sm); min-height: 1em; }
.pager { margin: var(--gap-5) 0; color: var(--muted); display: flex; gap: var(--gap-4); align-items: center; }

/* ==========================================================================
   Формы
   ========================================================================== */

/* Все поля ввода, кроме тех, у кого своя отрисовка: галочки, радио,
   ползунок. Перечислять типы по одному нельзя — забудешь search или tel,
   и поле останется светлым */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]),
select, textarea {
  background: var(--bg-lift);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--gap-1) var(--gap-2);
  font: inherit;
  line-height: 1.3;
}
/* Пункты выпадающего списка — отдельно: их браузер красит по-своему */
option, optgroup { background: var(--bg-soft); color: var(--text); }

/* Подсказка в пустом поле — приглушённая, а не чёрная */
::placeholder { color: var(--muted); opacity: 1; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-glow);
}

/* Кнопка — один вид для <button>, <a class="button"> и <summary class="button">.
   inline-flex с фиксированной line-height: высота одинаковая независимо от тега */
button, .button {
  /* Браузер не передаёт кнопкам регистр страницы — без этого «Сохранить»
     и «Понятно» были с заглавной, хотя весь интерфейс строчный */
  text-transform: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  background: linear-gradient(135deg, var(--red), var(--violet));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--gap-2) var(--gap-4);
  font: inherit;
  font-size: var(--text);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
a.button:hover, summary.button:hover { color: #fff; }
button:hover, .button:hover { filter: brightness(1.12); }

.errorlist { color: var(--red); list-style: none; padding: 0; margin: var(--gap-1) 0; font-size: var(--text-sm); }
label { color: var(--muted); }

/* --- Первая страница гостя ---------------------------------------------- */
.hero { max-width: 34rem; padding-top: var(--gap-5); }
.hero__title {
  font-size: var(--text-3xl);
  margin: 0 0 var(--gap-3);
  letter-spacing: .06em;
  text-shadow: 0 0 24px var(--violet-glow), 0 0 48px var(--red-glow);
}
.hero__lead { font-size: var(--text-lg); color: var(--text); }
.hero__actions { display: flex; align-items: center; gap: var(--gap-4); flex-wrap: wrap; margin: var(--gap-5) 0; }
.hero__actions .button { text-decoration: none; padding: var(--gap-3) var(--gap-5); }
.hero__login { color: var(--muted); }
.hero__disclaimer {
  border-top: 1px solid var(--line);
  padding-top: var(--gap-3);
  color: var(--muted);
  font-size: var(--text-sm);
}
.hero__age {
  display: inline-block;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: 0 var(--gap-2);
  margin-right: var(--gap-2);
  font-weight: 700;
}

/* --- Галочки согласия в регистрации ------------------------------------- */
/* as_p ставит подпись перед чекбоксом — разворачиваем: галочка, потом текст */
.form--register p:has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-2);
}
/* Подсказка у галочки («заявку посмотрит модератор…») Django кладёт в ту же
   строку — row-reverse утаскивал её влево, а подпись сжимал в столбик.
   Отправляем её последней и на всю ширину: строкой под галочкой */
.form--register p:has(> input[type="checkbox"]) > .helptext { order: 1; flex-basis: 100%; margin: 0; }
.form--register input[type="checkbox"] { accent-color: var(--violet); width: 1.1rem; height: 1.1rem; }

.muted { color: var(--muted); font-size: var(--text-sm); }

/* --- Потянуть вниз — обновить (только касания) --------------------------- */
.pull-refresh {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 110px;                       /* = MAX в pull_refresh.js */
  transform: translateY(-110px);       /* спрятана над экраном */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--gap-3);
  background: linear-gradient(to bottom, transparent, var(--bg-lift));
  color: var(--muted);
  font-size: var(--text-sm);
  pointer-events: none;
  z-index: 30;
}
.pull-refresh.is-ready { color: var(--red); }

/* --- Полоска про куки (только гостю) ------------------------------------ */
.cookiebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-4);
  flex-wrap: wrap;
  padding: var(--gap-3) var(--gap-4);
  background: var(--bg-lift);
  border-top: 1px solid var(--violet-line);
  font-size: var(--text-sm);
  z-index: 10;
}
.cookiebar[hidden] { display: none; }   /* display: flex выше перебивает атрибут hidden */
.cookiebar__ok { padding: var(--gap-1) var(--gap-4); }

/* --- Панели ------------------------------------------------------------- */

.panel {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--gap-3) var(--gap-4);
  margin: 0 0 var(--gap-3);
}
.panel h2 { margin: 0 0 var(--gap-2); color: var(--violet); font-size: var(--text-sm); }
.panel__note { color: var(--muted); margin: 0 0 var(--gap-2); }

/* Опасная зона: удаление аккаунта */
.panel--danger { border-color: var(--red-glow); }
.panel--danger h2 { color: var(--red); }
.button--danger { background: var(--red); }

/* Раскрывающееся подтверждение: «удалить» → «точно? [да, удалить]» */
/* «изменить» и «удалить» — одной строкой под карточкой, вид у кнопок один */
.session__actions { display: flex; align-items: center; gap: var(--gap-5); margin: var(--gap-4) 0 0; flex-wrap: wrap; }


.danger { color: var(--muted); }
.danger summary { cursor: pointer; list-style: none; width: max-content; }
.danger summary::-webkit-details-marker { display: none; }

/* Общее правило на ВСЕ «удалить» — поход, аккаунт, что угодно.
   Не кнопка, а надпись нашим красным, чуть крупнее обычного текста.
   Меняешь здесь — меняется везде, где стоит .danger__link */
.danger__link {
  display: inline-block;
  color: var(--red);
  font-size: var(--text);
  font-weight: 600;
  text-decoration: none;
  padding: var(--gap-2) 0;
  cursor: pointer;
}
.danger__link:hover { color: var(--red); text-shadow: 0 0 12px var(--red-glow); }
.danger__confirm {
  display: flex; align-items: center; gap: var(--gap-3); flex-wrap: wrap;
  margin-top: var(--gap-2); font-size: var(--text-sm);
}
.danger__confirm button { padding: var(--gap-1) var(--gap-3); }
.panel p:last-child { margin-bottom: 0; }

/* --- Форма похода ------------------------------------------------------- */

.vform { max-width: 32rem; }

.panel--form {
  border-color: var(--violet-line);
  padding: var(--gap-3) var(--gap-4);
  margin-bottom: var(--gap-3);
}
.panel--form:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow); }

/* Строка «подпись — поле» */
/* Поле формы: подпись и сам ввод в строку, на узком экране — столбиком.
   Отступ между полями один и тот же везде, из шкалы */
.field { display: flex; align-items: center; gap: var(--gap-3); margin: var(--gap-2) 0; flex-wrap: wrap; }
.field:first-child { margin-top: 0; }
.field:last-child { margin-bottom: 0; }
.field > label { min-width: 7rem; color: var(--muted); font-size: var(--text-sm); }
.field--wide { display: block; margin-top: var(--gap-3); }

/* Формы входа, регистрации и настроек Django рисует сам, каждое поле —
   отдельный <p>. Приводим их к тому же виду, что и наши .field:
   подпись сверху приглушённая, поле под ней во всю ширину */
form p { margin: var(--gap-3) 0; }
form p > label {
  display: block;
  margin-bottom: var(--gap-1);
  color: var(--muted);
  font-size: var(--text-sm);
}
form p input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
form p select, form p textarea { width: 100%; max-width: 22rem; }
form p .helptext { display: block; margin-top: var(--gap-1); color: var(--muted); font-size: var(--text-sm); }

/* Галочки согласия: подпись рядом, а не сверху */
.form--register p:has(> input[type="checkbox"]) > label { margin: 0; font-size: var(--text); }
.field--wide textarea { width: 100%; }

.mix-controls { margin: var(--gap-2) 0 0; display: flex; align-items: center; gap: var(--gap-2); flex-wrap: wrap; }

.overall {
  margin: var(--gap-3) 0 0;
  padding-top: var(--gap-2);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--gap-3);
  color: var(--muted);
}
.overall b {
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--red);
  text-shadow: 0 0 20px var(--red-glow);
}

.vform__save { width: 100%; padding: var(--gap-3); font-size: var(--text); }

/* --- Поле с поиском (виджет SearchSelect) -------------------------------- */

.search-select { position: relative; display: inline-block; }
.search-select__input { min-width: 14rem; }

.search-select__list {
  position: absolute; left: 0; top: calc(100% + 3px); z-index: 20; display: block;
  min-width: 100%;
  background: var(--bg-lift);
  color: var(--text);              /* свой цвет: список всплывает над полем */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  max-height: 14rem; overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.search-select__list[hidden] { display: none; }

.search-select__item, .search-select__empty, .search-select__add {
  display: block; padding: var(--gap-1) var(--gap-2); white-space: nowrap; cursor: pointer;
}
.search-select__item:hover, .search-select__item.is-active { background: rgba(168, 85, 247, .2); }
.search-select__empty { color: var(--muted); cursor: default; }
.search-select__add { color: var(--violet); border-top: 1px solid var(--line); }
.search-select__add:hover { background: rgba(255, 46, 85, .15); }

/* --- Звёзды -------------------------------------------------------------- */
/* Радиокнопки спрятаны, красим подписи. В DOM порядок 5→1, поэтому
   «все левее выбранной» — это «все следующие» для селектора ~ */

.stars { display: inline-flex; flex-direction: row-reverse; font-size: var(--text-lg); line-height: 1; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label { color: var(--line); cursor: pointer; padding: 0 .05em; transition: color .12s; }
.stars input:checked ~ label,
.stars label:hover, .stars label:hover ~ label {
  color: var(--red);
  text-shadow: 0 0 14px var(--red-glow);
}

/* --- Ползунок ------------------------------------------------------------ */

.slider { display: inline-flex; align-items: center; gap: var(--gap-3); }
.slider input[type="range"] { width: 11rem; accent-color: var(--violet); }
.slider output { min-width: 2.2rem; font-weight: 700; color: var(--violet); }

/* --- Таблица микса в форме ----------------------------------------------- */
/* table-layout: fixed — иначе поля поиска со своим min-width распирают
   таблицу шире панели, и «Итого 100%» вылезает за границу блока */

#mix-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
#mix-table th {
  text-align: left; color: var(--muted); font-weight: 500;
  font-size: var(--text-sm); padding: 0 var(--gap-2) var(--gap-1) 0;
}
#mix-table td { padding: var(--gap-1) var(--gap-2) var(--gap-1) 0; vertical-align: middle; }

/* Колонки: бренд и вкус делят место поровну, проценту и крестику — по краю.
   nth-of-type, не nth-child: первым ребёнком строки лежит скрытый input с id */
#mix-table th:nth-of-type(1), #mix-table td:nth-of-type(1) { width: 38%; }
#mix-table th:nth-of-type(2), #mix-table td:nth-of-type(2) { width: 38%; }
#mix-table th:nth-of-type(3), #mix-table td:nth-of-type(3) { width: 16%; }
#mix-table th:nth-of-type(4), #mix-table td:nth-of-type(4) { width: 8%; }

/* Внутри таблицы поля тянутся по колонке, а не по своей минимальной ширине */
#mix-table .search-select { display: block; }
#mix-table .search-select__input,
#mix-table input[type="number"] { min-width: 0; width: 100%; }

.mix-row__remove {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--radius-sm); padding: var(--gap-1) var(--gap-2); cursor: pointer;
}
.mix-row__remove:hover { border-color: var(--red); color: var(--red); filter: none; }

#mix-add { background: none; border: 1px dashed var(--line); color: var(--violet); }
#mix-add:hover { border-color: var(--violet); filter: none; }
#mix-total { margin-left: auto; color: var(--muted); }

/* ==========================================================================
   Списки: сортировки, люди
   ========================================================================== */

/* --- Фильтры (история, профиль, друзья) --------------------------------- */
/* Одной сеткой, а не inline-block с margin-left: при переносе строк отступы
   получались разной величины, и на узком экране фильтры «плясали» */
.sorts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-2) var(--gap-4);
  margin: 0 0 var(--gap-3);
  color: var(--muted);
  font-size: var(--text-sm);
}
.sorts__group { display: flex; align-items: baseline; gap: var(--gap-2); }
.sorts__group a.is-active { color: var(--red); font-weight: 700; }

.sorts__count, .people__note, .person__stats, .feed__empty {
  margin: 0 0 var(--gap-3);
  color: var(--muted);
  font-size: var(--text-sm);
}

.people { border-collapse: collapse; width: 100%; }
.people th, .people td { text-align: left; padding: var(--gap-2) var(--gap-3); border-bottom: 1px solid var(--line); }
.people th { color: var(--muted); font-weight: 500; font-size: var(--text-sm); }

/* ==========================================================================
   Мобилка: меню уезжает вниз, как в Instagram
   ========================================================================== */

@media (max-width: 760px) {
  .layout { flex-direction: column; }

  /* Звёзды под палец: каждая ~48px, чтобы попадать без промаха */
  .stars { font-size: var(--text-2xl); }
  .stars label { padding: 0 var(--gap-2); }

  /* Друзья: на телефоне таблица не влезает — прячем то, без чего можно
     жить (последний поход, число подписчиков), а кнопку оставляем: без неё
     подписаться было невозможно */
  .people th:nth-child(4), .people td:nth-child(4),
  .people th:nth-child(5), .people td:nth-child(5) { display: none; }
  .people th, .people td { padding: var(--gap-2) var(--gap-1); }
  .people__search { flex-wrap: wrap; }

  /* Фильтры: каждая группа своей строкой, ссылки крупнее и под палец */
  .sorts { flex-direction: column; gap: var(--gap-2); font-size: var(--text); }
  .sorts__group { gap: var(--gap-4); flex-wrap: wrap; }
  .sorts__group a { padding: var(--gap-1) 0; }
  .sorts__count, .people__note, .person__stats, .feed__empty { font-size: var(--text-sm); }

  /* Подпись уходит на свою строку, поэтому: к своему полю она жмётся
     вплотную (row-gap), а соседние поля разводим — иначе «уголь» липнет
     к комментарию и форма читается как сплошная каша */
  .field { row-gap: var(--gap-1); margin: var(--gap-4) 0; }
  /* Подписи в строку не влезают — отпускаем на всю ширину */
  .field > label { min-width: 0; flex: 1 0 100%; font-size: var(--text); }
  .field--wide { margin-top: var(--gap-4); }
  .field--wide textarea { margin-top: var(--gap-1); }

  /* Крестик удаления всегда видно: пальцем «навести» нельзя */
  .comment__delete button { opacity: 1; }
  .comments__form { flex-direction: column; }
  .comments__form textarea, .comments__form button { width: 100%; }

  /* Формы Django — тем же ритмом, что и наши поля */
  form p { margin: var(--gap-4) 0; }
  form p > label { font-size: var(--text); }
  form p input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  form p select, form p textarea { max-width: none; }

  /* 16px ровно: при меньшем шрифте айфон сам приближает экран, когда
     ставишь курсор в поле, и обратно его приходится оттягивать руками */
  input, textarea, select, button, .button { font-size: 16px; }

  /* «я тут» — с воздухом от поля, а не впритык */
  .place-picker { display: block; }
  .place-picker .search-select__input { width: 100%; min-width: 0; }
  .place-picker__here { margin: var(--gap-2) 0 0; width: 100%; }
  .slider output { font-size: var(--text-lg); }

  .nav {
    /* top: auto обязателен: в настольном правиле стоит top: 0, а при
       заданных сразу top, bottom и height браузер слушает top и
       игнорирует bottom — меню прилипало к ВЕРХУ вместо низа */
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: auto; flex: none;
    /* Высота + отступ под системную полоску жестов (айфон). Без него меню
       либо висело над низом, либо пряталось за полоской */
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    flex-direction: row; align-items: center; justify-content: space-around;
    padding: var(--gap-1) var(--gap-3) calc(var(--gap-1) + env(safe-area-inset-bottom, 0px));
    border-right: none;
    border-top: 1px solid var(--line);
    background: rgba(27, 29, 37, .96);
    backdrop-filter: blur(8px);
    z-index: 50;
  }

  /* Внизу — только три кнопки: friends · V+ · myVibe */
  /* Модерация — решение за столом: на телефоне таблицу прячем
     (ссылка в меню и так скрыта правилом ниже) */
  .moderation { display: none; }
  .moderation__mobile { display: block; color: var(--muted); }

  .nav .agemark { display: none; }   /* на мобилке значок живёт в верхней полоске */
  .nav__logo, .nav__bottom, .nav__link--feed,
  .nav__link--admin, .nav__link--profile { display: none; }

  .nav__link { font-size: var(--text); padding: var(--gap-2) var(--gap-4); }
  .nav__link.is-active { background: none; box-shadow: none; color: var(--violet); }

  /* Прямоугольная и здесь — просто крупнее соседей */
  .nav__add { margin: 0; padding: var(--gap-2) var(--gap-4); }
  .nav__add-mark { font-size: var(--text-lg); }

  .topbar {
    padding: var(--gap-3) var(--gap-4);
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
    position: sticky; top: 0; z-index: 40;
  }

  .page { padding: var(--gap-4) var(--gap-4) calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 2rem); max-width: none; }
  .vform { max-width: none; }

  .search-select__input { min-width: 0; width: 100%; }
  .slider input[type="range"] { width: 100%; max-width: 11rem; }

  /* Микс: на телефоне колонки не влезают — каждая строка становится
     карточкой-сеткой: слева бренд над вкусом, справа по краю % над крестиком */
  #mix-table, #mix-table tbody, #mix-table td { display: block; }
  #mix-table thead { display: none; }

  .mix-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  pct"
      "flavor remove";
    gap: var(--gap-2);
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--gap-2) var(--gap-3);
    margin-bottom: var(--gap-2);
  }
  #mix-table td { width: auto !important; padding: 0; }
  #mix-table td:nth-of-type(1) { grid-area: brand; }
  #mix-table td:nth-of-type(2) { grid-area: flavor; }
  #mix-table td:nth-of-type(3) { grid-area: pct; justify-self: end; }
  #mix-table td:nth-of-type(3) input { width: 5rem; }
  #mix-table td:nth-of-type(4) { grid-area: remove; justify-self: end; }
  .card__mixblock { flex-direction: column-reverse; align-items: flex-start; gap: var(--gap-3); }
}

/* На десктопе верхняя полоска не нужна — всё в боковом меню */
@media (min-width: 761px) {
  .topbar { display: none; }
}