/* Доска объявлений и торговый чат: общие стили.
   Вынесено из `kodg_board_css()` (engine/lib/board/view.php). */
/* Цвета страницы. Обычная версия берёт переменные темы (светлая и тёмная
   работают сами), лёгкая — класс `kodg-lite` на <body> — свои постоянные. */
body{--pg-bg:var(--k-bg);--pg-panel:var(--k-panel);--pg-border:var(--k-border);--pg-text:var(--k-text);
  --pg-text2:var(--k-text2);--pg-muted:var(--k-muted);--pg-acc:var(--k-accent);--pg-acch:var(--k-accent-h)}
body.kodg-lite{--pg-bg:#fff;--pg-panel:#fff;--pg-border:#ddd;--pg-text:#333;
  --pg-text2:#555;--pg-muted:#777;--pg-acc:#337ab7;--pg-acch:#286090}
body{margin:0;background:var(--pg-bg);color:var(--pg-text)}
/* Шрифт — только в обычной версии: лёгкая оставляет бутстраповский */
body:not(.kodg-lite){font:15px/1.6 "KodgLato","Helvetica Neue",Helvetica,Arial,sans-serif}
/* ⚠️ Общее правило, а не заплатка на каждый случай: `display:flex` у самого
   элемента перебивает встроенное `[hidden]`, и скрытое остаётся на виду.
   Так уже было дважды — с липкой полосой публикации и с галочкой обмена
   в окне правки. */
.bd [hidden]{display:none!important}
.bd{max-width:1180px;margin:0 auto;padding:22px 15px 56px}
.bd h1{font-size:36px;line-height:1.1;margin:0 0 6px;color:var(--pg-text);font-weight:500}
.bd .lead{color:var(--pg-text2);font-size:16px;margin:0 0 18px}
.bd .card{background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:6px;padding:16px 18px;margin:0 0 14px}
.bd h2{font-size:17px;margin:0 0 10px;color:var(--pg-text)}
.bd p{margin:0 0 10px;color:var(--pg-text2)}
.bd a{color:var(--pg-acc)}
.bd .muted{color:var(--pg-muted)}
.bd .small{font-size:13px;color:var(--pg-muted)}
.bd .ok{color:#2e7d32}
.bd .warn{color:#b03a2e}

/* Поля и кнопки — один набор на все три страницы доски */
.bd input[type=text],.bd input[type=number],.bd select,.bd textarea{
  padding:8px 10px;border:1px solid var(--pg-border);border-radius:5px;background:var(--pg-bg);color:var(--pg-text);font-size:14px}
/* ⚠️ Ширины полей проставлены в разметке («min-width:280px» у выбора
   характеристики). На телефоне такое поле шире экрана, и страницу начинало
   таскать вбок. Потолок тут перебивает любую заданную ширину. */
.bd input,.bd select,.bd textarea{max-width:100%;box-sizing:border-box}
.bd textarea{width:100%;min-height:150px;font:13px/1.45 Consolas,Menlo,monospace;resize:vertical}
/* ⚠️ Моноширинный шрифт нужен полю, куда вставляют рюкзак: там важны столбцы
   игрового текста. Описание и подпись — обычные слова, и читать их такой
   гарнитурой неудобно. */
.bd textarea.prose{font-family:inherit;font-size:14px;line-height:1.45}
/* Панелька разметки над полем: две кнопки и подсказка. Прижата к самому полю,
   чтобы читалась как его часть, а не как отдельная строка формы. */
.bd .mkbar{display:flex;align-items:center;gap:5px;margin:0 0 -1px}
.bd .mk{width:28px;height:26px;padding:0;border:1px solid var(--pg-border);border-bottom-color:transparent;
  border-radius:5px 5px 0 0;background:var(--pg-panel);color:var(--pg-text2);font-size:13px;line-height:1;cursor:pointer}
.bd .mk:hover{color:var(--pg-text);background:var(--pg-bg)}
.bd .mk-b{font-weight:700}
.bd .mk-i{font-style:italic}
.bd .mk-u{text-decoration:underline}
.bd .mk-s{text-decoration:line-through}
.bd .mk-li{font-size:16px;line-height:1}
.bd .mk-tip{font-size:11px;color:var(--pg-muted);margin-left:4px}
/* Счётчик знаков — у правого края панельки: он про поле целиком, а не про кнопки */
.bd .mk-cnt{margin-left:auto;font-size:11px;color:var(--pg-muted);font-variant-numeric:tabular-nums}
.bd .mk-cnt.near{color:#a4590f}
.bd .mk-cnt.full{color:#b03a2e;font-weight:600}
.bd .btn{display:inline-block;padding:9px 20px;background:var(--pg-acc);color:#fff;border:0;border-radius:5px;
  font-size:15px;cursor:pointer;text-decoration:none}
.bd .btn:hover{background:var(--pg-acch);color:#fff;text-decoration:none}
.bd .btn.ghost{background:transparent;border:1px solid var(--pg-border);color:var(--pg-text2)}
.bd .btn.ghost:hover{background:transparent;color:var(--pg-text)}
.bd .btn.small{padding:5px 12px;font-size:13px}
/* ⚠️ `margin:0` обязателен: у бутстрапа `.row` идёт с `margin:0 -15px`, и всё,
   что лежит в такой строке, выезжает за отступы карточки — в окне правки поле
   цены стояло левее собственной подписи. Свой `.row` — обычный флекс, чужие
   отрицательные поля ему ни к чему. */
.bd .row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0}
.bd .fld{display:flex;flex-direction:column;gap:4px}
.bd .fld label{font-size:12px;color:var(--pg-muted)}
/* ⚠️ Общий стиль подсказки. Её ставят и отдельной строкой под полем, и
   подписью к галочке, а своего вида у неё не было — пояснения выходили таким
   же кеглем и цветом, что и содержимое формы, и спорили с ним. */
.bd .hint{display:inline-block;font-size:12px;line-height:1.4;color:var(--pg-muted);font-weight:400}
.bd .fld > .hint{margin-top:3px}
.bd label.hint{display:inline-flex;align-items:center;gap:5px;margin:0}

/* Карточка вещи — как в истории аукциона */
.bd .bi{display:flex;gap:11px;align-items:flex-start}
.bd .bi-pic{width:46px;height:46px;flex:0 0 46px;object-fit:contain}
/* Вещи без картинки (запрос «Зачаровать» без уточнения, свои слова) —
   мешочек со знаком вопроса, а не пустая рамка: ряд не выглядит сломанным */
.bd .bi-pic.nopic{border-radius:4px}
.bd .bi-b{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.bd .bi-n{line-height:1.35}
.bd .bi-t{font-size:15px}
.bd .q{display:inline-block;padding:0 4px;border-radius:2px;font-size:10px;line-height:15px;
  font-weight:700;color:#fff;vertical-align:2px}
.bd .ed{display:inline-block;padding:0 4px;border:1px solid var(--pg-border);border-radius:2px;
  font-size:10px;line-height:13px;color:var(--pg-muted);vertical-align:2px}
.bd .q-VP{color:#AAAAAA}
.bd .q.q-VP{background:#AAAAAA;color:#fff}
.bd .q-P{color:#616161}
.bd .q.q-P{background:#616161;color:#fff}
.bd .q-F{color:#659BA3}
.bd .q.q-F{background:#659BA3;color:#fff}
.bd .q-VF{color:#34729A}
.bd .q.q-VF{background:#34729A;color:#fff}
.bd .q-EF{color:#884EA2}
.bd .q.q-EF{background:#884EA2;color:#fff}
.bd .q-R{color:#95486D}
.bd .q.q-R{background:#95486D;color:#fff}
.bd .q-VR{color:#B5AE0B}
.bd .q.q-VR{background:#B5AE0B;color:#fff}
.bd .q-ER{color:#E0AF29}
.bd .q.q-ER{background:#E0AF29;color:#fff}
.bd .q-U{color:#D26720}
.bd .q.q-U{background:#D26720;color:#fff}
.bd .q-L{color:#C20C0C}
.bd .q.q-L{background:#C20C0C;color:#fff}

.bd .fact{display:block;font-size:12px;color:var(--pg-muted)}
.bd .fact b{font-weight:400;color:var(--pg-text2)}
.bd .fact.dead b,.bd .fact.soon b{color:#b03a2e}
.bd .fact.used b{color:#a4590f}
/* Пометки игры — служебная приписка, не описание: мельче, бледнее, за пунктиром */
.bd .fact.flags{margin-top:6px;padding-top:4px;border-top:1px dashed var(--pg-border);font-size:11px;line-height:1.45;color:var(--pg-muted)}
/* «Всего защит» — главная цифра у чарок. На аукционе она подсвечена жёлтым;
   здесь мягче, но так же выделена из общего списка характеристик. */
.bd .defs{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:11px;
  background:#fdf2d4;color:#6b4e0d;font-size:12px;line-height:1.5}
.bd .defs b{font-weight:700}
/* «Только через аукцион» — не украшение, а условие сделки: без него двое
   договорятся и упрутся в игру. */
.bd .onlyauc{display:inline-block;margin-top:5px;margin-right:6px;padding:2px 9px;border-radius:11px;
  background:#e8eefb;color:#2b4a7d;font-size:12px;line-height:1.5}
.bd .mass{font-size:12px;color:var(--pg-muted)}
/* Услуга: картинки у неё нет, вместо неё — значок, чтобы строка не начиналась
   с пустоты и список не «плясал» левым краем. */
.bd .bi-pic.srv{border:1px dashed var(--pg-border);border-radius:4px;position:relative}
.bd .bi-pic.srv:after{content:"🛠";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);text-align:center;font-size:20px;opacity:.55}
.bd .srv-d{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--pg-text2)}
/* Складка длинного описания. Показываем примерно восемь строк, остальное
   прячем; нижний край растворяем, чтобы обрыв не выглядел ошибкой. */
.bd .srv-d.clip{position:relative;max-height:11.6em;overflow:hidden}
.bd .srv-d.clip:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;
  background:linear-gradient(to bottom, rgba(0,0,0,0), var(--pg-panel))}
.bd .srv-t:checked ~ .srv-d.clip{max-height:none}
.bd .srv-t:checked ~ .srv-d.clip:after{display:none}
.bd .srv-more{display:inline-block;margin-top:4px;font-size:12px;color:var(--pg-acc);cursor:pointer;
  font-weight:400;user-select:none}
.bd .srv-more:hover{color:var(--pg-acch);text-decoration:underline}
.bd .srv-more:before{content:"Показать всё ▾"}
.bd .srv-t:checked ~ .srv-more:before{content:"Свернуть ▴"}
/* Подписи разделов внутри карточки — как в игре: «Требуется минимальное:»,
   «Действует на:», «Описание:» набраны жирным и начинают свой кусок. */
.bd .hdr{display:inline-block;color:var(--pg-text2);font-weight:600}
.bd .note,.bd .descr,.bd .par{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--pg-muted)}
.bd .note{font-style:italic}

/* Объявление: вещь слева, деньги и продавец справа.
   ⚠️ Классы НЕ начинаются с `ad`: блокировщики рекламы прячут всё, что похоже
   на `.ad`, `.ad-r`, `.ads` — правилом `display:none !important`. Из-за этого
   у людей с блокировщиком пропадала вся правая колонка: цена и кнопки. */
.bd .bo-row{display:flex;gap:16px;align-items:flex-start;background:var(--pg-panel);border:1px solid var(--pg-border);
  border-radius:6px;padding:13px 15px;margin:0 0 10px}
.bd .bo-item{flex:1 1 auto;min-width:0}
.bd .bo-side{flex:0 0 260px;text-align:right}
.bd .bp-v{display:block;font-size:19px;color:var(--pg-text)}
.bd .bp-k{display:block;font-size:12px;color:var(--pg-muted)}
.bd .want{display:block;margin-top:5px;padding:5px 8px;border-left:2px solid var(--pg-border);
  font-size:12px;line-height:1.35;color:var(--pg-text2)}
/* Полоса действий: она про доску целиком, поэтому стоит над вкладками
   «Продают/Ищут» и отделена от них рамкой. */
.bd .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:6px;padding:11px 14px;margin:0 0 14px}
.bd .actions .acts{display:flex;flex-wrap:wrap;gap:8px}
.bd .who-me{font-size:13px;color:var(--pg-muted)}
.bd .linky{background:none;border:0;padding:0;color:var(--pg-acc);font-size:13px;cursor:pointer;text-decoration:underline}
.bd .sortbar{font-size:13px;color:var(--pg-muted)}
.bd .sortbar a{margin-left:8px}
.bd .sortbar b{margin-left:8px;color:var(--pg-text)}
/* Фильтр: смысловые куски с воздухом между ними и отбивкой линией —
   сплошной строкой полей форма читалась как свалка. */
.bd .filter{padding:0}
.bd .f-sec{padding:14px 20px;border-bottom:1px solid var(--pg-border)}
.bd .f-sec > label{display:block;margin:0 0 8px;font-size:12px;color:var(--pg-muted)}
.bd .f-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;padding:14px 20px;background:var(--pg-bg);
  border-radius:0 0 6px 6px}
.bd .f-btns{margin-left:auto;display:flex;gap:8px}
.bd .f-inl{display:flex;gap:12px;align-items:flex-start;padding:10px 20px}
.bd .f-inl > label{flex:0 0 84px;margin:5px 0 0}
.bd .f-cl{display:block;margin:0 0 8px;font-size:12px;color:var(--pg-muted)}
.bd .f-cwrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
/* Галочка спрятана: нажатая кнопка видна по обводке */
.bd .qc{position:relative}
.bd .qc input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bd .qc:focus-within{outline:2px solid var(--pg-acc);outline-offset:1px}
.bd .qc.on{background:color-mix(in srgb,var(--pg-acc) 10%,transparent)}
.bd .qc:has(input:checked){border-color:var(--pg-acc);box-shadow:inset 0 0 0 1px var(--pg-acc);background:color-mix(in srgb,var(--pg-acc) 10%,transparent)}
.bd .pair{display:inline-flex;gap:6px;align-items:center}
.bd .cond{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.bd .ico{width:32px;height:32px;line-height:1;border:1px solid var(--pg-border);border-radius:5px;background:transparent;
  color:var(--pg-muted);font-size:17px;cursor:pointer}
.bd .ico:hover{color:var(--pg-text)}
/* Класс качества — буквами и цветом, как в самой игре: VP, P, F… Подписи
   словами тут только мешали бы, они уходят в подсказку при наведении. */
.bd .qpick{display:flex;flex-wrap:wrap;gap:6px}
.bd .qc{display:inline-flex;align-items:center;gap:5px;margin:0;padding:3px 10px 3px 8px;
  border:1px solid var(--pg-border);border-radius:14px;cursor:pointer;font-weight:400;user-select:none}
.bd .qc.on{border-color:var(--pg-acc);box-shadow:inset 0 0 0 1px var(--pg-acc)}
.bd .qc.none{opacity:.45}
.bd .qc input{margin:0}
.bd .qc .q{min-width:26px;text-align:center}
.bd .qc .qn{font-size:12px;color:var(--pg-muted)}
/* Категории без объявлений спрятаны, пока не попросят весь список */
.bd .cpick .cx{display:none}
.bd .cpick.all .cx{display:inline-flex}
.bd .cpick .cmore{align-self:center;font-size:13px}
/* Свободные очки распределения — отдельной плашкой над «Действует на» */
.bd .bi-up{display:block;margin:6px 0;padding:6px 10px;border-left:3px solid var(--pg-acc);border-radius:0 4px 4px 0;
  background:color-mix(in srgb,var(--pg-acc) 7%,transparent);font-size:14px}
.bd .bi-up-now{color:var(--pg-text2)}
/* Выбор категории в формах: кнопка и всплывающая сетка, как в игре */
.bd .cpk{position:relative;display:inline-block}
.bd .cpk-btn{display:inline-flex;align-items:center;gap:7px;min-width:240px;padding:5px 10px;border:1px solid var(--pg-border);
  border-radius:4px;background:var(--pg-panel);color:var(--pg-text);font:inherit;cursor:pointer;text-align:left}
.bd .cpk-btn .cpk-t{flex:1}
.bd .cpk-pop{position:absolute;z-index:1060;top:calc(100% + 4px);left:0;width:min(640px,calc(100vw - 32px));
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:8px;background:var(--pg-panel);border:1px solid var(--pg-border);
  border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:60vh;overflow:auto}
.bd .cpk-pop[hidden]{display:none}
.bd .cpk-o{display:flex;align-items:center;gap:7px;padding:4px 6px;border:0;border-radius:4px;background:none;
  color:var(--pg-text);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.bd .cpk-o:hover{background:color-mix(in srgb,var(--pg-acc) 8%,transparent)}
.bd .cpk-o.on{box-shadow:inset 0 0 0 1px var(--pg-acc);font-weight:700}
.bd .ci-none{background:none;border:1px dashed var(--pg-border)}
@media (max-width:600px){ .bd .cpk-pop{grid-template-columns:repeat(2,1fr)} .bd .cpk-btn{min-width:0;width:100%} }
/* В окне правки сетка раскрывается в потоке: окно узкое и прокручивается */
.bd .bmod-box .cpk{display:block}
.bd .bmod-box .cpk-btn{width:100%}
.bd .bmod-box .cpk-pop{position:static;width:auto;margin-top:4px;grid-template-columns:repeat(2,1fr);box-shadow:none;max-height:240px}
.bd .bm-row{display:flex;gap:10px;flex-wrap:wrap}
.bd .bmod-box .cond select[name="wname[]"]{flex:1 1 200px;min-width:0}
/* Значки категорий — картинки настоящих вещей (ходовая вещь категории на
   аукционе), одним спрайтом 44 px на значок под чёткие экраны */
.bd .ci{display:inline-block;width:22px;height:22px;flex:0 0 22px;border-radius:3px;
  background:url(/media/board/cats.webp) no-repeat;background-size:946px 22px}
.bd .ci-1{background-position:-0px 0}.bd .ci-2{background-position:-22px 0}.bd .ci-t1{background-position:-44px 0}.bd .ci-t2{background-position:-66px 0}.bd .ci-t3{background-position:-88px 0}.bd .ci-t5{background-position:-110px 0}.bd .ci-t30{background-position:-132px 0}.bd .ci-t51{background-position:-154px 0}.bd .ci-t52{background-position:-176px 0}.bd .ci-4{background-position:-198px 0}.bd .ci-5{background-position:-220px 0}.bd .ci-6{background-position:-242px 0}.bd .ci-9{background-position:-264px 0}.bd .ci-10{background-position:-286px 0}.bd .ci-11{background-position:-308px 0}.bd .ci-12{background-position:-330px 0}.bd .ci-13{background-position:-352px 0}.bd .ci-14{background-position:-374px 0}.bd .ci-16{background-position:-396px 0}.bd .ci-17{background-position:-418px 0}.bd .ci-18{background-position:-440px 0}.bd .ci-19{background-position:-462px 0}.bd .ci-23{background-position:-484px 0}.bd .ci-80{background-position:-506px 0}.bd .ci-81{background-position:-528px 0}.bd .ci-83{background-position:-550px 0}.bd .ci-86{background-position:-572px 0}.bd .ci-90{background-position:-594px 0}.bd .ci-91{background-position:-616px 0}.bd .ci-100{background-position:-638px 0}.bd .ci-101{background-position:-660px 0}.bd .ci-130{background-position:-682px 0}.bd .ci-140{background-position:-704px 0}.bd .ci-150{background-position:-726px 0}.bd .ci-160{background-position:-748px 0}.bd .ci-161{background-position:-770px 0}.bd .ci-162{background-position:-792px 0}.bd .ci-163{background-position:-814px 0}.bd .ci-166{background-position:-836px 0}.bd .ci-170{background-position:-858px 0}.bd .ci-190{background-position:-880px 0}.bd .ci-191{background-position:-902px 0}.bd .ci-195{background-position:-924px 0}
/* Заголовок — общей полосой сайта, как на остальных страницах портала */
.bd .page-header{margin:0 0 16px;padding-bottom:9px;border-bottom:1px solid var(--pg-border)}
.bd .page-header h1{margin:0}
.bd .tabs{display:flex;gap:8px;margin:0 0 14px}
.bd .tabs a{padding:7px 16px;border:1px solid var(--pg-border);border-radius:18px;font-size:14px;
  text-decoration:none;color:var(--pg-text2)}
.bd .tabs a.on{background:var(--pg-acc);border-color:var(--pg-acc);color:#fff}
/* ⚠️ Счётчик внутри выбранной вкладки — тоже светлый: общий класс `.muted`
   красил его серым, и на красном фоне цифра пропадала. */
.bd .tabs a.on .muted{color:rgba(255,255,255,.78)}
/* Репутация: строка над списком и два окна — со списком оценок и с формой.
   ⚠️ Окна на переключателях, без скрипта: страницу по короткой ссылке
   открывают с телефона, и лишний скрипт ей ни к чему. */
.bd .rep{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;
  padding:10px 14px;background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:6px}
.bd .rep-stars{color:#d79a1e;letter-spacing:1px;white-space:nowrap}
.bd .rep-avg{font-size:19px;color:var(--pg-text)}
.bd .rep-n{font-size:13px;color:var(--pg-acc);cursor:pointer;text-decoration:underline}
.bd .rep-n.muted{color:var(--pg-muted);cursor:default;text-decoration:none}
.bd .rep .btn{margin-left:auto}
.bd .rep-n[data-rep]{cursor:pointer}
/* Значок репутации в карточке объявления */
.bd .repchip{display:inline-flex;align-items:center;gap:3px;font-size:13px;cursor:pointer}
.bd .repchip:hover b{color:var(--pg-acc)}
.bd .repchip.none{color:var(--pg-muted);font-size:12px;cursor:default}
/* «оценить» рядом со значком: действие, а не украшение, поэтому ссылкой */
.bd .repme{margin-left:8px;font-size:12px;color:var(--pg-acc);cursor:pointer;text-decoration:underline}
.bd .repme:hover{color:var(--pg-acch)}
.bd .rep-pager{margin-top:12px}
.bd .rep-pager a,.bd .rep-pager span{display:inline-block;min-width:26px;padding:3px 7px;margin:0 4px 4px 0;
  border:1px solid var(--pg-border);border-radius:4px;font-size:13px;text-align:center;text-decoration:none}
.bd .rep-pager span.on{background:var(--pg-acc);border-color:var(--pg-acc);color:#fff}
/* ⚠️ Базовое `display:none` у `.cmod` перебивало снятый `hidden` у окна,
   которым правит скрипт: оно открывалось и не показывалось. Окна на
   переключателях так и остаются скрытыми по умолчанию, а это — показывается,
   как только с него снят `hidden`. */
.bd .cmod[hidden]{display:none!important}
/* Оба окна, которыми правит скрипт: базовое `display:none` у `.cmod` держит
   их закрытыми, а показывает снятый `hidden`. */
.bd #repbox:not([hidden]),
.bd #repform:not([hidden]),
.bd #repappeal:not([hidden]){display:flex}

.bd .cmod{position:fixed;left:0;right:0;top:0;bottom:0;z-index:1050;display:none;
  align-items:center;justify-content:center;padding:16px}
.bd .cmod-bg{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.45);margin:0}
.bd .cmod-box{position:relative;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  overflow-x:hidden;background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:8px;
  padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.bd .cmod-box h2{margin:0 0 8px;font-size:19px;padding-right:24px}
.bd .cmod-x{position:absolute;right:10px;top:6px;width:26px;height:26px;line-height:24px;
  text-align:center;color:var(--pg-muted);font-size:20px;cursor:pointer;margin:0;user-select:none}
.bd .cmod-x:hover{color:var(--pg-text)}
#rep-list:checked ~ #m-list,
#rep-form:checked ~ #m-form{display:flex}
/* ⚠️ Пока окно открыто, страница под ним не должна прокручиваться вместе с
   ним — но `overflow` у `body` переключателем не достать, поэтому просто
   держим окно на весь экран со своей прокруткой. */

/* Одна оценка в списке */
.bd .rep-item{padding:11px 0;border-top:1px solid var(--pg-border)}
.bd .rep-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bd .rep-txt{margin-top:5px;font-size:13px;line-height:1.45;color:var(--pg-text2);overflow-wrap:anywhere}
.bd .rep-act{margin-top:5px;font-size:12px}

/* Выбор звёзд: правее звезда — выше оценка. Радио идут в обратном порядке,
   чтобы подсвечивать «эту и все левее» одним правилом `~`. */
.bd .starpick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.bd .starpick input{position:absolute;opacity:0;width:0;height:0}
.bd .starpick label{font-size:27px;line-height:1;color:var(--pg-border);cursor:pointer;margin:0;
  transition:color .1s}
.bd .starpick input:checked ~ label,
.bd .starpick label:hover,
.bd .starpick label:hover ~ label{color:#d79a1e}

/* Вкладки на странице игрока (`/b/<код>`) — на переключателях, без скрипта и
   без ссылок: адрес там короткий и без параметров, его кидают в игровой чат,
   и переключение вкладки не должно его портить. */
.bd .utabs-bar label{padding:7px 16px;border:1px solid var(--pg-border);border-radius:18px;font-size:14px;
  color:var(--pg-text2);cursor:pointer;font-weight:400;margin:0;user-select:none}
.bd .utabs-bar label:hover{color:var(--pg-text)}
.bd .upane{display:none}
.bd .utabs .ut-sell:checked    ~ .utabs-bar label[for="ut-sell"],
.bd .utabs .ut-buy:checked     ~ .utabs-bar label[for="ut-buy"],
.bd .utabs .ut-service:checked ~ .utabs-bar label[for="ut-service"]{
  background:var(--pg-acc);border-color:var(--pg-acc);color:#fff}
.bd .utabs .ut-sell:checked    ~ .utabs-bar label[for="ut-sell"] .muted,
.bd .utabs .ut-buy:checked     ~ .utabs-bar label[for="ut-buy"] .muted,
.bd .utabs .ut-service:checked ~ .utabs-bar label[for="ut-service"] .muted{color:rgba(255,255,255,.78)}
.bd .utabs .ut-sell:checked    ~ .upane-sell,
.bd .utabs .ut-buy:checked     ~ .upane-buy,
.bd .utabs .ut-service:checked ~ .upane-service{display:block}

/* Фильтр «Моих объявлений»: два подписанных ряда сегментов в одной карточке.
   Статус выбран сплошной заливкой, тип — обводкой: видно, что это два
   разных вопроса, а не одно меню в две строки. Цветные точки — те же, что
   у ярлыка вида на карточке объявления. */
.bd .myf{background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:8px;padding:12px 14px;margin:0 0 14px;
  display:grid;gap:10px}
.bd .myf-row{display:flex;align-items:center;gap:12px;min-width:0}
.bd .myf-l{flex:none;width:52px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--pg-muted)}
.bd .seg{display:flex;min-width:0;overflow-x:auto;border:1px solid var(--pg-border);border-radius:8px;scrollbar-width:none}
.bd .seg::-webkit-scrollbar{display:none}
.bd .seg a{flex:none;display:flex;align-items:center;gap:6px;padding:7px 14px;font-size:14px;line-height:1.2;
  color:var(--pg-text2);text-decoration:none;white-space:nowrap;border-left:1px solid var(--pg-border)}
.bd .seg a:first-child{border-left:0}
.bd .seg a:hover{color:var(--pg-text)}
.bd .seg a .n{font-size:12px;color:var(--pg-muted);font-variant-numeric:tabular-nums}
.bd .seg a.zero{opacity:.5}
.bd .seg a.on{opacity:1;background:var(--pg-acc);color:#fff}
.bd .seg a.on .n{color:rgba(255,255,255,.8)}
.bd .seg-k a.on{background:none;color:var(--pg-acc);font-weight:600;box-shadow:inset 0 0 0 2px var(--pg-acc);border-radius:7px}
.bd .seg-k a.on .n{color:var(--pg-acc)}
.bd .seg-k a.on + a{border-left-color:transparent}
.bd .seg .dot{width:8px;height:8px;border-radius:50%;flex:none}
.bd .seg .dot.k-sell{background:#43a047}
.bd .seg .dot.k-buy{background:#3b78c4}
.bd .seg .dot.k-srv{background:#8e5bb5}

/* Ярлык вида: в «Моих объявлениях» рядом стоят продажа и спрос, и по одной
   цене их не различить — поэтому слово стоит прямо над вещью. */
.bd .kindtag{display:inline-block;margin:0 0 7px;padding:2px 10px;border-radius:11px;
  font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.bd .kindtag.k-sell{background:#dff3e0;color:#215c2c}
.bd .kindtag.k-buy{background:#e3ecf7;color:#26476e}
.bd .kindtag.k-srv{background:#efe6f5;color:#4d2f66}
.bd .bp-s,.bd .bp-a{display:block;font-size:12px;color:var(--pg-muted)}
.bd .bp-a.good{color:#2e7d32}
.bd .bp-a.bad{color:#b03a2e}
.bd .bp-b{display:inline-block;margin-top:3px;margin-left:4px;padding:1px 7px;border:1px solid var(--pg-border);
  border-radius:10px;font-size:11px;color:var(--pg-text2)}
.bd .bp-b:first-of-type{margin-left:0}
.bd .bp-b.swap{border-color:#b8cde4;color:#26476e}
.bd .bo-note{margin:8px 0 0 57px;padding:6px 10px;border-left:2px solid var(--pg-border);font-size:13px;color:var(--pg-text2)}
.bd .who{margin-top:8px;font-size:13px;color:var(--pg-text2)}
.bd .who .chk{color:#2e7d32}
.bd .when{font-size:12px;color:var(--pg-muted)}
.bd .st{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;margin-left:6px}
.bd .st-active{background:#dff3e0;color:#215c2c}
.bd .st-expired{background:#fdf2d4;color:#7a5b12}
.bd .st-hidden{background:#eceff1;color:#5a646b}
.bd .st-sold{background:#e3ecf7;color:#26476e}
.bd .st-kind{background:var(--pg-bg);color:var(--pg-muted);border:1px solid var(--pg-border)}
.bd .st-deleted{background:#f2e3e3;color:#7d3b3b}

/* Правая колонка в «Моих объявлениях»: цена, состояние, кнопки и правка цены —
   четырьмя ровными блоками. Раньше формы шли подряд строчными элементами и
   переносились как попало. */
.bd .bo-side.wide{flex:0 0 300px}
.bd .mine-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-top:8px;
  font-size:12px;color:var(--pg-muted)}
.bd .mine-meta .chips{display:flex;gap:5px;margin-bottom:2px}
.bd .mine-meta b{color:var(--pg-text2);font-weight:600}
.bd .bo-wlink{background:none;border:0;padding:0 0 0 2px;color:var(--pg-acc);font:inherit;cursor:pointer;white-space:nowrap;text-decoration:none}
.bd .bo-wlink:hover{text-decoration:underline;color:var(--pg-acch)}
.bd .mine-meta .sitemsg .glyphicon{top:1px;margin-right:2px}
.bd .mine-meta .sitemsg.on{color:#2e7d32}
.bd .mine-meta .sitemsg.on b{color:#2e7d32}
.bd .mine-meta .sitemsg.on a{color:#2e7d32}
.bd .linkbtn{background:none;border:0;padding:0;color:var(--pg-acc);font:inherit;cursor:pointer;text-decoration:underline dotted}
.bd .linkbtn:hover{color:var(--pg-acch)}
.bd .mine-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:10px}
.bd .mine-acts form{margin:0}
.bd .mine-acts .btn{white-space:nowrap}
.bd .btn.danger{color:#b03a2e;border-color:#e2c4c0}
.bd .btn.danger:hover{color:#8e2f25;border-color:#b03a2e}
/* Короткая ссылка продавца: её копируют и кидают в игровой чат, поэтому поле
   с адресом и кнопка рядом, а не «нажмите, чтобы узнать». */
.bd .shortlink{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bd .shortlink b{font-weight:600}
.bd .sl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bd .shortlink input[type=text]{width:230px;font-family:Consolas,Menlo,monospace;font-size:13px}
.bd .shortlink .hint{flex:1 1 100%;font-size:12px;color:var(--pg-muted)}

/* Окно правки: полей пять, и в колонке шириной в три сотни пикселей они не
   живут — поэтому отдельным окном по кнопке-карандашу. */
.bd .bmod{position:fixed;left:0;right:0;top:0;bottom:0;z-index:1050;display:flex;
  align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.45)}
.bd .bmod[hidden]{display:none}
/* ⚠️ Вбок окно не ездит никогда: любое поле, вылезшее за край, — это ошибка
   вёрстки, а не повод дать полосу прокрутки. */
.bd .bmod-box{width:100%;max-width:520px;max-height:90vh;overflow-y:auto;overflow-x:hidden;background:var(--pg-panel);
  border:1px solid var(--pg-border);border-radius:8px;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.bd .bmod-box h2{margin:0 0 3px;font-size:19px}
.bd .bmod-item{margin:0 0 14px;font-size:13px;color:var(--pg-muted)}
.bd .bmod-box .fld{width:100%}
/* Галочки — рядом, одной строкой. Раньше каждая лежала в своём `.fld` с пустой
   подписью `&nbsp;` сверху, и между ними зияла дыра в две строки. */
.bd .bmod-box .bm-checks{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
/* Подсказка справочника в окне правки: поверх остального, иначе её съедает
   следующее поле. */
.bd .bmod-box .sug{position:absolute;left:0;right:0;top:100%;z-index:3;list-style:none;margin:2px 0 0;
  padding:0;border:1px solid var(--pg-border);border-radius:5px;background:var(--pg-panel);max-height:210px;
  overflow:auto;display:none;text-align:left}
.bd .bmod-box .sug li{padding:6px 10px;cursor:pointer;font-size:13px}
.bd .bmod-box .sug li:hover{background:var(--pg-bg)}
.bd .bmod-box input[type=text],.bd .bmod-box textarea{width:100%}
.bd .bmod-box input[type=text].narrow{width:150px}
/* ⚠️ `font: 13px/1.45 inherit` — запись недопустимая: `inherit` в сокращении
   читается как название семейства, которого нет, и браузер отбрасывает ВСЁ
   правило. В окне оставался моноширинный шрифт от общего `.bd textarea`.
   Поэтому свойства по отдельности. */
.bd .bmod-box textarea{min-height:76px;font-family:inherit;font-size:14px;line-height:1.45}
/* ⚠️ `nowrap` — только подписям к галочкам, чтобы «торг уместен» не рвалось
   пополам. На обычную подсказку он ставил строку в одну линию, и длинная
   подсказка про разметку вылезала за окно горизонтальной полосой. */
.bd .bmod-box label.hint{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:13px;
  color:var(--pg-text2);font-weight:400;white-space:nowrap}
.bd .bmod-box .hint{font-size:12px;color:var(--pg-muted)}
.bd .bmod-box code{white-space:nowrap}
.bd .bmod-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--pg-border)}
.bd .edit-open .glyphicon{font-size:11px;top:1px;margin-right:2px}

/* Список вещей при публикации */
.bd .pick{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--pg-border);padding:11px 0}
.bd .pick:last-child{border-bottom:0}
.bd .pick .sel{flex:0 0 auto;padding-top:14px}
.bd .pick .mid{flex:1 1 auto;min-width:0}
.bd .pick .pr{flex:0 0 240px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.bd .pick .pr input[type=text]{width:120px;text-align:right}
.bd .pick .hint{font-size:12px;color:var(--pg-muted)}
/* Полоса отбора над списком вещей: поиск, порядок и два переключателя */
.bd .picktools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 4px;
  padding:9px 11px;background:var(--pg-bg);border:1px solid var(--pg-border);border-radius:6px}
.bd .picktools input[type=text]{width:190px}
.bd .picktools #pn{margin-left:auto}

/* Игрок одной строкой — как в админке: склонность, клан, ник, уровень, «инфо».
   Классы те же (`Kodg\UserTag`), поэтому вид на сайте и в админке совпадает. */
.bd .utag{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;line-height:1;vertical-align:middle}
.bd .utag b{font-weight:600}
.bd .utag a{color:inherit}
.bd .utag a:hover b{color:var(--pg-acc)}
.bd .utag-al{width:12px;height:15px;display:block}
.bd .utag-kl img{width:24px;height:15px;display:block;border-radius:2px}
.bd .utag-lv{color:var(--pg-muted);font-size:12px}
.bd .utag-inf img{width:12px;height:11px;display:block}
.ihint{position:relative;display:inline-block;margin-left:4px;line-height:1;vertical-align:middle}
.ihint > a{color:var(--pg-muted);text-decoration:none;cursor:pointer}
.ihint > a:hover,.ihint > a:focus{color:var(--pg-acc);text-decoration:none;outline:none}
.ihint .glyphicon{font-size:13px;top:2px}
/* Коробочка — как `.popover` у «Средней стоимости»: та же тень, скругление и
   кегль. Держится на `fixed`, координаты ставит скрипт по месту значка. */
.ihint .pop{position:fixed;left:0;top:0;z-index:1060;width:290px;
  padding:9px 14px;background:var(--pg-panel);color:var(--pg-text2);border:1px solid var(--pg-border);border-radius:6px;
  box-shadow:0 5px 10px rgba(0,0,0,.2);text-align:left;font-family:inherit;font-size:13px;
  font-weight:400;line-height:1.5;white-space:normal;opacity:0;visibility:hidden;
  transition:opacity .12s}
.ihint .pop b{color:var(--pg-text);font-weight:600}
/* Открывается и по наведению, и по фокусу: со смартфона наведения не бывает,
   а по касанию ссылка получает фокус. */
.ihint:hover .pop,.ihint:focus-within .pop{opacity:1;visibility:visible}
/* Хвостик — в два слоя, как у `.popover` бутстрапа: снаружи треугольник в цвет
   рамки, поверх него на пиксель меньше — в цвет фона. Одним слоем выходил
   глухой серый клин, приклеенный к углу коробочки. */
.ihint .pa,.ihint .pa:after{position:absolute;display:block;width:0;height:0;
  border-color:transparent;border-style:solid}
.ihint .pa{bottom:-11px;margin-left:-11px;border-width:11px 11px 0;border-top-color:var(--pg-border)}
.ihint .pa:after{content:"";bottom:1px;left:-10px;border-width:10px 10px 0;border-top-color:var(--pg-panel)}
.ihint .pa.up{bottom:auto;top:-11px;border-width:0 11px 11px;border-top-color:transparent;
  border-bottom-color:var(--pg-border)}
.ihint .pa.up:after{bottom:auto;top:1px;border-width:0 10px 10px;border-top-color:transparent;
  border-bottom-color:var(--pg-panel)}
@media (max-width:700px){
  /* На телефоне коробочка в 290px у края экрана уезжает за него — разворачиваем
     полосой внизу, читать удобнее, и деваться ей некуда. */
  .ihint .pop{left:12px!important;right:12px!important;top:auto!important;bottom:14px!important;
    width:auto!important;font-size:14px}
  .ihint .pa{display:none!important}
}
/* Липкая полоса действий внизу экрана: у длинного списка кнопка внизу
   страницы оказывается на третьем экране, и до неё не доходят. */
.bd .sticky{position:sticky;bottom:0;z-index:5;display:flex;gap:12px;align-items:center;justify-content:flex-end;
  margin:14px -18px -16px;padding:12px 18px;background:var(--pg-panel);border-top:1px solid var(--pg-border);
  box-shadow:0 -3px 10px rgba(0,0,0,.08)}
/* ⚠️ `display:flex` перебивает встроенное `[hidden]` — полоса показывалась
   и с нулём отмеченных. */
.bd .sticky[hidden]{display:none}
.bd .pager{margin:14px 0 0}
.bd .pager a,.bd .pager span{display:inline-block;padding:5px 11px;margin:0 4px 6px 0;border:1px solid var(--pg-border);
  border-radius:4px;font-size:13px;text-decoration:none}
.bd .pager span.on{background:var(--pg-acc);border-color:var(--pg-acc);color:#fff}
/* Низ списка объявлений: показано / «Показать ещё» / номера — одной полосой */
.bd .bpg{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:4px 0 16px;
  padding:12px 16px;background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:8px}
.bd .bpg-info{font-size:13px;color:var(--pg-muted)}
.bd .bpg-info b{color:var(--pg-text);font-weight:600;font-variant-numeric:tabular-nums}
.bd .bpg-more{display:inline-flex;align-items:center;gap:8px;padding:10px 28px;border-radius:22px;background:var(--pg-acc);
  color:#fff;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.bd .bpg-more:hover,.bd .bpg-more:focus{background:var(--pg-acch);color:#fff;text-decoration:none}
.bd .bpg-end{font-size:13px;color:var(--pg-muted)}
.bd .bpg-nums{display:flex;justify-content:flex-end;align-items:center;gap:4px}
.bd .bpg-nums a,.bd .bpg-nums span{min-width:32px;height:32px;padding:0 6px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:16px;font-size:14px;color:var(--pg-text2);text-decoration:none;font-variant-numeric:tabular-nums}
.bd .bpg-nums a:hover{background:var(--pg-bg);color:var(--pg-text)}
.bd .bpg-nums .on{background:var(--pg-acc);color:#fff;font-weight:600}
.bd .bpg-nums .ar{font-size:24px;line-height:1;padding-bottom:3px;color:var(--pg-text)}
.bd .bpg-nums .gap{min-width:16px;color:var(--pg-muted)}

/* Телефон. Доску смотрят с него не реже, чем с настольного: ширина колонок,
   выключка вправо и отступы карточек там мешают — правая колонка становится
   обычным блоком под вещью, и всё в ней читается слева. */
@media (max-width:760px){
  .bd{padding:16px 12px 40px}
  .bd h1{font-size:27px}
  .bd .bo-row{display:block;padding:12px}
  .bd .bo-side,.bd .bo-side.wide{flex:none;text-align:left;margin-top:10px}
  .bd .bo-note{margin-left:0}
  .bd .pick{display:block}
  .bd .pick .pr{flex:none;align-items:flex-start;margin-top:8px}
  .bd .mine-meta{align-items:flex-start}
  .bd .mine-acts{justify-content:flex-start}
  .bd .bmod{padding:10px;align-items:flex-end}
  .bd .bmod-box{padding:14px}
  /* ⚠️ `align-items:flex-start` сжимал полосу действий до ширины содержимого,
     и три кнопки вставали столбиком на три строки. Растягиваем — они снова
     ложатся рядом и переносятся сами. */
  .bd .actions{flex-direction:column;align-items:stretch;gap:8px}
  .bd .f-sec,.bd .f-foot{padding:13px 14px}
  .bd .f-inl{flex-direction:column;gap:6px}
  .bd .f-inl > label{flex:none;margin:0}
  .bd .card{padding:14px}
  .bd .tabs{flex-wrap:wrap;gap:6px}
  .bd .myf{padding:10px 12px}
  .bd .bpg{grid-template-columns:1fr auto;padding:12px}
  .bd .bpg-more,.bd .bpg-end{grid-column:1/-1;grid-row:1;justify-self:stretch;justify-content:center}
  .bd .bpg-end{display:none}
  .bd .myf-row{flex-direction:column;align-items:stretch;gap:5px}
  /* На телефоне сегменты делят ширину поровну, без прокрутки вбок */
  .bd .seg a{flex:1 1 0;justify-content:center;gap:4px;padding:8px 4px;font-size:13px}
  .bd .seg .lg{display:none}
  .bd .sortbar{margin-top:6px}
  .bd .sticky{margin:12px -14px -14px;padding:10px 14px}
}

/* Название вещи — ссылка на карточку в каталоге: цвет качества остаётся, подчёркивание — при наведении */
a.bi-card{color:inherit;text-decoration:none}
a.bi-card:hover .bi-t,a.bi-card:focus .bi-t{text-decoration:underline}