/* Оформление поддержки. Те же цвета и шрифты, что на площадке: человек
   переходит по ссылке и должен понимать, что остался у нас. Файл свой, а не
   общий с площадкой — приложения разные, и связывать их ещё и стилями значило
   бы, что правка витрины ломает форум. */
:root{
  --bg:#06060c; --bg2:#0c0c16; --card:#ffffff08; --line:#ffffff14;
  --tx:#eaeaf2; --tx2:#8080a0; --tx3:#6d6d92; --ac:#00e87a; --err:#f46;
  --r:12px; --rs:8px;
}
*,:before,:after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font:400 15px/1.6 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}
.dim{color:var(--tx2)} .sm{font-size:13px} .ok{color:var(--ac)}
.load{padding:80px 0;text-align:center;color:var(--tx2)}

.hdr{position:sticky;top:0;z-index:10;background:#06060ce6;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:64px}
/* ── знак ──────────────────────────────────────────────────────────────────
   Тот же, что на площадке: полумесяц и две стрелки. Здесь он разметкой, а не
   картинкой — цвет берётся из стиля, стрелки двигаются по отдельности, и нет
   запроса к чужому адресу.

   Наведение оживляет сам смысл знака: стрелка вверх идёт вверх, стрелка вниз —
   вниз, полумесяц светлеет. Ничего не выдумано: знак и так про «туда-обратно»,
   движение просто договаривает то, что в нём нарисовано. */
.logo{display:flex; align-items:center; gap:9px; color:var(--tx)}
.logo:hover{text-decoration:none}
.logo-mk{position:relative; width:30px; height:30px; flex:0 0 auto; display:block}
/* Слои друг на друге: рисунок один, а двигаются части по отдельности. */
/* Двигаем ОБЁРТКУ, а не сам рисунок. Проверено опытом: сдвиг обычного блока
   в этом браузере работает, а тот же сдвиг, поставленный на элемент svg,
   молча не применяется — вплоть до того, что заданное прямо в разметке
   значение не удерживается. Обёртка снимает вопрос целиком. */
/* top/left и размер, а НЕ inset:0.
   Найдено опытом: при inset:0 блок закреплён всеми четырьмя краями сразу, и
   сдвиг к нему просто не применяется — браузер оставляет矩阵 без смещения.
   Точно такой же элемент с top/left вместо inset двигается как положено. */
.logo-mk .lgw{position:absolute; top:0; left:0; width:100%; height:100%; display:block}
.logo-mk .lg{width:100%; height:100%; fill:var(--ac); overflow:visible; display:block}
.logo-mk .lgw-moon{opacity:.9; transition:opacity .28s ease}
.logo-mk .lgw-up,.logo-mk .lgw-dn{transition:transform .28s cubic-bezier(.34,1.4,.64,1)}
.logo:hover .lgw-moon{opacity:1}
/* Смещение — В ЕДИНИЦАХ ЗНАКА, а не экрана. Внутри viewBox 200 на 200, и
   знак нарисован на 30 пикселях: «7px» здесь означает 7 из двухсот, то есть
   около одного пикселя на экране — движение, которого не видно. 22 единицы
   дают заметные три с половиной пикселя. */
/* Смещение теперь в ЭКРАННЫХ пикселях: слой — обычный элемент страницы, а не
   группа внутри рисунка, и его система координат совпадает с экраном. */
.logo:hover .lgw-up{transform:translateY(-3px)}
.logo:hover .lgw-dn{transform:translateY(3px)}
.logo-word{font:700 19px Unbounded,sans-serif; line-height:1.05}
.logo-2{color:var(--ac); display:inline-block; transition:transform .28s ease, filter .28s ease}
.logo:hover .logo-2{transform:scale(1.12) translateY(-1px); filter:drop-shadow(0 0 5px var(--ac))}
.logo em{display:block;font:400 11px Onest;color:var(--tx3);font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.hdr-nav{display:flex;align-items:center;gap:16px;font-size:14px}
.hdr-nav b{color:var(--tx)}

/* Отступ задаётся С КЛАССОМ (main.wrap), а не просто main.
   У элемента <main id="app" class="wrap"> действуют оба правила, и правило
   класса .wrap{padding:0 20px} перебивает правило тега — верхний отступ
   обнулялся, и содержимое упиралось в шапку. */
main{min-height:calc(100vh - 128px)}
main.wrap{padding:36px 20px 64px}
.h1{font:600 26px/1.25 Unbounded,sans-serif;margin-bottom:14px}
.h2{font:600 17px Unbounded,sans-serif}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 12px;flex-wrap:wrap}
.back{display:inline-block;margin-bottom:14px;font-size:14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.board{display:block;color:inherit}
.board:hover{background:#ffffff0f;text-decoration:none}
.board h2{font:600 16px Unbounded,sans-serif;margin:6px 0 4px}
.board p{font-size:13px;margin-bottom:8px}
.tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ac)}

.searchbar{display:flex;gap:8px;margin:0 0 26px}
.searchbar input{flex:1;padding:11px 14px;background:#ffffff0a;border:1px solid var(--line);border-radius:var(--rs);color:var(--tx);font:inherit;outline:none}
.searchbar input:focus{border-color:var(--ac)}
.searchbar button,.btn{padding:11px 18px;background:var(--ac);color:#04140b;border:none;border-radius:var(--rs);font:600 14px Onest;cursor:pointer;display:inline-block}
.btn:hover{opacity:.9;text-decoration:none}
.btn:disabled{opacity:.5;cursor:default}

.list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.titem{display:flex;align-items:center;gap:14px;padding:14px 18px;color:inherit;border-bottom:1px solid var(--line)}
.titem:last-child{border-bottom:none}
.titem:hover{background:#ffffff08;text-decoration:none}
.titem-main{flex:1;min-width:0}
.titem-title{font-weight:500;margin-bottom:3px}
.titem-n{color:var(--tx3);font-size:13px;flex:0 0 auto}
.pin{display:inline-block;margin-right:6px;padding:1px 7px;background:#00e87a1f;color:var(--ac);border-radius:99px;font-size:11px;vertical-align:1px}
.lockm{display:inline-block;margin-right:6px;padding:1px 7px;background:#ffffff12;color:var(--tx2);border-radius:99px;font-size:11px;vertical-align:1px}

.posts{margin:14px 0}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:10px}
.post.staff{border-color:#00e87a3d;background:#00e87a0a}
.post.removed{opacity:.6}
.post-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px}
.post-body{color:#dcdce8;word-wrap:break-word;overflow-wrap:anywhere}
.badge{padding:1px 8px;background:#00e87a1f;color:var(--ac);border-radius:99px;font-size:11px}

.publish{margin-top:16px;padding:14px;background:#ffffff08;border:1px solid var(--line);border-radius:var(--rs)}
.publish p{margin:4px 0 10px}

form label{display:block;margin:18px 0 8px;color:var(--tx2);font-size:14px}
form > label:first-of-type{margin-top:14px}
form input[type=text],form input:not([type]),form textarea{width:100%;padding:11px 14px;background:#ffffff0a;border:1px solid var(--line);border-radius:var(--rs);color:var(--tx);font:inherit;outline:none}
form input:focus,form textarea:focus{border-color:var(--ac)}
form textarea{resize:vertical;min-height:110px}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13.5px;color:var(--tx2)}
.check input{width:17px;height:17px;accent-color:var(--ac);flex:0 0 auto;margin-top:2px}
.reply textarea{margin-bottom:12px}
/* Кнопка отправки прижималась вплотную к последнему полю: пустое место под
   ошибку схлопывается, а своего отступа у кнопки не было. Отбиваем её явно —
   действие не должно выглядеть продолжением поля. */
form button[type=submit],
form .btn{margin-top:22px}

.err{color:var(--err);font-size:13.5px;margin:10px 0}
.err:empty{display:none}

.ftr{border-top:1px solid var(--line);padding:20px 0;color:var(--tx3);font-size:13px}
@media(max-width:640px){.h1{font-size:21px}.wrap{padding:0 14px}.titem{padding:12px 14px}}

/* ── свой человек в шапке ──────────────────────────────────────────────────
   Ник стоял вплотную к ссылке и читался как её продолжение: «Мои обращения
   djamp70». Отделяем чертой — ссылки слева, кто ты справа. */
/* inline-flex, а НЕ flex: #who лежит одним ребёнком в строке шапки, внутри
   него всё строчное, и блочный flex выпадал из ряда — ник налезал на ссылку. */
#who{ display:inline-flex; align-items:center; gap:14px; }
.me{
  display:inline-flex; align-items:center; gap:7px;
  padding-left:14px; margin-left:2px;
  border-left:1px solid var(--line);
}
.me-ava{
  width:24px; height:24px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#00e87a1f; color:var(--ac);
  border-radius:50%; font-size:11.5px; font-weight:600;
}
.me-name{ color:var(--tx); font-weight:500; }
.btn.btn-sm{ padding:7px 14px; font-size:13px; }
@media(max-width:640px){
  .me-name{display:none}
  .me{padding-left:10px}
  .hdr-nav{gap:10px}
}

/* ── шапка: разделы, действие, человек ─────────────────────────────────────
   Три разные вещи, и в ряду они разделены. Ссылки говорят ГДЕ смотреть,
   кнопка — ЧТО сделать, справа за чертой — кто ты. Свалить их в один ряд
   значит заставлять глаз каждый раз разбирать, что здесь нажимается для
   действия, а что для перехода. */
.hdr-nav{ display:flex; align-items:center; gap:18px; font-size:14px; }
.hdr-nav > a[data-nav]{ color:var(--tx2); }
.hdr-nav > a[data-nav]:hover{ color:var(--tx); text-decoration:none; }
.hdr-nav > a[data-nav].is-here{ color:var(--tx); font-weight:500; }
.hdr-nav .btn{ margin-left:2px; }
.me-login{ padding-left:14px; border-left:1px solid var(--line); }

/* Тема заявки в форме — тот же список, что и остальные поля. */
form select{
  width:100%; padding:11px 14px; background:#ffffff0a;
  border:1px solid var(--line); border-radius:var(--rs);
  color:var(--tx); font:inherit; outline:none; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%238080a0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px;
}
form select:focus{ border-color:var(--ac); }
form select option{ background:#12121f; color:var(--tx); }

@media(max-width:820px){
  .hdr-nav{ gap:12px; font-size:13.5px; }
  .hdr-nav > a[data-nav]:not(.is-here){ display:none; }
}

/* Переключатели «покупатель / продавец». */
.radios{ display:flex; gap:18px; flex-wrap:wrap; margin-top:2px; }
.radio{ display:flex; align-items:center; gap:8px; margin:0; cursor:pointer; color:var(--tx2); font-size:14px; }
.radio input{ width:17px; height:17px; accent-color:var(--ac); cursor:pointer; }
.radio:hover{ color:var(--tx); }
form input:disabled{ opacity:.65; cursor:not-allowed; }
.page-h1{ font:600 22px Unbounded,sans-serif; margin-bottom:6px; }