@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Lora:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@500;600&display=swap');

/****************************************
 CircUs Cross — Щелкунчик × Зимний цирк
 by Design for Circus Cross (circuscross.rusff.me)
****************************************/

/* Утилиты: скрытие системных заголовков MyBB */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

/* clearfix */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

/* =============== ЦВЕТОВАЯ ПАЛИТРА =============== */
:root {
  --bg-body: #fdfcf9;        /* тёплый крем — фон страницы */
  --bg-card: #ffffff;         /* чистый фон карточек */
  --bg-panel: #f8f5f0;        /* фон панелей (профиль, ЛС) */
  --text-primary: #3a3735;    /* основной текст */
  --text-secondary: #6b6560;  /* второстепенный текст */
  --accent-cold: #3a5f7d;     /* ледяной синий — акцент */
  --accent-plum: #6a3d5c;     /* глубокая слива — акцент */
  --gold: #c9a86a;            /* старинное золото — рамки, акценты */
  --border: #e9e3da;          /* тёплый разделитель */
  --shadow: rgba(106, 61, 92, 0.08);
  --scroll-thumb: #c9a86a;
  --scroll-track: #f0ece7;
}

/* =============== ГЛОБАЛЬНЫЕ СТИЛИ =============== */
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  text-size-adjust: 100%;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cold);
}

::selection {
  background: var(--accent-plum);
  color: var(--bg-card);
}

:focus {
  outline: none;
}

body {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
  font-family: "Lora", serif !important;
  line-height: 1.7 !important;
  font-size: 17px !important;
}

a, .punbb #pun-admain a {
  color: var(--accent-cold);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover, .punbb #pun-admain a:hover {
  color: var(--gold);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0;
  padding: 10px 20px;
}

ul, ol, li, dl, dt, dd {
  list-style: none;
}

/* =============== ФОН И ОБОЛОЧКА =============== */
html {
  background: var(--bg-body) !important;
}

#pun {
  margin: 30px auto !important;
  width: 1100px !important;
  background: var(--bg-body) !important;
  padding: 30px !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
  border: 1px solid var(--border) !important;
}

.punbb {
  background: var(--bg-card) !important;
  padding: 2px !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px var(--border) !important;
  font-family: "Lora", serif !important;
}

/* =============== НАВИГАЦИЯ И СТАТУС =============== */
#pun-navlinks {
  border-top: 1px solid var(--gold) !important;
  margin-top: 20px !important;
}
#pun-navlinks .container {
  text-align: center !important;
}
#pun-navlinks a {
  font-family: "Cinzel", serif !important;
  font-size: 16px !important;
  color: var(--accent-cold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0 12px !important;
}
#pun-navlinks a:hover {
  color: var(--gold) !important;
}

#pun-ulinks {
  border-bottom: 1px solid var(--gold) !important;
  margin-bottom: 20px !important;
}
#pun-ulinks a {
  font-family: "Montserrat", sans-serif !important;
  color: var(--accent-plum) !important;
  font-size: 14px !important;
}

#pun-status {
  color: var(--text-secondary) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  text-align: center !important;
  margin: 15px 0 !important;
}

.crumbs.container {
  color: var(--text-secondary) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  text-align: center !important;
  margin: 15px 0 !important;
}

/* =============== ОСНОВНАЯ ТАБЛИЦА ФОРУМОВ =============== */
.main {
  background: var(--bg-card) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 16px !important;
  padding: 25px 30px !important;
  width: 980px !important;
  margin: 0 auto !important;
  box-shadow: none !important;
}

.main table {
  width: 100% !important;
  table-layout: fixed !important;
}

/* Скрыть заголовки "Форум | Тем | Сообщений" */
#pun-index thead {
  display: none !important;
}

/* Заголовок категории */
#pun-index .category h2 {
  font-family: "Cinzel", serif !important;
  font-size: 22px !important;
  color: var(--accent-cold) !important;
  text-align: center !important;
  margin: 25px 0 15px !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}
#pun-index .category h2::before,
#pun-index .category h2::after {
  content: "🎪";
  font-size: 18px;
}

/* Строки форумов */
#pun-index .hasicon tr {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 920px !important;
  margin: 0 auto 16px !important;
  position: relative !important;
}

#pun-index .tcl {
  width: 100% !important;
  padding: 0 !important;
}

#pun-index .tcl h3 {
  background: var(--bg-panel) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  display: inline-block !important;
  margin: 0 !important;
}

#pun-index .tcl h3 a {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  color: var(--accent-plum) !important;
  font-weight: 600 !important;
}

/* Темы / Сообщения */
#pun-index .tc2,
#pun-index .tc3 {
  position: absolute !important;
  bottom: 20px !important;
  font-family: "Montserrat", sans-serif !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important;
}
#pun-index .tc2::before {
  content: "тем: " !important;
}
#pun-index .tc3::before {
  content: "сообщений: " !important;
}
#pun-index .tc2 { left: 30px !important; }
#pun-index .tc3 { left: 180px !important; }

/* Последнее сообщение */
#pun-index .tcr {
  width: 100% !important;
  padding-top: 10px !important;
  color: var(--text-secondary) !important;
  font-style: italic !important;
  font-size: 15px !important;
  border-top: 1px dashed var(--border) !important;
  padding-top: 12px !important;
}

/* =============== ПОСТЫ =============== */
.post .container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 20px !important;
}

.post-author {
  width: 180px !important;
  text-align: center !important;
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  color: var(--text-primary) !important;
}

.pa-author a {
  font-family: "Cinzel", serif !important;
  color: var(--accent-plum) !important;
  font-size: 18px !important;
}

.post-body {
  flex: 1 !important;
  min-width: 300px !important;
  background: var(--bg-card) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  border: 1px solid var(--border) !important;
}

.post-content p {
  margin-bottom: 16px !important;
  line-height: 1.7 !important;
  font-size: 17px !important;
}

/* Цитаты */
.quote-box, .code-box {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin: 12px 0 !important;
}
.quote-box cite {
  color: var(--accent-cold) !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--gold) !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* =============== КНОПКИ И ФОРМЫ =============== */
input.button,
input[type="button"],
input[type="submit"] {
  background: var(--accent-cold) !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
input.button:hover {
  background: var(--gold) !important;
  color: var(--accent-cold) !important;
}

input[type="text"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--border) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-family: "Lora", serif !important;
  font-size: 16px !important;
}

/* =============== ФУТЕР =============== */
#pun-about .container {
  text-align: center !important;
  color: var(--text-secondary) !important;
  font-style: italic !important;
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--border) !important;
}

/* =============== АДАПТИВНОСТЬ =============== */
@media (max-width: 980px) {
  #pun {
    width: auto !important;
    margin: 15px !important;
    padding: 15px !important;
  }
  .main {
    width: auto !important;
    padding: 15px !important;
  }
  #pun-index .hasicon tr {
    width: auto !important;
    padding: 15px !important;
  }
  .post .container {
    flex-direction: column !important;
  }
  .post-author {
    width: 100% !important;
  }
}