/* Портал «анонсы и топы серверов Lineage 2» — отдельный светлый стиль,
   свой, не тема игрового сайта GvE (core/css/style.css). */

:root {
  --p-bg: #f2ebdd;
  --p-card: #fffdf7;
  --p-ink: #2b2114;
  --p-muted: #8a7a63;
  --p-line: #e4d9c2;
  --p-navy: #241a10;
  --p-navy-2: #3a2a19;
  --p-amber: #d9a441;
  --p-amber-d: #b8842a;
  --p-vip: #cf4a24;
  --p-green: #2f7d46;
  --p-green-bg: #e6f1e2;
  --p-radius: 12px;
}

* { box-sizing: border-box; }

body.portal {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* базовое правило намеренно без класса: специфичность 0-1-0 у .p-tab/.p-btn
   и 0-1-1 у .p-nav a должны его перебивать — иначе текст ссылок унаследует
   тёмный цвет и станет нечитаемым на тёмной плашке */
a { color: inherit; text-decoration: none; }

.p-wrap { max-width: 1080px; margin: 0 auto; padding: 0 14px; }

/* ---------- шапка ---------- */
.p-head {
  background: var(--p-navy);
  border-bottom: 3px solid var(--p-amber);
  position: sticky;
  top: 0;
  z-index: 30;
}
.p-head-in { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.p-brand {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .5px;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.p-brand .b1 { color: var(--p-amber); }
.p-brand .b2 { color: #fff; }
.p-brand .bd { font-size: 12px; color: #c2ab84; font-weight: 600; letter-spacing: 1px; }
.p-burger {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  display: none;
  cursor: pointer;
}
.p-burger span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; }
.p-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-nav a {
  color: #e6d9c0;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.p-nav a:hover { color: #fff; background: var(--p-navy-2); }
.p-nav a.on { color: #fff; background: var(--p-navy-2); }
.p-nav a.p-cta { background: var(--p-amber); color: #31240a; }
.p-nav a.p-cta:hover { background: #e8be62; }

/* На ноутбуках меню из восьми пунктов не влезало в одну строку и «Выход»
   падал на вторую — поджимаем отступы, шрифт и переключатели. */
@media (max-width: 1400px) {
  .p-head-in { gap: 10px; }
  .p-brand { font-size: 22px; }
  .p-brand .bd { font-size: 11px; }
  .p-tools { gap: 6px; }
  .p-theme { width: 32px; height: 32px; }
  .p-lang-btn { font-size: 12.5px; padding: 6px 8px; gap: 6px; }
  .p-nav { gap: 3px; }
  .p-nav a { padding: 8px 9px; font-size: 13.5px; }
  .p-head-in .p-nav { margin-left: 8px; }
}

/* уже ноутбука: домен в логотипе уступает место меню */
@media (max-width: 1100px) {
  .p-brand .bd { display: none; }
  .p-nav { gap: 2px; }
  .p-nav a { padding: 7px 8px; font-size: 13px; }
}

/* почти планшет: поджимаем ещё, чтобы восемь пунктов держались в строку */
@media (max-width: 950px) {
  .p-brand { font-size: 20px; }
  .p-nav a { padding: 6px 7px; font-size: 12.5px; }
}

/* до 950px: место дороже подписи — в кнопке языка остаётся флаг
   (на телефоне подпись скрыта и своим правилом, см. блок ≤640px) */
@media (max-width: 950px) {
  .p-lang-name { display: none; }
}

/* ---------- общее ---------- */
.p-main { padding-top: 18px; padding-bottom: 40px; }
.p-title {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 10px 0 16px;
}
.p-sub { text-align: center; color: var(--p-muted); margin: -8px 0 16px; font-size: 14px; }

.p-panel {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 14px;
  margin-bottom: 16px;
}
.p-panel h2, .p-panel h3 { margin: 0 0 10px; font-size: 17px; }

/* ---------- раскладка: список + колонка с баннером ---------- */
.p-split { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 22px; align-items: start; }
.p-tops { min-width: 0; }
.p-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.p-banner {
  display: block;
  border-radius: var(--p-radius);
  overflow: hidden;
  background: var(--p-navy);
  box-shadow: 0 2px 10px rgba(15, 25, 45, .14);
  transition: box-shadow .15s ease;
}
.p-banner:hover { box-shadow: 0 6px 18px rgba(15, 25, 45, .24); }
.p-banner img { display: block; width: 100%; height: auto; }
.p-banner-alt {
  display: block;
  padding: 24px 16px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(160deg, var(--p-navy-2), var(--p-navy));
}
/* баннер «место свободно»: картинка без надписей, текст лежит поверх неё и переводится */
.p-banner-free { position: relative; }
.p-banner-free::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgba(8, 14, 28, 0) 0%, rgba(8, 14, 28, .72) 60%, rgba(8, 14, 28, .9) 100%);
  pointer-events: none;
}
.p-banner-free-txt {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.p-banner-free-txt b {
  display: block;
  font-size: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
.p-banner-free-txt i {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 12.5px;
  opacity: .92;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
/* превью картинки баннера в кабинете админа */
.p-thumb {
  width: 96px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--p-line);
  background: var(--p-navy);
}
.p-thumb.big { width: auto; height: auto; max-width: 240px; max-height: 420px; object-fit: contain; }
.p-rail-card {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 14px;
  font-size: 13.5px;
  color: var(--p-muted);
}
.p-rail-h { font-size: 14px; font-weight: 800; color: var(--p-ink); margin-bottom: 6px; }
.p-rail-card p { margin: 0 0 10px; }
.p-rail-card .p-btn { display: block; text-align: center; }

/* быстрые фильтры в колонке: хроники, рейты, подбор */
.p-rail-box {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 12px;
}
.p-chips2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-chip2 {
  display: block;
  padding: 7px 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-navy);
  background: #f6efdf;
  border: 1px solid var(--p-line);
  border-radius: 9px;
}
.p-chip2:hover { background: #efe4cd; }
.p-chip2.on { background: var(--p-navy); border-color: var(--p-navy); color: #fff; }
.p-rail-filter select {
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  background: #fff;
  color: var(--p-ink);
}
.p-rail-filter .p-btn { width: 100%; }

/* календарь стартов */
.p-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}
.p-cal-head a {
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  color: var(--p-navy);
  background: #f6efdf;
}
.p-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.p-cal-dow { text-align: center; font-size: 11px; color: var(--p-muted); padding-bottom: 3px; }
.p-cal-day {
  display: block;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 4px 0;
  border-radius: 7px;
  color: var(--p-ink);
}
.p-cal-day.out { color: #cfc0a6; }
.p-cal-day.has { background: #f7e4de; color: #a83312; font-weight: 800; }
.p-cal-day.has:hover { background: #efd0c6; }
.p-cal-day.today { background: var(--p-amber); color: #3a2504; }
.p-cal-day.on { background: var(--p-navy); color: #fff; }
.p-cal-note { margin-top: 8px; font-size: 12.5px; color: var(--p-muted); }
.p-topban { margin-bottom: 16px; }
.p-topban + .p-split { margin-top: 0; }

/* ---------- две колонки: «скоро откроются» / «уже открылись» ---------- */
.p-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.p-col { min-width: 0; }
.p-colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--p-navy);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 800;
  font-size: 14px;
}
.p-colhead.opened { background: #6b5a45; }
.p-colhead span {
  background: rgba(255, 255, 255, .22);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 12px;
  letter-spacing: 0;
}
.p-colhead + .p-strip { margin-top: 10px; }
.p-col > .p-strip { margin-top: 14px; }

/* ---------- на телефоне две колонки — две вкладки ---------- */
/* базово вкладок нет: на широком экране колонки стоят рядом, а без JS — друг за
   другом. Вкладки включает скрипт страницы (класс tabs-on у .p-cols). */
.p-tabs { display: none; }
.p-tabs .p-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 0;
  padding: 11px 12px;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  background: var(--p-card);
  color: var(--p-navy);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
}
.p-tabs .p-tab span {
  background: rgba(36, 26, 16, .08);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
/* выбранная вкладка красится как шапка своей колонки */
.p-tabs .p-tab.on { background: var(--p-navy); border-color: var(--p-navy); color: #fff; }
.p-tabs .p-tab.on[data-p-tab="opened"] { background: #6b5a45; border-color: #6b5a45; }
.p-tabs .p-tab.on span { background: rgba(255, 255, 255, .22); }

@media (max-width: 900px) {
  .p-cols.tabs-on .p-tabs { display: flex; gap: 8px; }
  /* название колонки теперь на вкладке — заголовок столбца на телефоне лишний */
  .p-cols.tabs-on .p-col > .p-colhead { display: none; }
  .p-cols.tabs-on > .p-col { display: none; }
  .p-cols.tabs-on[data-tab="soon"] > .p-col-soon { display: block; }
  .p-cols.tabs-on[data-tab="opened"] > .p-col-opened { display: block; }
}

/* фильтры */
.p-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.p-filters select, .p-filters input, .p-filters .field {
  padding: 9px 10px;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  color: var(--p-ink);
  min-width: 150px;
}
.p-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid var(--p-amber);
  background: var(--p-amber);
  color: #31240a;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}
.p-btn.ghost { background: #fff; color: var(--p-ink); border-color: var(--p-line); }
.p-btn:hover { filter: brightness(1.05); }

/* полоса-заголовок раздела (как «VIP | скоро откроются») */
.p-strip {
  background: #efe6d2;
  color: #5b452a;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  margin: 18px 0 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
/* жёлтое размещение — закреп; чёрное — ТОП (обои сайта); красное — приглушённое, но есть */
.p-strip.vip { background: linear-gradient(90deg, #fdf6d9, #fdfae9); color: #7b5a05; }

/* ---------- строка сервера ---------- */
.p-list {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  overflow: hidden;
}
.p-list-clear { background: transparent; border: 0; border-radius: 0; }
.p-row { padding: 12px 14px; border-bottom: 1px solid var(--p-line); }
.p-row:last-child { border-bottom: 0; }
.p-row:hover { background: #fdf8ee; }
.p-row-top { display: flex; align-items: center; gap: 10px; }
.p-badge {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 3px 7px;
  border-radius: 6px;
  color: #fff;
  background: var(--p-vip);
}
.p-name { font-weight: 800; font-size: 16px; color: var(--p-navy); }
.p-name:hover { color: var(--p-amber-d); }
.p-reload { color: var(--p-amber-d); font-size: 15px; }
.p-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--p-ink);
}
.p-rate { font-weight: 700; min-width: 54px; }
.p-chronicle { color: var(--p-ink); flex: 1; }
/* плотный список для длинного хвоста «Неделю назад и более»: те же строки,
   но компактнее — старых серверов бывает много, а страницу растягивать нельзя */
.p-list-compact .p-row { padding: 7px 12px; }
.p-list-compact .p-row-top { gap: 8px; }
.p-list-compact .p-badge { font-size: 10px; padding: 2px 6px; }
.p-list-compact .p-name { font-size: 14px; }
.p-list-compact .p-row-meta { margin-top: 2px; font-size: 12px; gap: 8px; }
.p-list-compact .p-rate { min-width: 44px; }
.p-day { font-weight: 700; color: var(--p-muted); white-space: nowrap; }
.p-day.today, .p-day.tomorrow {
  color: var(--p-green);
  background: var(--p-green-bg);
  border-radius: 7px;
  padding: 2px 8px;
}
.p-note { margin: 6px 0 0; color: var(--p-muted); font-size: 13px; }
/* правка карточки: список «было → стало» для автора и модератора */
.p-changes { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--p-ink); }
.p-changes li { padding: 3px 0; border-bottom: 1px dashed var(--p-line); }
.p-changes li:last-child { border-bottom: 0; }
.p-ch-label { color: var(--p-muted); }
.p-ch-old { color: var(--p-muted); text-decoration: line-through; }
.p-ch-arrow { color: var(--p-muted); }
.p-ch-new { font-weight: 700; }
.p-edit-flag {
  color: var(--p-navy);
  font-weight: 600;
  border-bottom: 1px dashed var(--p-line);
  white-space: nowrap;
}
.p-contact { font-size: 13px; color: var(--p-muted); }
.p-contact a { color: var(--p-navy); font-weight: 600; border-bottom: 1px dashed var(--p-line); }
.p-empty { color: var(--p-muted); margin: 8px 0 0; }

/* свой сервер — карточка полупрозрачная, фон страницы просвечивает */
.p-own {
  border: 1px solid rgba(232, 207, 156, .8);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 250, 240, .42), rgba(255, 255, 255, .18));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.p-own .p-own-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-own .p-own-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.p-grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.p-cell {
  background: #f9f4e8;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  padding: 10px;
  text-align: center;
}
.p-cell b { display: block; font-size: 18px; color: var(--p-navy); }
.p-cell span { color: var(--p-muted); font-size: 12px; }

/* форма */
.p-form label { display: block; font-weight: 700; font-size: 13px; margin: 12px 0 5px; }
.p-form .helptext { display: block; color: var(--p-muted); font-size: 12px; margin-top: 4px; }
.p-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p-form input[type="text"], .p-form input[type="url"], .p-form input[type="date"],
.p-form input[type="password"], .p-form textarea, .p-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  font: inherit;
  background: #fff;
}
.p-form .captcha-wrap { margin-top: 12px; }
.p-form .captcha-img { display: block; border: 1px solid var(--p-line); border-radius: 9px; margin: 6px 0; }
.p-form .errorlist { color: #c0341d; font-size: 13px; margin: 4px 0 0; padding-left: 18px; }
.p-form button[type="submit"] { margin-top: 14px; }
.p-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.p-check input { width: 18px; height: 18px; }

/* SEO-текст */
.p-seo { color: #5b462c; font-size: 14px; }
.p-seo h2 { font-size: 17px; color: var(--p-navy); margin: 0 0 8px; }
.p-seo h3 { font-size: 15px; color: var(--p-navy); margin: 14px 0 6px; }
.p-seo p { margin: 0 0 10px; }
.p-seo ul { margin: 0 0 10px; padding-left: 20px; }
.p-faq details { border-top: 1px solid var(--p-line); padding: 10px 0; }
.p-faq summary { cursor: pointer; font-weight: 700; color: var(--p-navy); }
.p-faq p { margin: 8px 0 0; color: #5b462c; }

/* подвал */
.p-foot { background: var(--p-navy); color: #bda87f; padding: 22px 0; font-size: 14px; }
.p-foot a { color: #ecd9ae; margin-right: 14px; display: inline-block; }
.p-foot a:hover { color: #fff; }
.p-foot .p-foot-brand { color: #fff; font-weight: 800; margin-bottom: 8px; }

.p-msg { list-style: none; margin: 0 0 12px; padding: 0; }
.p-msg li {
  padding: 10px 12px;
  border-radius: 9px;
  background: #f2ebd8;
  border: 1px solid #ded0b0;
  margin-bottom: 8px;
}
.p-msg li.error { background: #f7e0d8; border-color: #e8c2ac; }

/* ---------- значки категорий размещения (VIP / ТОП / обычное) ---------- */
.p-badge i { font-style: normal; margin-right: 3px; }
.p-badge.top { background: linear-gradient(135deg, #3a2d1c, #1c1409); color: #fff; }
.p-badge.red { background: linear-gradient(135deg, #a8544d, #8a3b36); color: #fff; }
.p-badge.vip { background: linear-gradient(135deg, #ffd85e, #efb023); color: #473204; }
.p-badge.free {
  background: #f4eede;
  color: #6b563a;
  border: 1px solid #ded0b2;
  font-weight: 700;
}
.p-badge.banner {
  background: linear-gradient(135deg, #dfeaf6, #cddff2);
  color: #1f4a75;
  border: 1px solid #b9d0e8;
  font-weight: 700;
}
.p-strip.top { background: linear-gradient(90deg, #efe7d6, #e4d8be); color: #2b2114; }
.p-strip.red { background: linear-gradient(90deg, #f6e6e4, #f2e9e8); color: #8c3b32; }
.p-strip.day-today, .p-strip.day-yesterday { background: linear-gradient(90deg, #e6f1e2, #eaf3e4); color: #2c6b3a; }
.p-strip.bonus { background: linear-gradient(90deg, #f3edd6, #faf6e8); color: #6b5a12; }
.p-strip.eternal { background: linear-gradient(90deg, #efe0e2, #f8f0f2); color: #6b3f4a; }
.p-day.yesterday {
  color: #8a5b00;
  background: #fdf3e0;
  border-radius: 7px;
  padding: 2px 8px;
}
.p-legend { list-style: none; padding-left: 0; }
.p-legend li { margin-bottom: 6px; }
.p-btn.warn { border-color: #e6b3a8; color: #a5291a; background: #fff; }

/* ---------- личный кабинет портала ---------- */
.p-lk-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.p-lk-nav a {
  padding: 8px 9px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--p-line);
  font-weight: 700;
  font-size: 14px;
  color: var(--p-navy);
}
.p-lk-nav a.on { background: var(--p-navy); border-color: var(--p-navy); color: #fff; }
.p-lk-nav a.p-lk-out { margin-left: auto; color: #8a4a2a; }
.p-narrow { max-width: 460px; margin: 0 auto; }
.p-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  margin-right: 4px;
  border-radius: 8px;
  border: 1px solid var(--p-line);
  background: #fff;
  color: var(--p-ink);
  cursor: pointer;
}
.p-chip:hover { filter: brightness(.97); }
.p-chip.on.vip { background: linear-gradient(135deg, #f6a821, #e07d13); border-color: #e07d13; color: #3a2504; }
.p-chip.on.top { background: #bf2917; border-color: #bf2917; color: #fff; }
.p-chip.on.free { background: var(--p-navy); border-color: var(--p-navy); color: #fff; }
.p-own-actions form { margin: 0; }
/* поле «причина отказа» рядом с кнопкой: строка ввода не должна растягиваться на всю карточку */
.p-own-actions form input.field { max-width: 240px; }

@media (max-width: 1080px) {
  /* правая колонка остаётся справа — сужается только список */
  .p-split { grid-template-columns: minmax(0, 1fr) 216px; gap: 16px; }
}

@media (max-width: 900px) {
  .p-cols { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 820px) {
  /* на узком экране колонка уезжает под список и идёт столбиком */
  .p-split { grid-template-columns: 1fr; gap: 14px; }
  .p-rail { flex-direction: column; }
  .p-rail > * { width: 100%; }
  .p-rail .p-banner { width: 240px; max-width: 100%; }
}

@media (max-width: 720px) {
  .p-grid2 { grid-template-columns: 1fr; }
  .p-form .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .p-burger { display: block; }
  .p-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 10px;
    /* раскрытое меню отделяем от шапки тонкой золотой линией */
    border-top: 1px solid rgba(212, 175, 55, .35);
    margin-top: 6px;
    padding-top: 8px;
  }
  .p-nav.open { display: flex; }
  /* на телефоне шапка — одна строка: логотип, переключатели, «гамбургер».
     Просто wrap не годится: автоотступ у .p-tools выдавливал кнопку меню
     на вторую строку, и та висела пустой полосой. */
  .p-head-in { flex-wrap: wrap; gap: 8px; }
  .p-brand { font-size: 20px; min-width: 0; }
  .p-burger { margin-left: 4px; }
  .p-nav a { padding: 10px 12px; }
  .p-filters select, .p-filters .field, .p-filters .p-btn { width: 100%; min-width: 0; }
  .p-row-meta { font-size: 13px; gap: 8px; }
  .p-name { font-size: 15px; }
  .p-rate { min-width: 44px; }
  /* «причина отказа» на телефоне: поле во всю ширину, кнопка уезжает под него */
  .p-own-actions form { width: 100%; }
  .p-own-actions form input.field { max-width: none; width: 100%; }
}

/* на самых узких телефонах в шапке не хватает места на домен — оставляем «l2top» */
@media (max-width: 360px) {
  .p-brand .bd { display: none; }
}

/* ---------- переключатели в шапке: тема и язык ---------- */
.p-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* .p-nav базово уезжает вправо (margin-left:auto) — рядом с ним ставим
   переключатели, поэтому автоотступ отдаём только .p-tools */
.p-head-in .p-nav { margin-left: 10px; }
.p-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid #5b452a;
  border-radius: 9px;
  background: var(--p-navy-2);
  color: #f0e4c8;
  cursor: pointer;
}
.p-theme:hover { border-color: var(--p-amber); color: var(--p-amber); }
.p-theme .ic-moon { display: none; }
html[data-theme="dark"] .p-theme .ic-sun { display: none; }
html[data-theme="dark"] .p-theme .ic-moon { display: block; }
.p-lang { position: relative; }
.p-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid #5b452a;
  background: var(--p-navy-2);
  color: #f0e4c8;
  cursor: pointer;
}
.p-lang-btn:hover { border-color: var(--p-amber); }
.p-flag {
  display: block;
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  object-fit: cover;
}
.p-caret { flex: none; opacity: 0.85; transition: transform 0.16s; }
.p-lang.open .p-caret { transform: rotate(180deg); }
.p-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 230px;
  max-height: min(72vh, 520px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  background: #241a10;
  border: 1px solid var(--p-amber);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 60;
}
.p-lang.open .p-lang-menu { display: block; }
.p-lang-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f0e4c8;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.p-lang-opt:hover { background: rgba(230, 180, 90, 0.16); color: #fff; }
.p-lang-opt.on { background: rgba(230, 180, 90, 0.22); color: #fff; font-weight: 700; }
.p-lang-opt .p-flag { width: 22px; height: 15px; }

/* ---------- тёмная тема портала ---------- */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --p-bg: #15100a;
  --p-card: #1e1811;
  --p-ink: #f0e4c8;
  --p-muted: #a89a7d;
  --p-line: #362c1c;
  --p-navy: #2a2014;
  --p-navy-2: #3c2d1a;
  --p-green: #4ad07f;
  --p-green-bg: #12301f;
}
html[data-theme="dark"] body.portal { background: var(--p-bg); color: var(--p-ink); }

/* тёмный текст, который в светлой теме идёт по светлому фону */
html[data-theme="dark"] .p-name,
html[data-theme="dark"] .p-chip2,
html[data-theme="dark"] .p-cal-head a,
html[data-theme="dark"] .p-contact a,
html[data-theme="dark"] .p-cell b,
html[data-theme="dark"] .p-seo h2,
html[data-theme="dark"] .p-seo h3,
html[data-theme="dark"] .p-faq summary,
html[data-theme="dark"] .p-lk-nav a { color: var(--p-ink); }
html[data-theme="dark"] .p-name:hover,
html[data-theme="dark"] .p-reload { color: var(--p-amber); }

/* поля ввода и «белые» кнопки */
html[data-theme="dark"] .p-rail-filter select,
html[data-theme="dark"] .p-filters select,
html[data-theme="dark"] .p-filters input,
html[data-theme="dark"] .p-filters .field,
html[data-theme="dark"] .p-form input[type="text"],
html[data-theme="dark"] .p-form input[type="url"],
html[data-theme="dark"] .p-form input[type="date"],
html[data-theme="dark"] .p-form input[type="password"],
html[data-theme="dark"] .p-form input[type="file"],
html[data-theme="dark"] .p-form textarea,
html[data-theme="dark"] .p-form select,
html[data-theme="dark"] .p-btn.ghost,
html[data-theme="dark"] .p-lk-nav a,
html[data-theme="dark"] .p-chip {
  background: #1c150d;
  border-color: var(--p-line);
  color: var(--p-ink);
}
html[data-theme="dark"] .p-btn.warn { background: #1c150d; border-color: #5a2a20; color: #ff9c8f; }

/* чипы фильтров и активные состояния */
html[data-theme="dark"] .p-chip2 { background: #2a2116; }
html[data-theme="dark"] .p-chip2:hover { background: #3a2e1e; }
html[data-theme="dark"] .p-chip2.on,
html[data-theme="dark"] .p-cal-day.on,
html[data-theme="dark"] .p-lk-nav a.on,
html[data-theme="dark"] .p-chip.on.free { background: #96702a; border-color: #96702a; color: #fff; }

/* календарь */
html[data-theme="dark"] .p-cal-head a { background: #2a2116; }
html[data-theme="dark"] .p-cal-day.out { color: #6b5a45; }
html[data-theme="dark"] .p-cal-day.has { background: #3a1d1c; color: #ff9c8f; }
html[data-theme="dark"] .p-cal-day.has:hover { background: #4a2422; }

/* полосы-заголовки разделов и строки списка */
html[data-theme="dark"] .p-strip { background: #2b2216; color: #e0d3b8; }
html[data-theme="dark"] .p-strip.vip { background: linear-gradient(90deg, #33290f, #2f2a12); color: #f0c060; }
html[data-theme="dark"] .p-strip.top { background: linear-gradient(90deg, #2b2318, #191309); color: #e2d6bc; }
html[data-theme="dark"] .p-strip.red { background: linear-gradient(90deg, #33201e, #2b1d1c); color: #e2918b; }
html[data-theme="dark"] .p-strip.day-today,
html[data-theme="dark"] .p-strip.day-yesterday { background: linear-gradient(90deg, #12301f, #142c22); color: #5fd68f; }
html[data-theme="dark"] .p-strip.bonus { background: linear-gradient(90deg, #232012, #1d1b10); color: #d9c06a; }
html[data-theme="dark"] .p-strip.eternal { background: linear-gradient(90deg, #2b1e21, #241a1d); color: #d9a9bd; }
html[data-theme="dark"] .p-colhead.opened { background: #4a3d2b; }
/* вкладки на телефоне в тёмной теме */
html[data-theme="dark"] .p-tabs .p-tab { background: #1c150d; border-color: var(--p-line); color: var(--p-ink); }
html[data-theme="dark"] .p-tabs .p-tab span { background: rgba(255, 255, 255, .10); }
html[data-theme="dark"] .p-tabs .p-tab.on { background: #96702a; border-color: #96702a; color: #fff; }
html[data-theme="dark"] .p-tabs .p-tab.on[data-p-tab="opened"] { background: #6b5a45; border-color: #6b5a45; }
html[data-theme="dark"] .p-row:hover { background: #241d13; }
html[data-theme="dark"] .p-badge.free { background: #2b2216; color: #e0d3b8; border-color: #362c1c; }
html[data-theme="dark"] .p-badge.banner { background: #1c2a38; color: #cfe0f2; border-color: #26384a; }
html[data-theme="dark"] .p-day.yesterday { color: #f0c060; background: #33280f; }

/* карточка своего сервера, показатели, SEO-текст, сообщения */
html[data-theme="dark"] .p-own {
  border-color: rgba(74, 58, 28, .85);
  background: linear-gradient(180deg, rgba(36, 31, 20, .42), rgba(30, 24, 17, .18));
}
html[data-theme="dark"] .p-cell { background: #241d13; }
html[data-theme="dark"] .p-seo,
html[data-theme="dark"] .p-faq p { color: #d6c9ae; }
html[data-theme="dark"] .p-form .errorlist { color: #ff9c8f; }
html[data-theme="dark"] .p-msg li { background: #241f13; border-color: #6b5a2a; }
html[data-theme="dark"] .p-msg li.error { background: #341c19; border-color: #5a2a20; }
html[data-theme="dark"] .p-lk-nav a.p-lk-out { color: #e0a07a; }

/* на телефоне название языка скрыто — остаётся флаг */
@media (max-width: 640px) {
  .p-burger { margin-left: 0; }
  .p-lang-name { display: none; }
  .p-lang-menu { width: 210px; }
}

/* ---------- фон страницы: обои с рекламой нашего сервера ---------- */
/* страница «Анонсы»: картинка лежит в фоне, контент идёт поверх неё */
body.portal.p-wall-gve {
  background: var(--p-bg) url("../img/gve-wall-light.2d47c7a0b289.jpg") center top / cover no-repeat fixed;
  /* полоса обоев выходит за ширину вьюпорта на ширину полосы прокрутки:
     clip убирает лишнюю горизонтальную прокрутку, не ломая залипающую шапку */
  overflow-x: clip;
}
html[data-theme="dark"] body.portal.p-wall-gve {
  background: var(--p-bg) url("../img/gve-wall-dark.b6dc1347702b.jpg") center top / cover no-repeat fixed;
}
/* На узком экране обои живут в самой полосе и показываются ЦЕЛИКОМ: фоном
   страницы их держать нельзя — верх картинки уходил под шапку и логотип GvE
   обрезался наполовину. Картинка 2400×1600, то есть 3:2. */
@media (max-width: 720px) {
  body.portal.p-wall-gve,
  html[data-theme="dark"] body.portal.p-wall-gve {
    background-image: none;
    background-attachment: scroll;
  }
}

/* кликабельная полоса обоев: реклама нашего сервера, ведёт на его сайт.
   никакой рамки не рисуем: обои и есть реклама, клик по ним уводит на сайт */
.p-wall-link {
  display: block;
  /* текст описания позиционируется по полосе обоев, а не по потоку страницы */
  position: relative;
  /* полоса занимает большую часть экрана: список серверов начинается только под обоями */
  height: clamp(260px, 56vh, 700px);
  /* и растянута на всю ширину окна, чтобы клик работал по краям обоев, а не только в центре */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (max-width: 720px) {
  .p-wall-link {
    /* высота = высоте картинки при ширине экрана, поэтому обрезки нет */
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
    /* прижимаем обои к золотой линии шапки: у .p-main сверху 18px отступа */
    margin-top: -18px;
    background: url("../img/gve-wall-light.2d47c7a0b289.jpg") center top / 100% auto no-repeat;
  }
  html[data-theme="dark"] .p-wall-link {
    background-image: url("../img/gve-wall-dark.b6dc1347702b.jpg");
  }
}

/* ---------- надпись на обоях: «Старт» и дата запуска в стиле сайта GvE ---------- */
/* карточки на обоях больше нет: надпись лежит прямо на картинке — золото,
   разрежённые прописные, орнаментная линия с ромбом, как на l2gve.online.
   Читаемость держит мягкое затемнение низу: на светлой версии обоев нижняя
   часть картинки уходит в белое, и золото на ней пропадает. */
.p-wall-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  background: linear-gradient(180deg, rgba(6, 8, 14, 0) 0%, rgba(6, 8, 14, .30) 46%, rgba(6, 8, 14, .62) 100%);
  pointer-events: none;
}
.p-wall-in {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* надпись выше затемнения низу, иначе оно ляжет поверх текста */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px 32px;
  text-align: left;
}
/* орнаментная линия с ромбом — приём с сайта GvE.
   Держим надпись слева: по центру она садится прямо на золотой логотип GvE */
.p-wall-orn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 220px;
  margin-bottom: 12px;
}
.p-wall-orn::before {
  content: none;
}
.p-wall-orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #8b734c, rgba(139, 115, 76, 0));
}
.p-wall-orn i {
  flex: none;
  width: 8px;
  height: 8px;
  background: #d4af37;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(212, 175, 55, .65);
}
/* «СТАРТ» — мелко, разрежёнными прописными, тусклым золотом */
.p-wall-kicker {
  font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
  font-size: clamp(13px, 1.5vw, 21px);
  letter-spacing: .42em;
  /* разрежённые буквы дают лишний отступ справа — гасим его отступом слева */
  text-indent: .42em;
  text-transform: uppercase;
  color: #e8dcc0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
/* сама дата: золотой градиент и тень — как у золотых надписей на сайте GvE */
.p-wall-day {
  margin-top: 8px;
  font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
  font-size: clamp(30px, 4.4vw, 66px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #fbe9a8 0%, #d4af37 58%, #9a7620 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d4af37;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 10px 30px rgba(0, 0, 0, .55));
}
@media (max-width: 720px) {
  .p-wall-link::after { height: 74%; }
  .p-wall-in { padding: 0 12px 18px; }
  .p-wall-orn { margin-bottom: 10px; }
  .p-wall-kicker { font-size: 12px; letter-spacing: .3em; text-indent: .3em; }
  .p-wall-day { margin-top: 6px; font-size: clamp(24px, 7.4vw, 38px); }
}

/* скрытый заголовок страницы: нужен поисковикам, глазами не видно */
.p-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- заявка без регистрации ---------- */

/* ловушка для ботов: человек этого поля не видит */
.p-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* три шага заявки: заполнил → проверили → в списках */
.p-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.p-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.p-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--p-amber);
  color: #2b2114;
  font-size: 12px;
}
/* «заявка отправлена» — зелёная полоса слева, фон карточки сохраняем:
   светлая плашка нечитаема в тёмной теме */
.p-thanks {
  border-left: 4px solid var(--p-green);
}
.p-thanks h2 { margin-top: 0; }

@media (max-width: 720px) {
  .p-steps { grid-template-columns: 1fr; }
}

/* ---------- топы: сетка карточек и голосование (порядок задают голоса) ---------- */
.p-tops { margin-top: 14px; }

/* полоса-пояснение над списком: как считается место и где голосовать */
.p-vote-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-left: 4px solid var(--p-amber);
  border-radius: var(--p-radius);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.p-vote-bar-text { flex: 1 1 320px; font-size: 13px; color: var(--p-muted); }

/* ---- строки топов: широкая плита на сервер, как в списках топов L2 ----
   плита 3 колонки: место+значок | название, метки и описание | голоса и кнопка */
.p-trows { display: flex; flex-direction: column; gap: 10px; }

.p-trow {
  display: grid;
  grid-template-columns: 62px 1fr 168px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  color: #f4ecd8;                                  /* текст на тёмной плите */
  box-shadow: 0 6px 18px rgba(3, 5, 12, .18);
  min-width: 0;
}
/* цвет плиты — категория размещения */
.p-trow.top  { background: linear-gradient(135deg, #3b2f1d, #1d160c); }   /* чёрное  ▲ */
.p-trow.red  { background: linear-gradient(135deg, #7c3730, #4a201c); }   /* красное ◆ */
.p-trow.vip  { background: linear-gradient(135deg, #6d5320, #41300f); }   /* жёлтое  ★ */
.p-trow.free { background: linear-gradient(135deg, #2f5138, #1b3323); }   /* обычное ● */

.p-trow-place { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.p-trow-rank { font-size: 22px; font-weight: 800; line-height: 1; color: #fff; }
.p-trow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 17px;
}

.p-trow-body { min-width: 0; }
.p-trow-name {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--p-amber);
  overflow-wrap: anywhere;
}
.p-trow-name:hover { color: #ffdf8f; }
.p-trow-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 6px 0 0; }
.p-trow-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .14);
  color: #f4ecd8;
}
.p-trow-tag.chron { background: #e2792f; color: #241403; }   /* хроника — оранжевая, как в примере */
.p-trow-tag.rate { background: rgba(255, 255, 255, .2); }
.p-trow-tag.wipes { background: #b5482f; color: #fff4e4; }
.p-trow-desc { margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: #e2d6bb; }
.p-trow-bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
.p-trow-contact { font-size: 12px; color: #cbbe9d; }

.p-trow-side {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  text-align: center;
}
.p-trow-votes {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--p-amber);
  color: #32240a;
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}
.p-trow-votes b { font-size: 16px; }
.p-trow-side .p-btn.small { text-align: center; }
.p-trow-side .p-btn.play { background: var(--p-amber); border-color: var(--p-amber-d); color: #32240a; }
.p-trow-side .p-voted { font-size: 12px; font-weight: 700; color: #9ad98d; }
.p-trow-side .p-voted.wait { font-weight: 600; color: #cbbe9d; }

@media (max-width: 720px) {
  .p-trow {
    grid-template-columns: 44px 1fr;
    grid-template-areas: "place body" "side side";
    gap: 10px;
    padding: 11px 12px;
  }
  .p-trow-place { grid-area: place; }
  .p-trow-body { grid-area: body; }
  .p-trow-side { grid-area: side; flex-direction: row; align-items: center; justify-content: space-between; }
  .p-trow-rank { font-size: 18px; }
  .p-trow-icon { width: 30px; height: 30px; font-size: 15px; }
  .p-trow-name { font-size: 17px; }
  .p-trow-votes { flex: 1; }
}
/* «Показать больше» — следующие 15 серверов */
.p-more { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.p-more-note { font-size: 13px; color: var(--p-muted); }

/* правила голосования в кабинете */
.p-rules { margin: 0; padding-left: 20px; font-size: 14px; }
.p-rules li { margin: 6px 0; }

@media (max-width: 720px) {
  .p-vote-bar { border-left-width: 4px; }
}

/* ---------- поинты: баланс, пакеты, способы оплаты ---------- */
.p-lk-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--p-amber);
  color: #32240a;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.p-balance { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.p-balance-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--p-navy);
}
.p-balance-unit { font-size: 15px; font-weight: 700; color: var(--p-muted); }

.p-packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 10px 0 0;
}
.p-pack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: #fff;
}
.p-pack-title { font-weight: 800; font-size: 16px; color: var(--p-navy); }
.p-pack-points { font-size: 22px; font-weight: 800; color: var(--p-amber-d); }
.p-pack-points span { font-size: 13px; font-weight: 700; color: var(--p-muted); }
.p-pack-price { font-size: 15px; font-weight: 700; }
.p-pack-note { font-size: 13px; color: var(--p-muted); }
.p-pack-methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.p-pack form { margin-top: auto; }
.p-method {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  background: #fffdf7;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.p-method input { margin: 0; }

/* «только после регистрации» на странице заявки */
.p-need-login { border-left: 4px solid var(--p-amber); }
.p-need-login h2 { margin-top: 0; }

html[data-theme="dark"] .p-balance-num { color: var(--p-ink); }
html[data-theme="dark"] .p-pack,
html[data-theme="dark"] .p-method {
  background: #1c150d;
  border-color: var(--p-line);
  color: var(--p-ink);
}
html[data-theme="dark"] .p-pack-title { color: var(--p-ink); }
html[data-theme="dark"] .p-pack-points { color: var(--p-amber); }

/* ---------- языки сервера: флажки в списках и в топах ---------- */
.p-langs { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.p-lang-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: middle;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.p-langs { gap: 6px; }
.p-langs-word {
  font-size: 11px;
  font-weight: 700;
  color: var(--p-muted);
  white-space: nowrap;
}
.p-list-compact .p-lang-flag { width: 16px; height: 12px; }

/* вкладочка «языки сервера»: глобус и число языков вместо ряда флажков */
.p-langtab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--p-line);
  border-radius: 7px;
  background: transparent;
  color: var(--p-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  flex: none;
}
.p-langtab:hover, .p-langtab[aria-expanded="true"] {
  border-color: var(--p-amber);
  background: rgba(217, 164, 65, .14);
  color: var(--p-ink);
}
.p-langtab svg { display: block; }
.p-langtab b { font-weight: 800; }
/* в тёмной теме рамка --p-line почти сливается с карточкой, а вкладочка
   должна выглядеть нажимаемой */
html[data-theme="dark"] .p-langtab { border-color: rgba(255, 255, 255, .22); }
/* на тёмных плитах топов вкладочка светлая, как соседние теги */
.p-trow .p-langtab {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .10);
  color: #f4ecd8;
}
.p-trow .p-langtab:hover, .p-trow .p-langtab[aria-expanded="true"] {
  border-color: var(--p-amber);
  background: rgba(230, 180, 90, .26);
}
.p-trow .p-langs-word { color: #e2d6bb; }

/* попап со списком языков: кладётся в <body> скриптом из base.html,
   чтобы его не срезали списки с overflow: hidden */
.p-langtab-pop {
  position: fixed;
  z-index: 60;
  display: none;
  max-width: min(260px, calc(100vw - 16px));
  padding: 10px 12px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: var(--p-card);
  box-shadow: 0 12px 28px rgba(9, 12, 22, .28);
}
.p-langtab-pop.open { display: block; }
.p-langtab-title { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--p-muted); }
.p-langtab-list { display: grid; gap: 4px; }
.p-langtab-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--p-ink); white-space: nowrap; }
.p-langtab-multi { display: block; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--p-amber-d); }
html[data-theme="dark"] .p-langtab-multi { color: var(--p-amber); }

/* выбор языков в форме заявки: флажок рядом с названием языка */
.p-lang-pick-block { margin-top: 10px; }
.p-lang-pick { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
/* особый класс, а не .p-lang-opt: тот занят меню языков в шапке (width:100%, тёмный) */
.p-langsel-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 160px;
  font-size: 13px;
  color: var(--p-ink);
  cursor: pointer;
}
.p-langsel-opt input { margin: 0; }
.p-lang-pick-block .p-check { margin-top: 10px; }

/* перенос даты старта владельцем — в «Моих серверах» */
.p-start-change {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px dashed var(--p-line);
  border-radius: 10px;
}
.p-start-change form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-start-change label { font-size: 13px; font-weight: 700; color: var(--p-ink); }
.p-start-change input[type="date"] { max-width: 190px; }
.p-start-change .p-hint { margin: 7px 0 0; font-size: 12.5px; color: var(--p-muted); }
html[data-theme="dark"] .p-start-change { background: #1c150d; }

/* кнопка «голосуй» для сайта владельца и подтверждение домена — в кабинете портала */
.p-btnbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.p-sizetab {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-navy);
  background: #f6efdf;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  cursor: pointer;
}
.p-sizetab:hover { background: #efe4cd; }
.p-sizetab.on { background: var(--p-navy); border-color: var(--p-navy); color: #fff; }

.p-btncard { padding: 14px 0 6px; border-top: 1px dashed var(--p-line); }
.p-btncard:first-child { border-top: 0; }
.p-btncard h3 { font-size: 15px; margin: 0 0 6px; color: var(--p-ink); }
.p-btnprev {
  display: flex;
  justify-content: center;
  padding: 10px;
  margin: 10px 0;
  background: #191720;
  border: 1px solid var(--p-line);
  border-radius: 10px;
}
.p-btnprev img { max-width: 100%; height: auto; }
.p-code {
  width: 100%;
  padding: 9px 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--p-ink);
  background: #f7f2e6;
  border: 1px solid var(--p-line);
  border-radius: 9px;
  resize: vertical;
}
.p-codeword {
  padding: 1px 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--p-ink);
  background: #f2ead8;
  border: 1px solid var(--p-line);
  border-radius: 6px;
  word-break: break-all;
}
.p-code-line {
  margin: 8px 0;
  padding: 8px 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--p-ink);
  background: #f2ead8;
  border: 1px dashed var(--p-line);
  border-radius: 8px;
  word-break: break-all;
}

.p-verify {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fbf6ea;
  border: 1px solid var(--p-line);
  border-radius: 10px;
}
.p-verify.ok { background: #f3f8ef; border-color: #cfe3c6; }
.p-verify .p-seo { margin: 6px 0; }
.p-vline { margin: 0 0 6px; font-size: 13.5px; color: var(--p-ink); }
.p-vline.ok { color: #2f6b25; }
.p-vline.no { color: #9a5a12; }
.p-vok { color: #2f6b25; }
.p-vno { color: #9a5a12; }
.p-vmark {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #2f6b25;
  background: #eef6ea;
  border: 1px solid #cfe3c6;
  border-radius: 6px;
}

/* видно только выбранный размер кнопки */
.p-btns[data-size="468x60"] .p-btnone:not([data-size="468x60"]),
.p-btns[data-size="200x50"] .p-btnone:not([data-size="200x50"]),
.p-btns[data-size="88x31"] .p-btnone:not([data-size="88x31"]) { display: none; }

html[data-theme="dark"] .p-sizetab { background: #1c150d; border-color: var(--p-line); color: var(--p-ink); }
html[data-theme="dark"] .p-sizetab:hover { background: #2a2116; }
html[data-theme="dark"] .p-sizetab.on { background: #96702a; border-color: #96702a; color: #fff; }
html[data-theme="dark"] .p-btnprev { background: #12100a; }
html[data-theme="dark"] .p-code,
html[data-theme="dark"] .p-codeword,
html[data-theme="dark"] .p-code-line { background: #1c150d; border-color: var(--p-line); color: var(--p-ink); }
html[data-theme="dark"] .p-verify { background: #1c150d; }
html[data-theme="dark"] .p-verify.ok { background: #17210f; border-color: #3d5233; }
html[data-theme="dark"] .p-vline.ok,
html[data-theme="dark"] .p-vok { color: #9cd07f; }
html[data-theme="dark"] .p-vline.no,
html[data-theme="dark"] .p-vno { color: #e5b062; }
html[data-theme="dark"] .p-vmark { background: #17210f; border-color: #3d5233; color: #9cd07f; }
/* кнопки в блоке подтверждения домена — в одну строку, как в остальных карточках */
.p-verify .p-own-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }