@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=PT+Sans:wght@400;700&display=swap');

* { box-sizing: border-box; }

html, body {
  background: var(--page-bg, #e7e9eb);
  color: var(--text, #34383c);
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

a { color: var(--link, #565d64); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-hover, #23262a); text-decoration: underline; }

#pun_wrap { padding: 24px 10px; }

/* .punbb — общий класс корневого блока на ВСЕХ страницах форума
   (id меняется: #pun-index, #pun-userlist, #pun-search и т.д.) */
.punbb {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--main-bg, #fbfbfc);
  border: 1px solid var(--border, #d7dade);
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06));
  display: flex;
  flex-direction: column;
}

/* ================= БАННЕР ШАПКИ ================= */

/* .header-block — общий фон для шапки и полосы с кнопками,
   чтобы они читались как единая картинка/панель.
   !important — чтобы точно перебить базовые стили движка (extra.css),
   которые иначе могут проглядывать по краям и при наведении. */
#pun-title,
#pun-announcement {
  background: var(--block-bg-alt, #eceeef) !important;
}
#pun-title {
  /* по умолчанию — просто плоский фон, без картинок.
     Чтобы поставить свою картинку баннера, задайте в style_cs.1784652697.css:
     --header-image: url("https://адрес-вашей-картинки.jpg");
     рекомендуемый размер картинки — примерно 1000×160 px, картинка
     тогда растянется на всю площадь шапки (включая полосу с кнопками) */
  background-image: var(--header-image, none) !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 14px 8px;
}
#title-logo-table, #title-logo-tbody, #title-logo-tr, #title-logo-tdl, #title-logo-tdr {
  background: none !important;
}
#title-logo-table { display: block; width: 100%; height: 100%; border-collapse: collapse; }
#title-logo-tbody { display: block; height: 100%; }
#title-logo-tr { display: flex; align-items: center; justify-content: center; height: 100%; }
#title-logo-tdl { display: block; padding: 0; }
/* правая ячейка предназначена движком под рекламный баннер (banner_top) —
   прячем её, чтобы не оставалось пустого места */
#title-logo-tdr { display: none; }

.title-logo {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--heading-text, #2f3236);
  text-align: center;
  background: none !important;
}
.title-logo span { color: inherit; background: none !important; }
/* гасим hover-эффекты из базовых стилей движка (extra.css) — он подключается
   после нашего файла, поэтому одного !important недостаточно, приходится
   перебивать высокой специфичностью селектора */
html body #pun .punbb #pun-title:hover {
  background-color: var(--block-bg-alt, #eceeef) !important;
}
html body #pun .punbb #pun-title:hover *,
html body #pun .punbb #pun-announcement:hover,
html body #pun .punbb #pun-announcement:hover * {
  background-color: var(--block-bg-alt, #eceeef) !important;
  background-image: none !important;
}

/* ================= МЕНЮ НАВИГАЦИИ ================= */

#pun-navlinks {
  background: var(--heading-bg, #dde0e3);
  border-bottom: 1px solid var(--border, #d7dade);
}
#pun-navlinks h2 {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
#pun-navlinks ul.container {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#pun-navlinks li { margin: 0; }
#pun-navlinks a {
  display: block;
  padding: 10px 16px;
  color: var(--heading-text, #2f3236);
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-right: 1px solid var(--border, #d7dade);
}
#pun-navlinks li:last-child a { border-right: none; }
#pun-navlinks a:hover,
#pun-navlinks li.isactive a {
  background: var(--row-hover, #eceff1);
  color: var(--link-hover, #23262a);
  text-decoration: none;
}

/* ================= ПОЛЬЗОВАТЕЛЬСКИЕ ССЫЛКИ ================= */

/* блок целиком скрыт по просьбе — ссылки "Активные темы" и т.п.
   больше не показываются */
/* заголовок «Пользовательские ссылки» скрыт, сам список ссылок виден */
#pun-ulinks {
  background: var(--block-bg, #f3f4f5);
  border-bottom: 1px solid var(--border, #d7dade);
  padding: 8px 14px;
}
#pun-ulinks h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
#pun-ulinks ul.container {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}
#pun-ulinks a { font-size: 12px; color: var(--link, #565d64); }
#pun-ulinks a:hover { color: var(--link-hover, #23262a); }

/* ================= КНОПКИ-ССЫЛКИ (блок «Объявление») =================
   У движка нет способа добавить пункты прямо в «Пользовательские
   ссылки» через CSS/HTML-верх — та часть строится сервером.
   Используем готовое (но по умолчанию пустое) место — блок
   «Объявление» (в коде это <!-- pun_announcement -->) — и с помощью
   order переносим его визуально под шапку, сразу под линией
   у названия форума. Что вставить в поле «Объявление» в админке
   (замените ссылки и текст на свои):

   <div class="html-box">
   <a href="https://ссылка-1"><div class="plash"><span>Buttonname1</span></div></a>
   <a href="https://ссылка-2"><div class="plash"><span>Buttonname2</span></div></a>
   <a href="https://ссылка-3"><div class="plash"><span>Buttonname3</span></div></a>
   </div>
*/
#pun-title { order: -1; }
#pun-announcement {
  order: -1;
  border-bottom: 1px solid var(--border-strong, #c3c8cd);
  padding: 0 14px 14px;
}
#pun-announcement h2 { display: none; }
#pun-announcement .container { border: none; background: none !important; }
#pun-announcement .html-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#pun-announcement a { text-decoration: none; }
#pun-announcement .plash {
  display: inline-block;
  padding: 6px 14px;
  background: var(--btn-bg, #eef0f1);
  border: 1px solid var(--btn-border, #c7cbcf);
  border-radius: 3px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--btn-text, #34383c);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#pun-announcement a:hover .plash {
  background: var(--row-hover, #eceff1);
  border-color: var(--border-strong, #c3c8cd);
  color: var(--link-hover, #23262a);
}
#pun-announcement .plash span { color: inherit; }

/* ================= СТАТУС ПОЛЬЗОВАТЕЛЯ ================= */

#pun-status {
  background: var(--main-bg, #fbfbfc);
  border-bottom: 1px solid var(--border, #d7dade);
  padding: 8px 14px;
  order: -2;
}
#pun-status h2 { display: none; }
#pun-status p.container {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #767b81);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
}
#pun-status strong { color: var(--text, #34383c); }
#pun-status a { color: var(--link, #565d64); }

/* ================= РАЗДЕЛИТЕЛИ / КРОШКИ ================= */

.divider { border: none; margin: 0; }
.divider hr { border: none; border-top: 1px solid var(--border, #d7dade); margin: 0; }

#pun-crumbs1, #pun-crumbs2 {
  background: var(--block-bg, #f3f4f5);
  border-bottom: 1px solid var(--border, #d7dade);
  padding: 8px 14px;
}
.crumbs { font-size: 12px; margin: 0; color: var(--text-muted, #767b81); }
.crumbs strong { color: var(--text, #34383c); }
.crumbs em { font-style: normal; color: var(--text-light, #9aa0a6); margin: 0 2px; }
/* убираем «Вы здесь »» — крошки начинаются сразу с названия форума */
.crumbs > strong:first-child { display: none; }
.crumbs > strong:first-child + em { display: none; }

/* ================= ОСНОВНАЯ ОБЛАСТЬ ================= */

#pun-main { padding: 14px; }
#pun-main > h1 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.category { margin-bottom: 16px; border: 1px solid var(--border, #d7dade); }
.category h2 {
  margin: 0;
  padding: 9px 14px;
  background: var(--heading-bg, #dde0e3);
  border-bottom: 1px solid var(--border-strong, #c3c8cd);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--heading-text, #2f3236);
}
.category h2 span { color: inherit; }

/* заголовок «Тем N страница X из Y» над списком тем — скрываем визуально */
.forum > h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* .acchide — служебный текст движка (в т.ч. номер темы перед названием),
   скрываем визуально, но оставляем для скринридеров */
.acchide {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.category .catleft, .category .catright { display: none; }
.category .container { background: var(--main-bg, #fbfbfc); }

/* ---- квадратики-индикаторы статуса раздела на главной странице ---- */
.category .container tr .tclcon::before {
  content: "";
  order: -1;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  background: var(--row-bg-alt, #f4f5f6);
  border: 1px solid var(--border, #d7dade);
  flex-shrink: 0;
}
.category .container tr.isticky .tclcon::before,
.category .container .icon.isticky ~ .tclcon::before {
  background: var(--heading-bg, #dde0e3);
  border-color: var(--border-strong, #c3c8cd);
}
.category .container tr.inew .tclcon::before,
.category .container .icon.inew ~ .tclcon::before,
.category .container .icon-new ~ .tclcon::before {
  background: var(--accent, #6c757d);
  border-color: var(--accent-dark, #4c5257);
}
.category .container tr.iclosed .tclcon::before,
.category .container .icon.iclosed ~ .tclcon::before,
.category .container .icon-closed ~ .tclcon::before {
  background: var(--main-bg, #fbfbfc);
  border-color: var(--border, #d7dade);
}

/* ================= ТАБЛИЦА СПИСКА ФОРУМОВ/ТЕМ ================= */

table { width: 100%; border-collapse: collapse; }

table thead th {
  background: var(--block-bg, #f3f4f5);
  color: var(--text-muted, #767b81);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong, #c3c8cd);
  text-align: left;
}

table tbody tr { background: var(--row-bg, #fbfbfc); }
table tbody tr:nth-child(even) { background: var(--row-bg-alt, #f4f5f6); }
table tbody tr:hover { background: var(--row-hover, #eceff1); }

table td {
  padding: 10px;
  border-bottom: 1px solid var(--border, #d7dade);
  vertical-align: middle;
  color: var(--text, #34383c);
}

.tcl { text-align: left; }
.tcl .intd { display: flex; align-items: flex-start; gap: 8px; }
.tcl .icon { display: none; }
.tclcon h3 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 600; }
.tclcon h3 a { color: var(--heading-text, #2f3236); }

/* ---- бейджи статуса темы: новая / нет новых / закрыта / важная ---- */
.tclcon { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tclcon::before {
  order: -1;
  display: inline-block;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
/* по умолчанию — тема прочитана, новых сообщений нет */
.forum .container tr .tclcon::before {
  content: "Нет новых";
  background: var(--row-bg-alt, #f4f5f6);
  color: var(--text-light, #9aa0a6);
  border: 1px solid var(--border, #d7dade);
}
/* важная (закреплённая) тема — класс на <tr> */
.forum .container tr.isticky .tclcon::before {
  content: "Важная тема";
  background: var(--heading-bg, #dde0e3);
  color: var(--heading-text, #2f3236);
  border: 1px solid var(--border-strong, #c3c8cd);
}
/* есть новые сообщения — класс может быть и на <tr>, и на иконке .icon */
.forum .container tr.inew .tclcon::before,
.forum .container .icon.inew ~ .tclcon::before,
.forum .container .icon-new ~ .tclcon::before,
.forum .container .icon.new ~ .tclcon::before {
  content: "Новые сообщения";
  background: var(--accent, #6c757d);
  color: #fff;
  border: 1px solid var(--accent-dark, #4c5257);
}
/* тема закрыта */
.forum .container tr.iclosed .tclcon::before,
.forum .container .icon.iclosed ~ .tclcon::before,
.forum .container .icon-closed ~ .tclcon::before {
  content: "Закрыта";
  background: var(--main-bg, #fbfbfc);
  color: var(--text-muted, #767b81);
  border: 1px solid var(--border, #d7dade);
}
.tclcon { font-size: 12px; color: var(--text-muted, #767b81); }

.tc2, .tc3 { text-align: center; color: var(--text-muted, #767b81); font-size: 13px; width: 70px; }

.tcr { text-align: left; font-size: 12px; color: var(--text-muted, #767b81); }
.tcr a { color: var(--link, #565d64); }
.tcr .lastpost-link { display: inline-block; margin-bottom: 2px; }
.tcr .user-avatar { display: inline-block; vertical-align: middle; margin-right: 6px; }
.tcr .avatar-image {
  display: inline-block;
  width: 24px; height: 24px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-strong, #c3c8cd);
  vertical-align: middle;
}

/* ================= СТАТИСТИКА ФОРУМА ================= */

#pun-stats {
  background: var(--main-bg, #fbfbfc);
  border-top: 1px solid var(--border, #d7dade);
  padding: 8px 14px;
}
#pun-stats h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-text, #2f3236);
  margin: 0 0 6px;
}
#pun-stats ul.container { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-muted, #767b81); }
#pun-stats li { margin: 2px 0; }
#pun-stats strong { color: var(--text, #34383c); }
#pun-stats a { color: var(--link, #565d64); }

/* ================= ФУТЕР ================= */

#pun-about {
  background: var(--block-bg, #f3f4f5);
  padding: 8px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--text-light, #9aa0a6);
}
#pun-about a { color: var(--text-muted, #767b81); }

#html-footer { padding: 6px 14px 12px; text-align: center; font-size: 11px; color: var(--text-light, #9aa0a6); }

/* ================= ПОСТЫ (просмотр темы) ================= */

.post {
  border-bottom: 1px solid var(--border, #d7dade);
  background: var(--main-bg, #fbfbfc);
  padding: 10px 14px;
}
.post h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted, #767b81);
}
.post h3 a { color: var(--text-muted, #767b81); }
.post h3 strong { color: var(--text, #34383c); margin: 0 6px; }

.post > .container {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  border: 1px solid var(--border, #d7dade);
}

/* профиль автора — слева, растянут на обе строки правой колонки */
.post-author {
  grid-column: 1;
  grid-row: 1 / 3;
  background: var(--block-bg, #f3f4f5);
  border-right: 1px solid var(--border-strong, #c3c8cd);
  padding: 14px;
}
.post-author ul { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-muted, #767b81); }
.post-author li { margin: 0 0 6px; }
.post-author .pa-author { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; }
.post-author .pa-author a { color: var(--heading-text, #2f3236); }
.post-author .fld-name { color: var(--text-light, #9aa0a6); }
.post-author .flag-i { display: none; }
.post-author .pa-ua { display: none; }

/* текст сообщения — справа сверху */
.post-body {
  grid-column: 2;
  grid-row: 1;
  padding: 14px 16px;
}
.post-content { color: var(--text, #34383c); line-height: 1.7; }
.post-rating { margin-top: 10px; font-size: 11px; color: var(--text-light, #9aa0a6); }
.post-body .clearer { display: none; }

/* кнопки «Профиль / ЛС / Цитировать» и т.д. — справа снизу, отделены линией */
.post-links {
  grid-column: 2;
  grid-row: 2;
  border-top: 1px dashed var(--border, #d7dade);
  background: var(--block-bg, #f3f4f5);
  padding: 8px 16px;
}
.post-links ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.post-links a { font-size: 12px; color: var(--link, #565d64); }
.post-links a:hover { color: var(--link-hover, #23262a); }

blockquote, .quotebox {
  background: var(--quote-bg, #f0f1f2);
  border-left: 3px solid var(--accent, #6c757d);
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 13px;
  color: var(--text, #34383c);
}
code, .codebox {
  background: var(--code-bg, #eef0f1);
  border: 1px solid var(--border, #d7dade);
  padding: 8px 10px;
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--text, #34383c);
  overflow-x: auto;
}

/* ================= СТРАНИЦА «УЧАСТНИКИ» — поиск в одну строку ================= */

.formal .fs-box.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
}
.formal .fs-box.inline .inputfield,
.formal .fs-box.inline .selectfield {
  margin: 0;
}
.formal .fs-box.inline .infofield {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-light, #9aa0a6);
}
.formal .formsubmit { margin: 10px 0 0; }

/* ================= ПРОЧИЕ ВКЛАДКИ ПРОФИЛЯ — папки слева, форма справа =================
   Почти все вкладки профиля (Основной, Персональный, Аватар, Подпись,
   Отображения, Приватность, Дополнительно, Приглашения, Управление,
   Загрузки, Уведомления) используют одну и ту же обёртку
   #profile > .container с #profilenav внутри, но количество блоков
   справа от него на разных вкладках разное (1, 2, 3...). Используем
   grid: #profilenav — колонка 1 на всю высоту, всё остальное — колонка 2,
   грид сам расставит блоки друг под другом, сколько бы их ни было.
   Для «Просмотр» (#viewprofile-next) и «Сообщения»
   (#profile.messages-container) — свои, более специфичные правила ниже,
   они не конфликтуют. */
#profile > .container {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
}
#profile > .container > #profilenav {
  grid-column: 1;
  grid-row: 1 / -1;
}
#profile > .container > *:not(#profilenav) {
  grid-column: 2;
  min-width: 0;
  padding: 0 16px;
}
#profile > .container > *:not(#profilenav):first-of-type { padding-top: 14px; }
#profile > .container > *:not(#profilenav):last-child { padding-bottom: 14px; }

/* ================= СТРАНИЦА «СООБЩЕНИЯ» — папки слева, письма справа =================
   Внутри .container может быть то 2 элемента (папки + список писем),
   то 3 (папки + открытое письмо с формой ответа + список писем) —
   поэтому используем grid с именованными колонками, а не flex:
   так лишний третий элемент не сжимает остальные, а просто встаёт
   второй строкой в правой колонке. */
#profile.messages-container > .container {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
}
#profile.messages-container > .container > #profilenav {
  grid-column: 1;
  grid-row: 1 / -1;
}
#profile.messages-container > .container > fieldset {
  grid-column: 2;
  grid-row: 1;
}
#profile.messages-container > .container > form#messages {
  grid-column: 2;
}
#profilenav {
  width: 100%;
  background: var(--block-bg, #f3f4f5);
  border-right: 1px solid var(--border, #d7dade);
  padding: 12px 14px;
}
#profilenav h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-text, #2f3236);
  margin: 14px 0 4px;
}
#profilenav h2:first-child { margin-top: 0; }
#profilenav ul { list-style: none; margin: 0; padding: 0; }
#profilenav li { margin: 2px 0; }
#profilenav a { font-size: 12px; color: var(--link, #565d64); }
#profilenav a:hover { color: var(--link-hover, #23262a); }
#profile.messages-container > .container > fieldset,
#profile.messages-container form#messages { min-width: 0; padding: 0 14px; }
#profile.messages-container > .container > fieldset { padding-top: 12px; }

/* ================= СТРАНИЦА «ПРОФИЛЬ» — меню слева, данные справа ================= */

#viewprofile-next {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
#viewprofile { flex: 1; min-width: 0; padding: 14px 16px; }
/* движок кладёт <table> прямо внутрь <ul> (невалидная вложенность) —
   display:contents на элементах таблицы браузеры поддерживают
   ненадёжно, поэтому вместо этого просто переопределяем сами
   табличные теги на block/flex напрямую */
#viewprofile .container { background: none; }
#viewprofile .container > ul { list-style: none; margin: 0; padding: 0; }
#viewprofile table { display: block; width: 100%; }
#viewprofile tbody { display: block; }
#viewprofile tr {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
#viewprofile li { list-style: none; margin: 0 0 8px; font-size: 13px; color: var(--text, #34383c); }
#viewprofile li span { color: var(--text-muted, #767b81); margin-right: 4px; }
#viewprofile #profile-name strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; color: var(--heading-text, #2f3236); }
#viewprofile #profile-left {
  display: block;
  flex: 0 0 200px;
  padding-right: 20px;
  border-right: 1px dashed var(--border, #d7dade);
}
#viewprofile #profile-right {
  display: block;
  flex: 1;
  min-width: 200px;
  padding-left: 20px;
  overflow-wrap: break-word;
}
#viewprofile #pa-avatar img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-strong, #c3c8cd);
}

/* ================= ФОРМЫ ================= */

fieldset { border: 1px solid var(--border, #d7dade); margin: 0 0 14px; padding: 12px; }
legend { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; color: var(--heading-text, #2f3236); padding: 0 6px; }
label { color: var(--text, #34383c); font-size: 13px; }

input[type="text"], input[type="password"], input[type="email"],
input[type="search"], textarea, select {
  background: var(--input-bg, #ffffff);
  border: 1px solid var(--input-border, #cbd0d4);
  padding: 6px 8px;
  color: var(--text, #34383c);
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  max-width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--input-focus, #9aa0a6); }

input[type="submit"], input[type="button"], .button, button {
  background: var(--btn-bg, #eef0f1);
  border: 1px solid var(--btn-border, #c7cbcf);
  color: var(--btn-text, #34383c);
  padding: 7px 16px;
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, .button:hover, button:hover {
  background: var(--btn-bg-hover, #e2e5e7);
}

/* ================= ПАГИНАЦИЯ ================= */

.pagelist, .pagepost { text-align: center; margin: 10px 0; }
.pagelist a, .pagepost a {
  display: inline-block;
  padding: 4px 9px;
  margin: 0 2px;
  border: 1px solid var(--border, #d7dade);
  color: var(--text-muted, #767b81);
  background: var(--main-bg, #fbfbfc);
}
.pagelist a:hover, .pagepost a:hover { background: var(--row-hover, #eceff1); color: var(--link-hover, #23262a); }

/* ================= СКРОЛЛБАР ================= */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--page-bg, #e7e9eb); }
::-webkit-scrollbar-thumb { background: var(--border-strong, #c3c8cd); }
::-webkit-scrollbar-thumb:hover { background: var(--accent, #6c757d); }