/*
  ПолиКоннект — общий стиль.
  Числа (цвета, размеры, шрифты) сняты с шаблона TM для MKPortal и стиля IPB 2.x
  старого студенческого портала 2006 года. Картинки заменены на CSS-градиенты и SVG.
*/

:root {
  --page-a: #ececeb;
  --page-b: #e9e9e8;
  --wrap-a: #e6e6e4;
  --wrap-b: #e3e3e1;
  --frame: #9aa3a6;
  --ink: #222;
  --link: #496c9f;
  --link-hover: #9f6c49;
  --box: #fafafa;
  --ipb-line: #345487;
  --row1: #f5f9fd;
  --row2: #d9e3ef;
  --row3: #eef2f7;
  --head-text: #3a4f6c;
  --orange-title: #d03f00;
  --font: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  --font-head: "Trebuchet MS", Tahoma, "DejaVu Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--page-a) repeating-linear-gradient(
    135deg,
    var(--page-a) 0, var(--page-a) 10.6px,
    var(--page-b) 10.6px, var(--page-b) 25.5px,
    var(--page-a) 25.5px, var(--page-a) 33.94px);
}

body {
  margin: 0 30px;
  font: 11px/1.6 var(--font);
  color: var(--ink);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
img { border: 0; }
p { margin: 0 0 8px; }

/* ---------- рамка страницы ---------- */

#wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 13px 3px;
  background: var(--wrap-a) repeating-linear-gradient(
    135deg,
    var(--wrap-a) 0, var(--wrap-a) 10.6px,
    var(--wrap-b) 10.6px, var(--wrap-b) 25.5px,
    var(--wrap-a) 25.5px, var(--wrap-a) 33.94px);
}

#frame {
  position: relative;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid var(--frame);
}

/* ---------- шапка ---------- */

.logo {
  position: relative;
  height: 120px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 260px 90px at 0 0, rgba(0, 18, 70, .55), transparent 100%),
    radial-gradient(ellipse 90px 60px at 100% 0, rgba(0, 18, 70, .55), transparent 100%),
    radial-gradient(ellipse 55% 120% at 78% 135%, rgba(160, 205, 245, .55), transparent 72%),
    linear-gradient(#0d3169 0, #183c70 10px, #194278 19px, #1a4a81 29px, #1c538c 38px,
      #1f5d96 48px, #2769a2 58px, #387ab2 67px, #4788c0 77px, #5292c8 86px,
      #5797cc 96px, #5391c7 106px, #427eb5 115px, #417cb3 120px);
}

.logo a {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.logo a:hover { text-decoration: none; }

.logo img { display: block; width: 46px; height: 46px; }

.logo .word {
  font: 26px/1 var(--font-head);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #0b2b62;
}

.logo .word .tld, .welcome .mark .tld { text-transform: lowercase; }

/* Только на главной — шапка выше обычной, чтобы под логотипом уместилась
   полоса активности во всю ширину (см. .wb-widget ниже). Сам логотип не
   центрируем по новой высоте, а фиксируем на том же расстоянии от верха,
   что и в обычной 120px-шапке на остальных страницах — иначе он бы "прыгал"
   при переходе между главной и другими страницами. */
.logo.logo-wb { height: 195px; }
.logo.logo-wb a { top: 37px; transform: none; }

/* ---------- меню-вкладки ---------- */

.navigatore {
  height: 25px;
  text-align: center;
  background:
    linear-gradient(#ccc, #ccc) left bottom / 100% 1px no-repeat,
    linear-gradient(#9aa3a6 0, #ced4d6 2px, #f2f4f4 4px, #fbfcfc 6px, #eef0f1 12px,
      #dde1e2 20px, #d4d9da 24px);
  font-size: 0;
}

.navigatore a {
  --u1: #c72c17; --u2: #e34833;
  display: inline-block;
  height: 24px;
  padding: 5px 12px 0;
  border-left: 1px solid #ccc;
  font: bold 11px/16px var(--font);
  color: var(--tab, #c72c17);
  background: linear-gradient(var(--u1), var(--u2)) left bottom / 100% 2px no-repeat;
  background-color: transparent;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, text-shadow .18s ease;
}
.navigatore a:last-child { border-right: 1px solid #ccc; }
.navigatore a:hover,
.navigatore a.on { background-color: #fff; color: #5e85be; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.navigatore a.on { color: var(--tab); }

.t-red    { --tab: #c72c17; --u1: #c72c17; --u2: #e34833; }
.t-orange { --tab: #d85100; --u1: #ef6800; --u2: #ff841c; }
.t-yellow { --tab: #c29200; --u1: #d9a900; --u2: #f5c51c; }
.t-green  { --tab: #1d7813; --u1: #348f2a; --u2: #50ab46; }
.t-blue   { --tab: #327ed6; --u1: #4995ed; --u2: #65b1ff; }
.t-violet { --tab: #9040a7; --u1: #a353ba; --u2: #b968d1; }

/* ---------- строка «Бара» под меню ---------- */

.urlobar { display: flex; height: 19px; }

.urlo {
  flex: none;
  padding: 0 22px 0 6px;
  font: bold 10px/19px var(--font);
  color: #e8edf2;
  white-space: nowrap;
  background: #6f99c6;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.urlo b { color: #fff; font-size: 11px; }

.urlo2 {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  font: 11px/19px var(--font);
  color: var(--link);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(#fcfcfc, #f0f0f0 3px, #ededed 7px, #e1e1e1 8px, #e9e9e9 10px,
    #efefef 12px, #f6f6f6 14px, #fff 17px);
}
.urlo2 img { vertical-align: middle; margin-left: 3px; }

/* ---------- вход ---------- */

#userlink {
  background: #f1f5f9;
  border-top: 1px solid #c5cfdc;
  border-bottom: 1px solid #c5cfdc;
  padding: 2px 1px;
}

#userlink form {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 10px 0 7px;
  background: linear-gradient(#e9e9e9, #ececec 6px, #f2f2f3 12px, #f8f8f8 16px, #fff 22px);
}

#userlink img { vertical-align: middle; }
#userlink .sp { flex: 1; }
#userlink .forgot { margin: 0 4px 0 8px; font-weight: normal; font-size: 11px; }

.field {
  height: 20px;
  padding: 2px 3px;
  border: 1px solid #93a8c6;
  background: #dfe6ef;
  font: 12px/14px var(--font);
  color: var(--link);
}
.field:focus { outline: 1px solid #5c88c8; background: #fff; }

.submit {
  padding: 1px 9px;
  border: 3px double;
  border-color: #c4cccc #acb5b5 #6f7777 #acb5b5;
  background: linear-gradient(#fefefe, #e6ebef);
  font: 12px/16px "Trebuchet MS", Arial, Verdana, sans-serif;
  color: #2b333c;
  cursor: pointer;
}
.submit:hover, .submit:focus {
  border-color: #a0c4e1 #80b3dc #568ebd #80b3dc;
  outline: 0;
}

/* ---------- колонки ---------- */

#cols { display: flex; align-items: flex-start; }

#menusx {
  flex: none;
  width: 166px;
  padding: 5px 0 5px 5px;
  background: #fff;
}

#orange { position: relative; flex: 1; min-width: 0; padding: 10px; }

/* ---------- боковые блоки ---------- */

.sidebox {
  width: 161px;
  margin-bottom: 12px;
  background: #f6f6f6;
  border: 1px solid #d1d1d1;
  border-top: 0;
  border-bottom-color: #cecece;
  border-radius: 0 0 4px 4px;
  padding-bottom: 4px;
}

.sidebox h2 {
  margin: 0 -1px;
  height: 24px;
  padding: 4px 8px 1px;
  font: 12px/18px var(--font-head);
  color: #fff;
  text-shadow: 1px 1px 0 #234376;
  border: 1px solid #3f5c7d;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#436285 0, #6883a7 2px, #6b84a9 4px, #678cb2 8px, #6998c2 12px,
    #79a8cc 16px, #7daace 18px, #77a1c6 22px, #3f5c7d 23px);
}

.sidebox .row {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: #f6f6f6;
}
.sidebox .item {
  display: block;
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 3px 0 0 5px;
  font: 11px/16px Tahoma, var(--font);
  color: #395c8f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebox .item:hover { background: #fff; color: #6e95ce; text-decoration: none; }
.sidebox .row:hover .item { background: #fff; color: #6e95ce; }
.sidebox .item img { width: 16px; height: 16px; margin-right: 4px; vertical-align: -4px; }
.sidebox .item.now { font-weight: bold; }
.sidebox .item .cnt { float: right; padding-right: 6px; color: #8a9bb0; font-size: 10px; }

.sidebox .qm {
  flex: none;
  width: 15px;
  height: 15px;
  align-self: center;
  margin-right: 4px;
  padding: 0;
  border: 1px solid #b9c7d8;
  border-radius: 50%;
  background: #e8edf5;
  font: bold 9px/13px var(--font);
  color: #496c9f;
  cursor: pointer;
}
.sidebox .qm:hover, .sidebox .qm[aria-expanded="true"] { background: #496c9f; color: #fff; }

.sidebox .desc-pop {
  flex: 1 0 100%;
  order: 3;
  margin: 0;
  padding: 0 6px;
  max-height: 0;
  overflow: hidden;
  background: #eef3f9;
  border: 0 solid #c7d5e6;
  border-top-width: 0;
  border-radius: 0 0 3px 3px;
  font: 10px/14px var(--font);
  color: #33475f;
  opacity: 0;
  transition: max-height .15s ease, opacity .15s ease, padding .15s ease, border-width .15s ease;
}
.sidebox .desc-pop.show { max-height: 60px; opacity: 1; padding: 4px 6px; border-top-width: 1px; }
@media (hover: hover) {
  /* Открывается только наведением на саму кнопку «!», не на весь пункт
     меню — иначе на тачскрине лёгкий тап по названию тоже раскрывал бы
     описание, что было лишним. */
  .sidebox .qm:hover ~ .desc-pop { max-height: 60px; opacity: 1; padding: 4px 6px; border-top-width: 1px; }
}

.sidebox .item.dot::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px 0 2px;
  background: url(../img/icons/i-dot.svg) no-repeat;
  vertical-align: -1px;
}

.sb-line {
  margin: 1px 0 0;
  padding: 2px 2px 2px 4px;
  background: #e8edf2;
  font: bold 10px/16px var(--font);
  color: var(--link);
}
.sb-line.b { background: #f1f4f7; }
.sb-text { padding: 3px 6px; font: 10px/15px var(--font); color: #666; }
.sb-text b { color: #333; }
.red { color: #f00; font-weight: bold; }

.sb-note { padding: 5px 7px 3px; font: 10px/15px var(--font); color: #555; }
.sb-note .submit { margin-top: 4px; font-size: 11px; padding: 0 6px; }

/* ---------- панель по центру ---------- */

.box {
  margin-bottom: 10px;
  padding: 10px 10px 8px;
  background: var(--box);
  border-radius: 10px;
}

.box > h2 {
  margin: 0 0 6px;
  height: 26px;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  background: linear-gradient(#e3e3e3, #e6e5e6 6px, #efefee 12px, #f5f5f5 16px, #fbfbfb 20px, #fff 24px);
  font: bold 12px/24px var(--font-head);
  text-align: center;
  color: var(--orange-title);
}

.welcome { text-align: center; padding: 4px 6px 0; }
.welcome .mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 10px;
  padding: 10px 22px 10px 14px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 48%),
    linear-gradient(#5f6d80, #3b4657);
  border: 1px solid #2c3543;
  box-shadow: 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .12);
  font: 28px/1 var(--font-head);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 0 #1f2733;
}
.welcome .mark img { width: 46px; height: 46px; }
.welcome p { font: 12px/1.55 Tahoma, var(--font); color: #222; margin: 0 0 6px; }
.welcome .btns { margin: 10px 0 4px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.welcome .btns .submit { font-size: 12px; padding: 2px 12px; text-decoration: none; display: inline-block; }

/* Общая центровка для .btns где угодно на сайте (форум/артели/библиотека/
   потеряшки и т.д.) — раньше центрировался только вариант внутри .welcome,
   везде остальные кнопки-контейнеры висели прижатыми к левому краю. */
.btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.btns .submit { font-size: 12px; padding: 2px 12px; text-decoration: none; display: inline-block; }

/* ---------- поиск ---------- */

.search { display: flex; gap: 6px; align-items: center; padding: 6px 4px 2px; flex-wrap: wrap; }
.search .field { height: 24px; font-size: 12px; }
.search .field.q { flex: 1; min-width: 160px; }
.search select.field { padding-right: 2px; }
.search .submit { height: 24px; padding-top: 0; padding-bottom: 0; }

/* ---------- вкладки-фильтры ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 -1px 7px;
  position: relative;
  z-index: 1;
}
.tabs a {
  padding: 3px 12px 2px;
  border: 1px solid #c8d0d9;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#fdfdfd, #eef1f5);
  font: 12px/16px var(--font-head);
  color: #555;
}
.tabs a:hover { color: #e46400; text-decoration: none; }
.tabs a.on { background: #fff; color: #e46400; padding-bottom: 3px; }

/* ---------- таблицы в стиле форума (IPB) ---------- */

.ipb {
  margin-bottom: 10px;
  border: 1px solid var(--ipb-line);
  background: #fff;
}

.ipb .maintitle {
  padding: 8px 6px;
  font: bold 11px/15px var(--font);
  color: #fff;
  background: #659fd4 linear-gradient(#6aa3e1 0, #2f5c92 1px, #4071a7 10px, #5084b9 15px, #5c94c9 20px, #659fd4 25px);
}
.ipb .maintitle a { color: #fff; }
.ipb .maintitle .r { float: right; font-weight: normal; }

.ipb table { width: 100%; border-collapse: separate; border-spacing: 1px; }
.ipb th {
  padding: 6px 7px;
  text-align: left;
  font: bold 11px/15px var(--font);
  color: var(--head-text);
  background: #bfd3ee linear-gradient(#88a9da 0, #a5c0e5 8px, #bbd0ec 20px, #bfd3ee 24px);
}
.ipb th.c, .ipb td.c { text-align: center; }
.ipb td { padding: 5px 7px; vertical-align: middle; font: 11px/1.45 var(--font); }
.ipb td.row1 { background: var(--row1); }
.ipb td.row2 { background: var(--row2); }
.ipb td.row3 { background: var(--row3); }
.ipb td.ic { width: 26px; text-align: center; padding: 4px 2px; }
.ipb td.ic img { width: 16px; height: 16px; vertical-align: middle; }

.ipb .ttl { color: #000; font-weight: bold; text-decoration: underline; font-size: 12px; }
.ipb .ttl:hover { color: #465584; }
.ipb .desc { display: block; margin-top: 1px; font-size: 10px; color: #434951; }
.ipb .price { font-weight: bold; color: #1d7813; white-space: nowrap; }
.ipb .price.free { color: #c72c17; }
.ipb .price.wanted { color: #5151cb; font-weight: normal; }
.listing-photo { max-width: 60px; max-height: 60px; display: block; border: 1px solid #cdd9e8; border-radius: 3px; }
.ipb .upd { font-size: 10px; line-height: 1.5; white-space: nowrap; }
.ipb .upd a { color: #000; text-decoration: underline; }

.ipb .catend { height: 12px; background: linear-gradient(#c3d4ec, #b0c6e6); border-top: 1px solid #fff; }

.ipb a.nick, a.nick, span.nick { font-weight: bold; text-decoration: underline; color: #000; }
.nick.ok { color: #008000; }
.nick.mod { color: #ff8c00; }
.nick.adm { color: #5151cb; }
.nick.pink { color: #ee005f; }
.nick.vio { color: #6b0367; }
.tick { width: 12px; height: 12px; vertical-align: -2px; margin-left: 3px; }

/* ---------- посты ленты (как сообщения на форуме) ---------- */

.composer { padding: 8px; background: var(--row1); }
.composer textarea {
  width: 100%;
  height: 54px;
  padding: 3px;
  border: 1px solid #93a8c6;
  background: #fff;
  font: 12px/1.4 var(--font);
  color: #222;
  resize: vertical;
}
.composer .row { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.composer .left { flex: 1; font-size: 10px; color: #434951; }
.composer .left b { color: #c72c17; }

.post { display: grid; grid-template-columns: 148px 1fr; border: 1px solid var(--frame); margin-top: 10px; }
.post .who { grid-row: 1 / 3; padding: 8px 8px; background: var(--row1); font-size: 10px; line-height: 1.6; }
.post .top {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 8px;
  background: #d1dceb;
  color: var(--head-text);
  font-size: 10px;
}
.post .top .no { font-weight: bold; }
.post .body { padding: 8px 10px; background: var(--row3); font: 12px/1.6 var(--font); }
.post .body.is-quote {
  position: relative;
  padding: 10px 14px 10px 34px;
  font: italic 13px/1.6 Georgia, "Times New Roman", serif;
  color: #3a4f6c;
}
.post .body.is-quote::before {
  content: "\201C";
  position: absolute; left: 8px; top: 2px;
  font: bold 30px/1 Georgia, "Times New Roman", serif;
  color: #93a8c6;
}
.post .body.is-quote::after {
  content: "\201D";
  margin-left: 3px;
  font: bold 20px/1 Georgia, "Times New Roman", serif;
  color: #93a8c6;
}
.post .quotetop {
  margin: 0 0 -1px;
  padding: 3px 6px;
  background: #e4eaf2;
  border: 1px solid #b0bfd2;
  border-bottom: 0;
  font: bold 10px/16px var(--font);
  color: #445584;
}
.post .quotemain {
  margin: 0 0 6px;
  padding: 5px 7px;
  background: #fafcfe;
  border: 1px solid #b0bfd2;
  font: 11px/1.5 var(--font);
  color: #465584;
}
.post .who .nick { font-size: 12px; }
.post .who .av {
  display: block; margin: 4px 0;
  width: 60px; height: 60px;
  border: 1px solid #93a8c6;
  background: linear-gradient(#f4f8fc, #d3e0f0);
  font: bold 26px/58px var(--font-head);
  text-align: center;
  color: #5a7fae;
}
.post .who .st { color: #3a4f6c; }
.post .acts { padding: 3px 8px; background: #d1dceb; font-size: 10px; display: flex; gap: 12px; }
.post .acts a { color: var(--head-text); text-decoration: underline; font-weight: normal; white-space: nowrap; }
.post .acts a.fa-goto { margin-left: 16px; }
.post-wrap { grid-column: 2; }

.fa-float-top {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  border-radius: 3px;
}

/* ---------- «Активные участники» ---------- */

.online-count { padding: 2px 4px 6px; font: 12px/1.6 Tahoma, var(--font); }
.online-count b { font-weight: bold; }

.online { width: 100%; border-collapse: separate; border-spacing: 1px; background: #d3d8e1; }
.online th, .online td {
  padding: 3px 6px;
  font: 11px/1.9 Tahoma, var(--font);
  vertical-align: middle;
}
.online th { width: 20%; text-align: center; font-weight: normal; background: #f1f5f8; }
.online tr.alt th { background: #f9fbfc; }
.online td {
  text-align: left;
  background: linear-gradient(#f3f7fa, #f8fafc 1px, #fdfdfe 2px, #fff 3px);
}
.online td a { font-weight: bold; }
.online tr.more td {
  background: #e8edf2;
  text-align: right;
  font: bold 10px/1.9 var(--font);
  color: var(--link);
}
.simplelink { font-size: 11px; font-weight: normal; color: #005cb1; border-bottom: 1px dotted #a8bddd; margin-left: 4px; }
.simplelink:hover { color: #b42000; border-bottom-style: solid; text-decoration: none; }

/* ---------- хлебные крошки ---------- */

.crumbs {
  margin: 0 0 8px 7px;
  font: 10px/1.6 var(--font);
  color: #777;
}
.crumbs a { font-weight: normal; }
.crumbs .here { color: #444; }

.hint { margin: 4px 0 0; font: 10px/1.5 var(--font); color: #666; }

/* ---------- К’Артель: категории и рейтинг в сайдбаре ---------- */

.sb-rank { padding: 2px 6px 5px; font: 11px/1.9 Tahoma, var(--font); }
.sb-rank li { list-style: none; display: flex; gap: 6px; }
.sb-rank .n { flex: none; width: 14px; color: #9aa3a6; font-weight: bold; text-align: right; }
.sb-rank .d { flex: none; margin-left: auto; font-size: 10px; color: #1d7813; }

/* ---------- шапка артели ---------- */

.artel-head { display: flex; gap: 14px; align-items: center; padding: 4px 4px 2px; flex-wrap: wrap; }
.artel-head .crest {
  flex: none;
  width: 64px; height: 64px;
  padding: 10px;
  background: linear-gradient(#f4f8fc, #dde8f4);
  border: 1px solid #9fb9d7;
  border-radius: 8px;
}
.artel-head .crest img { width: 100%; height: 100%; }
.artel-head .txt { flex: 1; min-width: 200px; }
.artel-head h1 { margin: 0 0 3px; font: bold 18px/1.3 var(--font-head); color: #2c4568; }
.artel-head p { margin: 0 0 6px; font: 12px/1.5 Tahoma, var(--font); color: #444; }
.artel-head .tag {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 1px 8px;
  border-radius: 9px;
  background: #e8edf2;
  font: 10px/1.7 var(--font);
  color: #496c9f;
}
.artel-head .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- выборы главаря ---------- */

.leader-now {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  margin-bottom: 8px;
  background: var(--row1);
  border: 1px solid #d7e2ee;
}
.leader-now .av {
  flex: none; width: 34px; height: 34px;
  border: 1px solid #93a8c6;
  background: linear-gradient(#f4f8fc, #d3e0f0);
  font: bold 15px/32px var(--font-head);
  text-align: center; color: #5a7fae;
}
.leader-now .t { font: 11px/1.5 var(--font); color: #444; }

.vote-row { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; font: 11px/1.4 var(--font); }
.vote-row .name { flex: none; width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-row.wide .name { width: 168px; }
.vote-row .bar { flex: 1; height: 12px; background: #e6e9ed; border: 1px solid #ccd2d9; }
.vote-row .bar > i { display: block; height: 100%; background: linear-gradient(#8fb7e8, #5c94c9); }
.vote-row.yn .bar > i { background: linear-gradient(#8fd0a0, #57ab6f); }
.vote-row .pc { flex: none; width: 34px; text-align: right; color: #496c9f; font-weight: bold; }

.vote-stage {
  margin: 10px 0 4px;
  padding: 3px 6px;
  background: #eef3f9;
  border-left: 3px solid #6f99c6;
  font: bold 11px/18px var(--font);
  color: #3a4f6c;
}

.rules-note {
  margin-top: 8px;
  padding: 6px 8px;
  background: #f7f7f5;
  border: 1px dashed #d6d6d2;
  font: 10px/1.6 var(--font);
  color: #666;
}

/* ---------- состав артели ---------- */

.roster { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 2px; }
.roster .m { width: 84px; text-align: center; font: 10px/1.4 var(--font); }
.roster .m .av {
  display: block;
  width: 48px; height: 48px;
  margin: 0 auto 3px;
  border: 1px solid #93a8c6;
  background: linear-gradient(#f4f8fc, #d3e0f0);
  background-size: cover; background-position: center;
  font: bold 19px/46px var(--font-head);
  text-align: center;
  color: #5a7fae;
  position: relative;
}
.roster .m .crown { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; }
.roster .m .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster .m .role { display: block; font-size: 9px; color: #8a9bb0; }

/* ---------- «солнышко» активности — круг в углу шапки ---------- */
/* Круг стоит на месте, где ребёнок рисует солнце в углу листа. Центр сдвинут
   немного внутрь страницы (не строго в угол), поэтому видно чуть больше
   четверти, и никакой рамки-клипа нет — лишнее просто уходит за край экрана
   естественно (body с overflow-x:hidden прячет горизонтальный хвост, верх
   уходит выше видимой страницы сам по себе). Лучи — дни, длина и оттенок
   луча (от светло-серого к чёрному) — активность сайта в этот день, по
   мотивам чёрно-белого «кольца движения» из фирстиля Московского Политеха
   (2016) — не копия их лого, просто та же идея. Луч сегодняшнего дня —
   акцентный оранжевый. Тянешь по дуге — крутится дата. */

html, body { overflow-x: hidden; }

/* Полоса активности — во всю ширину шапки (только на главной, см. .logo-wb
   выше), под логотипом. Листаешь месяцы/годы — сайту жить год и больше,
   скользящее окно в N последних дней через год сделало бы старую историю
   недостижимой, поэтому вместо этого — настоящая навигация по месяцам и
   годам, один месяц на экране за раз, как в календаре Wayback Machine. */
.wb-widget {
  position: absolute;
  top: 95px;
  left: 14px;
  right: 14px;
  background: #fff;
  border: 1px solid #9fb1c4;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  font: 11px var(--font);
  z-index: 20;
  user-select: none;
  outline: none;
}
.wb-widget:focus-visible { outline: 2px solid #f2b632; outline-offset: 1px; }

.wb-top {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background: #eef3f9;
  border-bottom: 1px solid #d7e2ee;
  border-radius: 3px 3px 0 0;
}
.wb-months { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; }
.wb-months a {
  color: #345f96;
  font-weight: bold;
  font-size: 10px;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.wb-months a:hover { text-decoration: underline; }
.wb-months a.on { background: #ffe680; color: #6b5700; }
.wb-months a.disabled { color: #b7c3d4; pointer-events: none; }

.wb-scale { display: flex; gap: 2px; margin-left: auto; flex: none; padding-left: 8px; }
.wb-scale a {
  color: #345f96;
  font-weight: bold;
  font-size: 10px;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.wb-scale a:hover { text-decoration: underline; }
.wb-scale a.on { background: #ffe680; color: #6b5700; }

/* Столбик есть у КАЖДОГО дня текущего месяца и не исчезает: у пустого дня
   минимальная высота 2px, у активного пропорционально выше. Дни вне
   реального возраста сайта (до его "рождения") или в будущем — не
   кликабельны и приглушены, но остаются на месте, чтобы сетка месяца не
   "прыгала". Ширина столбика фиксированная (не тянется на всю ширину),
   иначе на широкой шапке при малом числе дней получались бы гигантские
   плашки вместо гистограммы. */
.wb-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 40px;
  padding: 4px 8px 0;
  background: #fbfcfc;
  border-bottom: 1px solid #e4e9ef;
}
.wb-slot {
  flex: 0 1 18px;
  max-width: 18px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.wb-slot.selected { background: rgba(255, 197, 0, .35); }
.wb-slot.outside { cursor: default; }
.wb-bar { width: 8px; min-width: 8px; background: #2a2a2a; transition: background .1s; }
.wb-slot:hover:not(.outside) .wb-bar { background: #555; }
.wb-slot.empty .wb-bar { background: #dcdcdc; }
.wb-slot.outside .wb-bar { background: #eef0f2; }
.wb-slot.selected .wb-bar { background: #d95f05; }

.wb-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
}
.wb-daynav, .wb-yearnav { display: flex; align-items: center; gap: 6px; }
.wb-arrow {
  border: none;
  background: transparent;
  color: #345f96;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.wb-arrow:hover { background: #eef3f9; }
.wb-arrow:disabled { color: #c3cddb; cursor: default; background: none; }
.wb-daynum {
  font: bold 20px/1 var(--font-head);
  color: #2c4568;
  transition: opacity .12s;
  min-width: 48px;
  text-align: center;
}
.wb-daynum.flash { opacity: .25; }
.wb-datesub { font: 10px var(--font); color: #7c8aa0; min-width: 44px; text-align: center; }
.wb-year { font: bold 13px/1 var(--font-head); color: #2c4568; min-width: 34px; text-align: center; }
.wb-today {
  flex: none;
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid #9fb1c4;
  border-radius: 3px;
  background: #fff;
  color: #345f96;
  cursor: pointer;
}
.wb-today:hover { background: #f2f6fb; }

.ring-pop[hidden] { display: none; } /* [hidden] и .ring-pop{display:flex} ниже — одна специфичность, без этого правила атрибут hidden не действует */
.ring-pop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #9fb9d7;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, .2);
  font: 10px/1.55 var(--font);
  color: #333;
  text-align: left;
  z-index: 21;
  transform-origin: top;
  transition: max-height .22s ease, opacity .18s ease, transform .22s ease;
  overflow: hidden;
}
/* Сворачивание вверх перед hidden — иначе пропадает рывком. */
.ring-pop.closing { max-height: 0; opacity: 0; transform: scaleY(.85); border-width: 0; }
/* Список дня — единственная прокручиваемая часть; кнопка «Скрыть» вынесена
   из неё отдельным флекс-элементом ниже, чтобы не уезжать за прокрутку
   длинного списка и быть доступной без домотки до конца. */
.ring-pop-body { overflow-y: auto; padding: 7px 9px; flex: 1 1 auto; min-height: 0; }
.ring-pop .pop-close {
  flex: none;
  display: block;
  margin: 0;
  padding: 3px 9px;
  border-top: 1px dashed #e4e9ef;
  color: #8a9bb0;
  font-size: 9px;
  text-align: center;
  cursor: pointer;
  background: #fff;
}
.ring-pop .pop-close:hover { color: #2c4568; }
.ring-pop b { display: block; margin-bottom: 2px; color: #2c4568; font-size: 11px; }
.ring-pop a.day-item { display: block; padding: 2px 0; color: #333; text-decoration: none; border-top: 1px dashed #e4e9ef; }
.ring-pop a.day-item:first-of-type { border-top: 0; }
.ring-pop a.day-item:hover { color: #2c4568; text-decoration: underline; }
.ring-pop a.day-item .cat { display: block; color: #8a9bb0; font-size: 9px; }

@media (max-width: 700px) {
  .wb-bottom { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
  .logo.logo-wb { height: 250px; }
  .wb-widget { top: 90px; left: 8px; right: 8px; }
  .wb-slot { flex-basis: 14px; max-width: 14px; }
  .wb-bar { width: 6px; min-width: 6px; }
  .wb-daynum { font-size: 16px; }
  .wb-months a { font-size: 9px; padding: 2px 4px; }
}

/* ---------- подвал ---------- */

.foot {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 13px 18px;
  text-align: center;
  font: 10px/1.6 var(--font);
  color: #666;
}
.foot a { font-weight: normal; text-decoration: underline; }

/* ---------- узкие экраны ---------- */

/* ---------- сегмент-переключатель (Открыто/Скрыто, фильтры) ---------- */

.seg { display: inline-flex; border: 1px solid #9fb9d7; border-radius: 3px; overflow: hidden; }
.seg button {
  padding: 4px 10px;
  border: 0;
  border-right: 1px solid #9fb9d7;
  background: #eef3f9;
  font: 11px/16px var(--font);
  color: #496c9f;
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button.on { background: #496c9f; color: #fff; font-weight: bold; }
.seg button:hover:not(.on) { background: #dbe7f4; }

/* ---------- профиль ---------- */

.profile-head { display: flex; gap: 14px; align-items: flex-start; padding: 4px 4px 2px; flex-wrap: wrap; }
.profile-head .av {
  flex: none;
  width: 74px; height: 74px;
  border: 1px solid #93a8c6;
  background: linear-gradient(#f4f8fc, #d3e0f0);
  font: bold 30px/72px var(--font-head);
  text-align: center;
  color: #5a7fae;
}
.profile-head .txt { flex: 1; min-width: 200px; }
.profile-head h1 { display: inline-block; margin: 0 6px 4px 0; font: bold 18px/1.3 var(--font-head); color: #2c4568; }
.profile-head .quote { margin: 0 0 8px; font: italic 12px/1.5 Georgia, "Times New Roman", serif; color: #666; }
.profile-head .stats { font: 11px/1.8 var(--font); color: #444; }
.profile-head .stats b { color: #222; }

.p-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 2px;
  border-top: 1px dashed #e0e0da;
}
.p-row:first-of-type { border-top: 0; }
.p-row .lbl { flex: none; width: 128px; font: bold 11px/16px var(--font); color: #3a4f6c; }
.p-row .val { flex: 1; min-width: 160px; font: 11px/16px var(--font); color: #444; }
.p-hist { margin: 6px 0 0 138px; padding: 6px 8px; background: var(--row3); border: 1px dashed #d6d6d2; font: 10px/1.7 var(--font); color: #555; }
.p-hist.hidden-now { display: none; }

.p-photos { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 2px; }
.p-photos figure { width: 108px; margin: 0; }
.p-photos .ph {
  width: 108px; height: 108px;
  border: 1px solid #93a8c6;
  background: linear-gradient(135deg, #eef3f9, #cfe0f0);
  cursor: pointer;
}
.p-photos figcaption { margin-top: 3px; font: 10px/1.4 var(--font); color: #555; text-align: center; }

/* ---------- лайтбокс (увеличенный просмотр фото) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 14, 20, .88);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 90vw;
  max-height: 86vh;
  border: 2px solid #334;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .65);
}
.lightbox button {
  position: absolute;
  background: rgba(20, 24, 32, .55);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.lightbox button:hover { background: rgba(40, 46, 58, .8); }
.lb-close {
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
}
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
}
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-count {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font: 11px/1.4 var(--font);
  background: rgba(20, 24, 32, .55);
  padding: 3px 10px;
  border-radius: 10px;
}
.lb-caption {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  color: #fff;
  font: 12px/1.4 var(--font);
  background: rgba(20, 24, 32, .6);
  padding: 4px 12px;
  border-radius: 10px;
  text-align: center;
}

/* ---------- знакомства ---------- */

.match-card { display: flex; gap: 10px; padding: 9px; border-top: 1px solid #fff; background: var(--row1); }
.match-card + .match-card { border-top: 1px dashed #d9e3ef; }
.match-card .ph {
  flex: none;
  width: 64px; height: 64px;
  border: 1px solid #93a8c6;
  background: linear-gradient(135deg, #eef3f9, #cfe0f0);
  font: bold 24px/62px var(--font-head);
  text-align: center;
  color: #5a7fae;
}
.match-card .body { flex: 1; min-width: 0; }
.match-card .name { font: bold 12px/1.4 var(--font-head); color: #2c4568; }
.match-card .bio { margin: 2px 0 6px; font: 11px/1.5 var(--font); color: #444; }
.match-card .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.match-card .acts .submit { padding: 1px 8px; font-size: 11px; }
.match-card .acts a { font-size: 10px; margin-left: 4px; }

.chatbox { border: 1px solid #9fb9d7; background: #fff; }
.chatbox .log { padding: 8px; min-height: 90px; font: 11px/1.7 var(--font); }
.chatbox .log .them { color: #333; }
.chatbox .log .me { color: #1d7813; text-align: right; }
.chatbox .row2 { display: flex; gap: 6px; padding: 6px; border-top: 1px solid #e3e9f0; background: var(--row3); }
.chatbox .row2 .field { flex: 1; height: 24px; font-size: 12px; }
.chatbox .log .msg-photo { display: block; max-width: 220px; max-height: 220px; margin-top: 3px; border: 1px solid #cdd9e8; border-radius: 3px; cursor: zoom-in; }
.chatbox .log .me .msg-photo { margin-left: auto; }
.chatbox .log .msg-av {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%; overflow: hidden;
  vertical-align: -3px; margin-right: 4px;
  background-color: #c7d3e0; background-size: cover; background-position: center;
  font: bold 9px/16px var(--font); text-align: center; color: #5a6b82;
}
.chatbox .log a { color: inherit; text-decoration: underline; }
.msg-mail { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }

/* "прочитано" в группах — аватарки прочитавших под последним сообщением */
.read-by { position: relative; display: flex; align-items: center; gap: 4px; margin: 4px 0 0 2px; }
.read-by .msg-av { width: 14px; height: 14px; margin-right: -6px; border: 1px solid #fff; }
.read-by .msg-av:last-of-type { margin-right: 0; }
.read-by-label { font-size: 9px; color: #8a9bb0; margin-left: 4px; }
.read-by-more {
  font-size: 9px; color: #345f96; text-decoration: underline; cursor: pointer;
  margin-left: 2px; background: none; border: 0; padding: 0; font-family: inherit;
}
.read-by-list {
  position: absolute; z-index: 60; background: #fff; border: 1px solid #9fb9d7; border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18); padding: 6px 8px; font: 11px/1.8 var(--font);
  min-width: 140px;
}
.read-by-list div { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ---------- подсказки ников (messages.js) ---------- */
.nick-ac-wrap { position: relative; display: inline-block; }
.nick-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
  background: #fff; border: 1px solid #9fb9d7; border-top: 0;
  max-height: 170px; overflow-y: auto;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}
.nick-suggest a {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  font: 11px var(--font); color: inherit; text-decoration: none;
}
.nick-suggest a:hover, .nick-suggest a.active { background: #eef3f9; }

/* ---------- подсветка ответа, на который пришли по ссылке (forum-topic.js) ---------- */
/* .post — grid-контейнер, дочерние ячейки сами красят фон, поэтому подсветка
   через рамку/тень вокруг всей карточки, а не background на самом .post. */
.post.flash-target, .p-photos figure.flash-target .ph, .comment-row.flash-target { animation: postFlash 2s ease; }
@keyframes postFlash {
  0% { box-shadow: 0 0 0 3px #ffd84d; }
  100% { box-shadow: 0 0 0 3px rgba(255, 216, 77, 0); }
}

.emoji-pop {
  position: absolute; bottom: 34px; left: 6px; z-index: 50;
  display: none; grid-template-columns: repeat(8, 22px); gap: 2px;
  background: #fff; border: 1px solid #9fb9d7; border-radius: 3px; padding: 6px;
  box-shadow: 2px 2px 6px rgba(0,0,0,.25);
}
.emoji-pop.show { display: grid; }
.emoji-pop button { border: none; background: none; font-size: 16px; line-height: 22px; cursor: pointer; border-radius: 3px; padding: 0; }
.emoji-pop button:hover { background: #eef3fb; }

/* ---------- админ-панель ---------- */

.queue-card { display: flex; gap: 10px; padding: 9px; border-top: 1px solid #fff; background: var(--row1); }
.queue-card + .queue-card { border-top: 1px dashed #d9e3ef; }
.queue-card .ph {
  flex: none;
  width: 96px; height: 72px;
  border: 1px solid #93a8c6;
  background: #eef3f9 center/cover no-repeat;
}
.queue-card .body { flex: 1; min-width: 0; }
.queue-card .name { font: bold 12px/1.4 var(--font-head); color: #2c4568; }
.queue-card .meta { margin: 2px 0 6px; font: 10px/1.5 var(--font); color: #666; }
.queue-card .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.queue-card .acts .submit { padding: 1px 8px; font-size: 11px; }

.mrow { cursor: pointer; }
.mrow:hover td { background: #eef3f9 !important; }

.mdetail-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mdetail-photos figure { width: 90px; margin: 0; }
.mdetail-photos .ph { width: 90px; height: 90px; border: 1px solid #93a8c6; background: #eef3f9 center/cover no-repeat; }
.mdetail-photos figcaption { font: 10px/1.4 var(--font); color: #555; text-align: center; }

/* ---------- личные сообщения ---------- */

.pm-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  font: bold 11px/16px var(--font);
  color: #40597f;
}
.pm-link img { width: 15px; height: 15px; }
.pm-link .badge, .match-card .name .badge {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 8px;
  background: #d9534f;
  color: #fff;
  font: bold 9px/15px var(--font);
  text-align: center;
}

.match-card.unread { background: #eef3fb; }
.match-card .name .badge { margin-left: 5px; }
.match-card .time { flex: none; font: 10px/1.4 var(--font); color: #8a9bb0; }

.pm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--row2);
  border: 1px solid #9fb9d7;
  border-bottom: 0;
}
.pm-head .nm { font: bold 12px/1.4 var(--font-head); color: #2c4568; }
.pm-head .sp2 { flex: 1; }
.pm-head a.danger { font: 10px/16px var(--font); color: #b23e00; text-decoration: underline; }
.pm-head a.danger:hover { color: #7a2900; }
.pm-blocked-note { padding: 6px 8px; background: #fdf2f0; border: 1px solid #e6b8ae; color: #8a3a24; font: 10px/1.6 var(--font); }

/* ---------- сообщения: два окна рядом, как в ВК/Телеграме, а не подряд списком ---------- */
.pm-chat-shell { display: flex; gap: 10px; min-height: 380px; }
.pm-list-pane {
  flex: 0 0 230px;
  display: flex; flex-direction: column;
  border: 1px solid #9fb9d7;
  background: #fff;
  min-height: 0;
}
.pm-list-head { padding: 6px 8px; background: var(--row2); border-bottom: 1px solid #9fb9d7; font: bold 11px/1.4 var(--font-head); color: #2c4568; }
.pm-list-scroll { flex: 1; overflow-y: auto; max-height: 460px; }
.pm-list-scroll .match-card { cursor: pointer; }
.pm-list-scroll .match-card.active { background: #dbe7f4; }
.pm-dialog-pane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  border: 1px solid #9fb9d7;
  background: #fff;
}
.pm-dialog-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #8a9bb0; font: 11px/1.6 var(--font); }
#dialogInner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#dialogInner .chatbox { flex: 1; display: flex; flex-direction: column; min-height: 0; border: 0; }
#dialogInner .chatbox .log { flex: 1; overflow-y: auto; }
.pm-back-btn { display: none; font: 11px/1.4 var(--font); color: #395c8f; text-decoration: none; margin-right: 4px; }
.pm-back-btn:hover { text-decoration: underline; }
/* display:flex выше перебивает атрибут hidden — без этого заглушка и окно
   диалога показывались одновременно. */
.pm-dialog-empty[hidden], #dialogInner[hidden], .pm-group-form[hidden], .pm-group-panel[hidden] { display: none; }

/* ---------- группы в сообщениях ---------- */
.pm-list-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pm-new-group { padding: 0 7px; font-size: 10px; }
.match-card .ph.grp { background: #e5f0e1; color: #2f6b22; }
.pm-group-form { display: flex; flex-direction: column; }
.pm-group-form .p-row { padding: 6px 8px; }
.pm-friend-pick { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 11px/1.6 var(--font); }
.pm-friend-pick label { cursor: pointer; white-space: nowrap; }
.pm-group-panel { border-bottom: 1px solid #e3e9f0; background: var(--row3); font: 11px/1.6 var(--font); }
.pm-group-panel .p-row { padding: 4px 8px; }
.pm-member { display: inline-block; margin: 2px 10px 2px 8px; }
.pm-member .own { color: #8a9bb0; font-size: 10px; }
.pm-member a.rm { color: #b23e00; font-size: 10px; margin-left: 3px; }
.chatbox .log .who { color: #2c4568; }
.pm-mute-link { font-size: 10px; margin-left: 6px; color: #395c8f; text-decoration: none; }
.pm-mute-link:hover { text-decoration: underline; }
.match-card .name .muted-ico { opacity: .55; margin-left: 3px; }

/* ---------- выбор звука уведомлений (Настройки) ---------- */
.sound-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.sound-pick button {
  padding: 3px 10px;
  border: 2px solid #9fb9d7;
  border-radius: 3px;
  background: #fff;
  font: 11px/1.6 var(--font);
  color: #2c4568;
  cursor: pointer;
}
.sound-pick button:hover { background: var(--row2); }
.sound-pick button.on { background: #2c4568; border-color: #2c4568; color: #fff; }

@media (max-width: 480px) {
  .pm-chat-shell:not(.dialog-open) .pm-dialog-pane { display: none; }
  .pm-chat-shell.dialog-open .pm-list-pane { display: none; }
  .pm-back-btn { display: inline; }
}

/* ---------- рекламный поп-ап (в духе баннеров нулевых) ---------- */

.ad-popup {
  position: fixed;
  opacity: 0;
  z-index: 90;
  width: 260px;
  background: #fff;
  border: 1px solid #7c7c7c;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .35);
  /* лёгкий "перелёт" на появлении — живее плоского ease, на закрытии просто гасим */
  transition: top .45s cubic-bezier(.34, 1.35, .64, 1), bottom .45s cubic-bezier(.34, 1.35, .64, 1), opacity .3s ease;
}
/* Углы экрана — прячем сдвигом за край с большим запасом (высота
   объявления в базе ограничена 800px, db/schema_v21.sql, -900px хватает
   при любом допустимом размере), .show возвращает на отступ 16px. */
.ad-popup.show { opacity: 1; }
.ad-popup.corner-bottom-right { right: 16px; bottom: -900px; }
.ad-popup.corner-bottom-right.show { bottom: 16px; }
.ad-popup.corner-bottom-left { left: 16px; bottom: -900px; }
.ad-popup.corner-bottom-left.show { bottom: 16px; }
.ad-popup.corner-top-right { right: 16px; top: -900px; }
.ad-popup.corner-top-right.show { top: 16px; }
.ad-popup.corner-top-left { left: 16px; top: -900px; }
.ad-popup.corner-top-left.show { top: 16px; }

.ad-popup .titlebar {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 4px 0 8px;
  background: linear-gradient(#7fa8d9, #3d6aa8);
  font: bold 11px/22px var(--font);
  color: #fff;
}
.ad-popup .titlebar span { flex: 1; }
.ad-popup .titlebar button {
  flex: none;
  width: 17px; height: 17px;
  border: 1px solid #fff;
  border-radius: 2px;
  background: #d9534f;
  color: #fff;
  font: bold 11px/1 var(--font);
  cursor: pointer;
  line-height: 15px;
}
.ad-popup .titlebar button:hover { background: #b93b37; }

.ad-popup .adslot {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px 10px;
  background: repeating-linear-gradient(45deg, #fdf8e9, #fdf8e9 10px, #faf2d8 10px, #faf2d8 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity .3s ease;
}
.ad-popup .adslot.fading { opacity: 0; }
.ad-popup .adslot img { display: block; width: 100%; }
.adslot-tag {
  position: absolute;
  top: 3px; left: 6px;
  font: 9px/1 var(--font);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #a89a6a;
}
.ad-popup .adslot p {
  margin: 4px 0 0;
  font: bold 12px/1.5 var(--font-head);
  color: #7a6a34;
}
.ad-popup .adslot a { color: #7a6a34; text-decoration: underline; }

@media (max-width: 480px) {
  /* На узких экранах реклама не должна перекрывать сайдбар целиком, даже
     если админ в панели поставил высоту побольше — жёстко ограничиваем
     видимую высоту (!important против инлайновых width/height из
     js/ad-popup.js), лишнее у фото просто обрежется object-fit'ом. */
  .ad-popup { width: 210px !important; max-height: 170px; overflow: hidden; }
  .ad-popup.corner-bottom-right, .ad-popup.corner-top-right { right: 8px; }
  .ad-popup.corner-bottom-left, .ad-popup.corner-top-left { left: 8px; }
  .ad-popup .adslot { max-height: 148px !important; height: auto !important; }
  .ad-popup .adslot img { max-height: 110px !important; object-fit: cover; }
}

/* ---------- шумомер (Библиотека, js/noise-monitor.js) ---------- */

#noiseOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#noiseOverlay.level-mid {
  opacity: 1;
  animation: noisePulseYellow 1.1s ease-in-out infinite;
}
#noiseOverlay.level-loud {
  opacity: 1;
  animation: noisePulseRed .6s ease-in-out infinite;
}
@keyframes noisePulseYellow {
  0%, 100% { box-shadow: inset 0 0 40px 8px rgba(245, 197, 28, .35); }
  50% { box-shadow: inset 0 0 110px 30px rgba(245, 197, 28, .8); }
}
@keyframes noisePulseRed {
  0%, 100% { background: rgba(199, 44, 23, .2); }
  50% { background: rgba(199, 44, 23, .55); }
}
#noiseOverlay .noise-msg-mid {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  background: #f5c51c;
  color: #4a3900;
  font: bold 13px/1.4 var(--font);
  padding: 6px 18px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
}
#noiseOverlay.level-mid .noise-msg-mid { opacity: 1; }
#noiseOverlay .noise-msg-loud {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font: 900 50px/1.1 var(--font-head, var(--font));
  color: #e8362a;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 18px rgba(0,0,0,.5);
  letter-spacing: 2px;
  text-align: center;
  opacity: 0;
  transition: opacity .15s ease;
}
#noiseOverlay.level-loud .noise-msg-loud { opacity: 1; }
@media (max-width: 480px) {
  #noiseOverlay .noise-msg-loud { font-size: 34px; padding: 0 12px; }
}

/* ---------- превью размера рекламы в админке ---------- */
.ad-preview-screens { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; margin: 4px 0; }
.ad-preview-frame { text-align: center; }
.ad-preview-frame .lbl2 { font: 10px var(--font); color: #8a9bb0; margin-bottom: 4px; }
.ad-preview-screen {
  position: relative;
  background: #e8ecf1;
  border: 2px solid #9fb1c4;
  border-radius: 4px;
  overflow: hidden;
}
.ad-preview-frame.desktop .ad-preview-screen { width: 240px; height: 150px; }
.ad-preview-frame.mobile .ad-preview-screen { width: 90px; height: 195px; border-radius: 12px; }
.ad-preview-box {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: #d9534f;
  opacity: .8;
  border: 1px solid #7c7c7c;
}

/* ---------- превью заявки на рекламу в очереди на рассмотрение — не
   просто размер, а то же оформление, что и у настоящего поп-апа ---------- */
.ad-review-box {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: repeating-linear-gradient(45deg, #fdf8e9, #fdf8e9 6px, #faf2d8 6px, #faf2d8 12px);
  border: 1px solid #7c7c7c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.ad-review-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-review-box .tag {
  position: absolute;
  top: 1px; left: 2px;
  font: 5px/1 var(--font);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #a89a6a;
}
.ad-review-box .txt {
  font: bold 7px/1.25 var(--font-head);
  color: #7a6a34;
  padding: 3px 4px 0;
  overflow: hidden;
}

@media (max-width: 860px) {
  body { margin: 0; }
  #wrap { padding: 0; background: none; }
  #frame { border-left: 0; border-right: 0; }
  #cols { flex-direction: column; }
  #menusx { width: 100%; padding: 5px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
  .sidebox { width: 100%; }
  .navigatore { overflow-x: auto; white-space: nowrap; text-align: left; }
  #orange { width: 100%; padding: 6px; }
  #userlink form { flex-wrap: wrap; row-gap: 4px; padding: 3px 6px; }
  #userlink .sp { display: none; }
  /* Раньше почта, пароль и кнопки "Вход"/"Регистрация" шли одной строкой
     без переноса (inline-стиль display:flex без wrap на #authGuestFields
     в HTML) — на телефоне они просто вылезали за край экрана, кнопки
     было не достать без поворота в альбомную ориентацию. */
  #authGuestFields { flex-wrap: wrap; row-gap: 6px; width: 100%; }
  #authGuestFields #authEmail, #authGuestFields #authPass { flex: 1 1 140px; width: auto !important; min-width: 0; }
  #authGuestFields .submit { flex: 1 1 auto; }
  .post { grid-template-columns: 1fr; }
  .post .who { grid-row: auto; display: flex; gap: 10px; align-items: center; }
  .post .who .av { margin: 0; width: 44px; height: 44px; font-size: 20px; line-height: 42px; }
  .post-wrap { grid-column: auto; }
  .ipb .hide-m { display: none; }
  .online th { width: 28%; }
}

/* ---------- всплывающая мини-форма жалобы (js/report.js) ---------- */
.report-pop {
  position: absolute;
  z-index: 300;
  width: 230px;
  background: #fff;
  border: 1px solid #9fb9d7;
  border-radius: 3px;
  padding: 8px;
  font: 11px/1.5 var(--font);
  box-shadow: 2px 2px 8px rgba(0,0,0,.3);
}
.report-pop b { display: block; margin-bottom: 4px; color: #2c4568; }
.report-pop textarea { width: 100%; height: 50px; font: 11px var(--font); resize: vertical; }
.report-pop .rp-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }

/* ---------- свой попап подтверждения (js/confirm-dialog.js) ---------- */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(20, 26, 36, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.confirm-box {
  width: 100%; max-width: 280px;
  background: #fff; border: 1px solid var(--frame); border-radius: 3px;
  padding: 14px 14px 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.confirm-box p { margin: 0 0 12px; font: 12px/1.5 var(--font); color: var(--ink); }
.confirm-row { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-row .confirm-yes { color: #b23e00; font-weight: bold; }

/* ---------- всплывающие уведомления (js/notify-toast.js) ---------- */
#pkToastHost {
  position: fixed; right: 10px; bottom: 10px; z-index: 550;
  display: flex; flex-direction: column-reverse; gap: 6px;
  width: 270px; max-width: calc(100vw - 20px);
  pointer-events: none;
}
.pk-toast {
  pointer-events: auto; position: relative;
  background: #fff; border: 1px solid #9fb9d7; border-radius: 3px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .2);
  padding: 8px 24px 8px 8px;
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .2s ease, transform .2s ease;
}
.pk-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.pk-toast-main { display: flex; align-items: flex-start; gap: 7px; cursor: pointer; }
.pk-toast-av {
  flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  background-color: #c7d3e0; background-size: cover; background-position: center;
  font: bold 12px/26px var(--font-head); text-align: center; color: #5a6b82;
}
.pk-toast-ic { background-color: #eef3f9; display: flex; align-items: center; justify-content: center; }
.pk-toast-text { font: 11px/1.45 var(--font); color: var(--ink); min-width: 0; }
.pk-toast-text b { display: block; color: #2c4568; }
.pk-toast-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #555; }
.pk-toast-x {
  position: absolute; top: 4px; right: 6px; font-style: normal;
  color: #8a9bb0; cursor: pointer; font-size: 15px; line-height: 1;
}
.pk-toast-x:hover { color: #2c4568; }
.pk-toast-reply { display: flex; gap: 4px; margin-top: 6px; }
.pk-toast-reply input { flex: 1; height: 22px; font-size: 11px; border: 1px solid #c7d3e0; border-radius: 2px; padding: 0 6px; }
.pk-toast-reply button {
  flex: none; width: 24px; height: 22px; border: 1px solid #9fb9d7; border-radius: 2px;
  background: #eef3f9; color: #2c4568; cursor: pointer; font-size: 11px;
}
.pk-toast-reply button:hover { background: #d9e6f5; }
.pk-toast-sent { display: block; margin-top: 4px; color: #1d7813; font: 11px var(--font); }
@media (max-width: 480px) {
  #pkToastHost { left: 10px; right: 10px; width: auto; }
}

/* ---------- оценки (стрелочки → репутация) и комментарии (js/social.js) ---------- */
.vote-widget { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; vertical-align: middle; }
.vote-widget button {
  border: 1px solid #c7d3e0; background: #fff; border-radius: 2px;
  width: 15px; height: 15px; line-height: 13px; font-size: 9px; text-align: center;
  cursor: pointer; padding: 0; color: #8a9bb0;
}
.vote-widget button:hover { background: #eef3fb; color: #2c4568; }
.vote-widget button.active.vote-up { background: #1d7813; border-color: #1d7813; color: #fff; }
.vote-widget button.active.vote-down { background: #b23e00; border-color: #b23e00; color: #fff; }
.vote-widget .vote-score { min-width: 16px; text-align: center; font-weight: bold; color: #2c4568; font-size: 11px; }
@keyframes stampHit { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }
.vote-widget button.just-stamped { animation: stampHit .25s ease-out; }
.comment-thread { margin: 6px 0 2px; padding: 6px 8px; background: #f6f8fb; border: 1px solid #dbe4f0; border-radius: 3px; }
.comment-row { font: 11px/1.6 var(--font); margin: 0 0 4px; }
.comment-compose { display: flex; gap: 6px; margin-top: 4px; }
.comment-compose[hidden] { display: none; }
.comment-compose .field { flex: 1; height: 22px; font-size: 11px; }
.comment-compose .submit { font-size: 10px; padding: 1px 8px; }

/* ---------- подарок ника: эффект на весь экран ---------- */

.gift-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(10, 14, 20, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-fireworks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gift-particle {
  position: absolute;
  bottom: -40px;
  animation-name: giftFly;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes giftFly {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-115vh) rotate(360deg); opacity: 0; }
}
.gift-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 2px solid #f9d24a;
  border-radius: 10px;
  padding: 22px 26px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 34px rgba(0, 0, 0, .45);
  font: 12px/1.5 var(--font);
  color: #333;
}
.gift-card h2 { margin: 0 0 10px; font: bold 18px/1.3 var(--font-head); color: #2c4568; }
.gift-card .gift-nick { font: bold 15px var(--font-head); color: #b23e00; }
.gift-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.gift-actions button { font-size: 11px; }

/* ---------- ожидающие подарки ников в профиле ---------- */

.gift-pending-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: #fff8e0;
  border: 1px solid #f0dca0;
  border-radius: 4px;
  font: 11px/1.5 var(--font);
}