/* =========================================================
   EGORLAND — Дизайн-система «Геральдическое государство Егоров»
   Палитра: королевский синий (бренд) + золото (почёт) + бумага.
   Шрифты: Unbounded (дисплей/заголовки) + Golos Text (тело).
   ========================================================= */
:root {
  /* Бренд / роль ЕГОР — королевский синий (герб государства) */
  --egor-primary: #2747a8;
  --egor-bg: #ebeefb;
  --egor-dark: #182f78;
  --egor-light: #c3cdee;

  /* Роль ПОЧЁТНЫЙ ЕГОР — золото (Гоши и Жоры — золотые граждане) */
  --honorary-primary: #b07d12;
  --honorary-bg: #f8efd6;
  --honorary-dark: #855d09;
  --honorary-light: #e6d196;

  /* Роль НАБЛЮДАТЕЛЬ — приглушённый сланец */
  --observer-primary: #6e7c92;
  --observer-bg: #eef1f6;
  --observer-dark: #515e72;

  /* Геральдическое золото — акцентная деталь (рамки, гербы, активные грани) */
  --gold: #c79328;
  --gold-soft: #e7cf8a;
  --success: #2f9e6a;

  /* Нейтральные / «бумага». ВНИМАНИЕ: эти токены ПЕРЕКРЫТЫ воздушно-холодной
     палитрой во втором :root ниже по файлу (см. «Нейтральные — воздушные»).
     Живые значения цвета — там; здесь оставлены как исторический слой. */
  --bg: #f3efe6;
  --surface: #fffdf8;
  --surface2: #f7f2e9;
  --border: rgba(40,30,12,0.10);
  --border-strong: rgba(40,30,12,0.18);
  --text: #1a2030;          /* тёмные чернила */
  --text-secondary: #4a5468;
  --text-muted: #8a8576;
  --shadow-sm: 0 1px 3px rgba(40,30,12,0.07), 0 1px 2px rgba(40,30,12,0.04);
  --shadow: 0 2px 10px rgba(40,30,12,0.09), 0 1px 3px rgba(40,30,12,0.05);
  --shadow-lg: 0 12px 36px rgba(24,47,120,0.14), 0 3px 10px rgba(40,30,12,0.08);
  --shadow-hover: 0 6px 20px rgba(24,47,120,0.13), 0 2px 6px rgba(40,30,12,0.07);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --font: 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Unbounded', 'Golos Text', sans-serif;
  --sidebar-w: 270px;
  --right-w: 290px;
  --transition: 0.18s ease;
  /* Центрированная оболочка: три колонки не растягиваются по краям ультраширокого
     экрана, а собираются в центр. --gutter — симметричное внешнее поле (0 на узких). */
  --shell: 1440px;
  --gutter: max(0px, calc((100vw - var(--shell)) / 2));
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  /* «Пергамент»: тёплая подложка + еле заметная текстура + геральдическое свечение сверху */
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 78% -8%, rgba(39,71,168,0.07), transparent 60%),
    radial-gradient(900px 460px at 12% 4%, rgba(199,147,40,0.06), transparent 55%),
    repeating-linear-gradient(45deg, rgba(40,30,12,0.018) 0 2px, transparent 2px 7px);
  /* без background-attachment: fixed — он форсирует репейнт вьюпорта при скролле
     на мобильных (тормоза). Геральдическое свечение остаётся, доносится сверху. */
}
/* Дудл-фон в духе телеграм-каналов: тематический тайл (замок, ноут, кот, монах…)
   отдельным фикс-слоем под контентом. Прозрачность/плотность правятся здесь. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('/pattern.svg');
  background-repeat: repeat;
  background-size: 600px 600px; /* плотный тайл — частый узор */
  /* но тонкий: водяной знак, а не «ковёр» под текстом — иначе длинный текст
     (Уложение) на узоре читается неопрятно. Плотность даёт фактуру, opacity — деликатность. */
  opacity: 0.1;
}
a { color: inherit; text-decoration: none; }

/* ===== BOOT-ЭКРАН (первичная загрузка) ===== */
#boot {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(39,71,168,0.08), transparent 60%),
    radial-gradient(900px 460px at 12% 4%, rgba(199,147,40,0.07), transparent 55%),
    var(--bg, #eef1f9);
  transition: opacity .42s ease, visibility .42s ease;
}
#boot.boot-hide { opacity: 0; visibility: hidden; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; }
.boot-emblem { filter: drop-shadow(0 8px 22px rgba(39,71,168,.20)); animation: bootPulse 2.2s ease-in-out infinite; }
.boot-word {
  font-family: 'Unbounded', 'Golos Text', sans-serif; font-weight: 800;
  font-size: 30px; letter-spacing: -.02em; color: var(--egor-primary, #2747a8);
}
.boot-bar {
  width: 188px; height: 4px; border-radius: 99px; margin-top: 2px;
  background: rgba(39,71,168,.14); overflow: hidden; position: relative;
}
.boot-bar span {
  position: absolute; top: 0; left: -42%; height: 100%; width: 42%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--egor-primary, #2747a8), transparent);
  animation: bootSlide 1.15s ease-in-out infinite;
}
.boot-caption { font-size: 13px; color: var(--text-muted, #646b88); letter-spacing: .2px; }
@keyframes bootPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .92; } }
@keyframes bootSlide { 0% { left: -42%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .boot-emblem { animation: none; }
  .boot-bar span { animation: none; left: 0; width: 100%; opacity: .55; }
}

/* ===== ДИСПЛЕЙНАЯ ТИПОГРАФИКА (Unbounded) ===== */
.sidebar-logo, .auth-logo-title, .auth-title, .page-title, .modal-title,
.profile-name, .loading-logo, .chat-list-header, .channel-name, .empty-state-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.page-title, .auth-logo-title, .profile-name, .loading-logo { font-weight: 800; }

/* ===== РАЗМЕРЫ SVG-ИКОНОК В КОНТЕЙНЕРАХ (замена эмодзи) ===== */
.empty-state-icon svg { width: 46px; height: 46px; color: var(--text-muted); stroke-width: 1.6; }
.chat-empty-icon svg { width: 42px; height: 42px; stroke-width: 1.6; }
.role-card-icon svg { width: 28px; height: 28px; }
.modal-close svg { width: 18px; height: 18px; }
.upload-area-icon svg { width: 28px; height: 28px; }
.verify-banner-icon svg { width: 22px; height: 22px; color: var(--egor-primary); }
.search-bar-icon svg { width: 16px; height: 16px; }
.send-btn svg { width: 18px; height: 18px; }
.profile-meta-item svg { width: 15px; height: 15px; vertical-align: -2px; }
.btn svg { width: 16px; height: 16px; }
.btn-icon svg { width: 17px; height: 17px; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font); }
img { max-width: 100%; display: block; }

/* ===== LAYOUT ===== */
#app {
  display: flex;
  min-height: 100vh;
}

#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  position: fixed;
  left: var(--gutter); top: 0;
  z-index: 100;
  flex-shrink: 0;
}

#main {
  flex: 1;
  min-width: 0;
  margin-left: calc(var(--sidebar-w) + var(--gutter));
  margin-right: var(--gutter);
  min-height: 100vh;
}
/* Колонка резервирует место под правую панель только там, где она есть
   (Площадь, body.has-right-panel) и только на десктопе. На узких экранах
   панель скрыта — место резервировать не нужно. */
@media (min-width: 901px) {
  body.has-right-panel #main { margin-right: calc(var(--right-w) + var(--gutter)); }
}

#content {
  min-height: 100vh;
  padding: 28px 24px;
  max-width: 700px;
  margin: 0 auto;
}

/* ===== Режимы страниц (вместо инлайн-стилей из JS) ===== */
/* Паспорт — широкая колонка */
body.page-profile #content { max-width: 760px; }
/* Беседы — во всю ширину доступной колонки */
body.page-chats #content { max-width: 100%; padding: 24px; }
/* Авторизация — без сайдбара, во весь экран */
body.page-auth #sidebar { display: none; }
body.page-auth #main { margin: 0; }
body.page-auth #content { max-width: 100%; padding: 0; }

#right-panel {
  width: var(--right-w);
  position: fixed;
  right: var(--gutter); top: 0;
  min-height: 100vh;
  padding: 28px 16px 24px;
  overflow-y: auto;
}

/* ===== SIDEBAR ===== */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--surface);
  border-right: 1.5px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-logo {
  padding: 22px 20px 18px;
  font-size: 19px;
  font-weight: 800;
  color: var(--egor-dark);
  letter-spacing: -0.3px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* Геральдический щит-эмблема с монограммой «Э» */
.sidebar-logo-icon {
  width: 38px; height: 40px;
  background: linear-gradient(160deg, var(--egor-primary), var(--egor-dark));
  border-radius: 30% 30% 45% 45% / 26% 26% 64% 64%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1.5px solid var(--gold);
  box-shadow: 0 3px 10px rgba(24,47,120,0.35), inset 0 0 0 2px rgba(255,253,248,0.10);
}

.sidebar-user {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1.5px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.sidebar-user:hover { background: var(--bg); }
.sidebar-user-name {
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.sidebar-user-role {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 3px;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 10px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}
.nav-item:hover {
  background: var(--bg);
  color: var(--text);
}
.nav-item.active {
  background: var(--egor-bg);
  color: var(--egor-dark);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--gold);
}
.nav-item-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.nav-item-icon svg { width: 21px; height: 21px; }
/* Бейдж непрочитанных Бесед на навпункте (десктоп — прижат к концу строки). */
.nav-item .nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--egor-primary); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: 20px; flex-shrink: 0;
}
.nav-item.active .nav-badge { background: var(--gold); color: #3a2a05; }
.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.sidebar-bottom {
  padding: 10px;
  border-top: 1.5px solid var(--border);
  flex-shrink: 0;
}

/* ===== ROLE BADGES ===== */
.role-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1.5px solid;
  white-space: nowrap;
  line-height: 1.4;
}
.role-badge.egor {
  color: var(--egor-primary);
  border-color: var(--egor-light);
  background: var(--egor-bg);
}
.role-badge.honorary_egor {
  color: var(--honorary-dark);
  border-color: var(--honorary-light);
  background: var(--honorary-bg);
}
.role-badge.observer {
  color: var(--observer-dark);
  border-color: #c8d8e8;
  background: var(--observer-bg);
}

.verified-badge {
  display: inline-flex; align-items: center;
  color: var(--egor-primary);
  font-size: 13px;
  font-weight: 700;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700;
  transition: all var(--transition);
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.btn-primary {
  background: var(--egor-primary);
  color: white;
  box-shadow: 0 2px 6px rgba(39,71,168,0.30);
}
.btn-primary:hover {
  background: var(--egor-dark);
  box-shadow: 0 3px 10px rgba(39,71,168,0.40);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--observer-primary);
  color: var(--text);
}
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-danger:hover { background: var(--danger-dark); }
/* Текстовая danger-кнопка (опасное действие без сплошной заливки) — единый токен
   вместо инлайнового #d43a3a, читаемый ховер. */
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { background: rgba(212,58,58,0.10); color: var(--danger-dark); }
.btn-sm { padding: 6px 13px; font-size: 12.5px; }
.btn-lg { padding: 12px 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.btn-icon { padding: 7px; border-radius: var(--radius-xs); }
.btn-subscribe {
  background: var(--honorary-primary);
  color: white;
  box-shadow: 0 2px 6px rgba(176,125,18,0.28);
}
.btn-subscribe:hover { background: var(--honorary-dark); transform: translateY(-1px); }
.btn-subscribe.subscribed {
  background: var(--surface);
  border-color: var(--honorary-light);
  color: var(--honorary-primary);
  box-shadow: none;
}

/* ===== CARDS ===== */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card-body { padding: 20px; }

/* ===== POSTS ===== */
.post {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  /* Грань-сословие слева (inset, клипится по радиусу) — единый язык с золотой
     гранью активного пункта сайдбара. Цвет роли автора приходит в --spine из JS. */
  box-shadow: var(--shadow-sm), inset 3px 0 0 0 var(--spine, var(--egor-light));
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.post:hover {
  box-shadow: var(--shadow), inset 3px 0 0 0 var(--spine, var(--egor-primary));
  border-color: rgba(39,71,168,0.15);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .post:hover { transform: none; } }

.post-header {
  display: flex; align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
}
.post-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
}
.post-user { flex: 1; min-width: 0; }
.post-name {
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  cursor: pointer;
  line-height: 1.3;
}
.post-name:hover span:first-child { color: var(--egor-primary); }
.post-meta {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}

.post-content {
  padding: 12px 18px 14px;
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.post-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}

.post-actions {
  display: flex;
  gap: 2px;
  padding: 6px 12px 10px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.reaction-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  transition: all var(--transition);
  cursor: pointer;
  background: none; border: none;
  line-height: 1;
}
.reaction-btn:hover {
  background: var(--surface2);
  color: var(--text-secondary);
}
.reaction-btn:active { transform: scale(0.92); }
.reaction-btn.active {
  color: var(--egor-dark);
  background: var(--egor-bg);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--egor-light);
}
.reaction-btn .count { font-size: 12.5px; min-width: 12px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .reaction-btn:active { transform: none; } }

.comment-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  transition: all var(--transition);
  cursor: pointer;
  background: none; border: none;
}
.comment-btn:hover { background: var(--surface2); color: var(--text-secondary); }
.comment-btn:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) { .comment-btn:active { transform: none; } }

/* Comments section */
.comments-section {
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  background: var(--surface2);
}
.comment {
  display: flex; gap: 10px;
  margin-bottom: 10px;
}
.comment-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.comment-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 13px;
  flex: 1;
}
.comment-author {
  font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px;
}
.comment-text { font-size: 13.5px; }
.comment-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* Подвал комментария: «Одобрить» 👍 + время в один ряд */
.comment-foot { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.comment-foot .comment-time { margin-top: 0; }
.comment-like {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 2px 7px; border-radius: 20px;
  color: var(--text-muted); font-size: 12px; font-weight: 700; line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.comment-like:hover { background: var(--bg); color: var(--text); }
.comment-like.active { color: var(--egor-primary); background: var(--egor-bg); }
.comment-like .count { font-variant-numeric: tabular-nums; }

/* Удаление своего (или своего поста) комментария — корзина в углу пузыря */
.comment-del {
  margin-left: auto; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.comment:hover .comment-del,
.comment:focus-within .comment-del { opacity: 0.6; }
.comment-del:hover, .comment-del:focus-visible { opacity: 1; background: var(--bg); color: var(--danger); }
.comment-del svg { width: 14px; height: 14px; }

/* Кнопка «Ответить» — рядом с удалением, проявляется при наведении на комментарий */
.comment-reply {
  margin-left: auto; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); opacity: 0;
  font-size: 13px; line-height: 1;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.comment-reply + .comment-del { margin-left: 0; }
.comment:hover .comment-reply,
.comment:focus-within .comment-reply { opacity: 0.6; }
.comment-reply:hover, .comment-reply:focus-visible { opacity: 1; background: var(--bg); color: var(--egor-primary); }
.comment-reply svg { width: 14px; height: 14px; }

/* Упоминание @username в тексте — кликабельная ссылка на Паспорт */
.mention {
  color: var(--egor-dark); font-weight: 600; cursor: pointer;
  border-radius: 4px; padding: 0 1px;
}
.mention:hover { text-decoration: underline; background: var(--egor-bg); }

.comment-input-row {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 10px;
}
.comment-textarea {
  flex: 1;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  outline: none;
  transition: border-color var(--transition);
  background: var(--surface);
}
.comment-textarea:focus { border-color: var(--egor-primary); }

/* ===== COMPOSE ===== */
.compose-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.compose-top {
  display: flex; gap: 12px; align-items: flex-start;
}
.compose-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.compose-textarea {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 14.5px;
  resize: none;
  min-height: 48px;
  max-height: 300px;
  color: var(--text);
  background: transparent;
  line-height: 1.5;
}
.compose-textarea::placeholder { color: var(--text-muted); }
.compose-bottom {
  display: flex; align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.compose-actions { display: flex; gap: 2px; flex: 1; }
.compose-btn {
  padding: 7px;
  border-radius: 8px;
  color: var(--text-muted);
  transition: all var(--transition);
  font-size: 17px;
  background: none; border: none; cursor: pointer;
}
.compose-btn:hover { background: var(--bg); color: var(--egor-primary); }

/* ===== TABS ===== */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
  gap: 0;
}
.tab-btn {
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 700;
  color: var(--text-muted);
  border: none; background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--egor-primary); border-bottom-color: var(--egor-primary); }

/* ===== FORMS ===== */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-size: 11px;
}
.form-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--surface);
  color: var(--text);
}
.form-input:focus {
  border-color: var(--egor-primary);
  box-shadow: 0 0 0 3px rgba(39,71,168,0.12);
}
.form-input.error { border-color: var(--danger); }
.form-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 5px;
  display: none;
}
.form-error.show { display: block; }

.form-textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font);
  color: var(--text);
}
.form-textarea:focus {
  border-color: var(--egor-primary);
  box-shadow: 0 0 0 3px rgba(39,71,168,0.12);
}

.form-select {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* ===== AUTH PAGES ===== */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(39,71,168,0.14), transparent 60%),
    radial-gradient(600px 400px at 85% 110%, rgba(199,147,40,0.12), transparent 55%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 440px; /* единая ширина для входа и регистрации — карточка не «прыгает» при переходе */
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo-title {
  font-size: 28px; font-weight: 800;
  color: var(--egor-dark);
  letter-spacing: -0.5px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-logo-sub {
  font-size: 13px; color: var(--text-muted);
  margin-top: 5px;
}
.auth-title {
  font-size: 20px; font-weight: 800;
  margin-bottom: 22px;
  text-align: center;
  color: var(--text);
}
.auth-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-secondary);
}
.auth-footer a {
  color: var(--egor-primary);
  font-weight: 700;
  cursor: pointer;
}
.auth-footer a:hover { text-decoration: underline; }

/* Role selection cards */
.role-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 20px;
}
.role-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}
.role-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.role-card.selected-egor { border-color: var(--egor-primary); background: var(--egor-bg); }
.role-card.selected-honorary_egor { border-color: var(--honorary-primary); background: var(--honorary-bg); }
.role-card.selected-observer { border-color: var(--observer-primary); background: var(--observer-bg); }
.role-card-icon { font-size: 26px; margin-bottom: 7px; }
.role-card-name { font-size: 12.5px; font-weight: 700; }
.role-card-desc { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }

/* ===== Smart register (one-screen) ===== */
.reg-verdict {
  display: flex; align-items: center; gap: 9px;
  background: var(--egor-bg);
  border: 1.5px solid var(--egor-primary);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  /* --text (не secondary): тело вердикта на пастельной плашке (--egor-bg и др.)
     с secondary не дотягивало до WCAG AA 4.5:1. */
  font-size: 13.5px; color: var(--text); line-height: 1.4;
}
.reg-verdict svg { flex-shrink: 0; color: var(--egor-primary); }
.reg-verdict b { color: var(--text); }
/* Плашка вердикта в цвете определённого сословия — наглядный фидбэк регистрации. */
.reg-verdict--egor { background: var(--egor-bg); border-color: var(--egor-primary); }
.reg-verdict--egor svg { color: var(--egor-primary); }
.reg-verdict--honorary_egor { background: var(--honorary-bg); border-color: var(--honorary-primary); }
.reg-verdict--honorary_egor svg { color: var(--honorary-primary); }
.reg-verdict--observer { background: var(--observer-bg); border-color: var(--observer-primary); }
.reg-verdict--observer svg { color: var(--observer-dark); }
.reg-role-switch {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 7px; margin-top: 10px;
}
.reg-role-switch-label { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.reg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--border);
  background: var(--card-bg, #fff);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition);
}
.reg-chip:hover { border-color: var(--border-strong); }
.reg-chip.active { border-color: var(--egor-primary); background: var(--egor-bg); color: var(--egor-primary); }
.reg-chip svg { flex-shrink: 0; }
.reg-username {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 4px 0 4px;
  font-size: 13px; color: var(--text-secondary);
}
.reg-username b { color: var(--text); font-weight: 700; }
.reg-username a { font-size: 12.5px; cursor: pointer; color: var(--egor-primary); }
.reg-mode-toggle { display: inline-flex; gap: 6px; }

/* Инфо-блок роли на регистрации + «отскок» чипа (пасхалка про Устав) */
.reg-roleinfo {
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--surface2, #f7f2e9);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.reg-roleinfo-cap { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.reg-roleinfo-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; }
.reg-roleinfo-hint a { color: var(--egor-primary); font-weight: 600; cursor: pointer; }
.reg-roleinfo-hint a:hover { text-decoration: underline; }
@keyframes regChipShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.reg-chip-shake { animation: regChipShake 0.36s ease; }

/* Steps indicator */
.steps {
  display: flex; align-items: center;
  margin-bottom: 26px;
  position: relative;
}
.step {
  flex: 1; text-align: center;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-muted);
  position: relative;
}
.step::after {
  content: '';
  position: absolute;
  top: 13px; left: 50%;
  width: 100%; height: 2px;
  background: var(--border);
  z-index: 0;
}
.step:last-child::after { display: none; }
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  margin: 0 auto 5px;
  position: relative; z-index: 1;
  transition: all var(--transition);
}
.step.active .step-num { background: var(--egor-primary); border-color: var(--egor-primary); color: white; }
.step.done .step-num { background: var(--honorary-primary); border-color: var(--honorary-primary); color: white; }
.step.active { color: var(--egor-primary); }
.step.done { color: var(--honorary-primary); }

/* ===== PROFILE ===== */
.profile-cover {
  height: 180px;
  object-fit: cover;
  width: 100%;
}
.profile-header {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.profile-cover-area {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.profile-cover-area img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.profile-info {
  padding: 14px 22px 20px;
  position: relative;
}
.profile-avatar-wrap {
  position: absolute;
  top: -50px;
  left: 22px;
}
.profile-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.profile-actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.profile-name-row {
  margin-top: 50px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.profile-name {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere; /* длинное имя/ник без пробелов не выедет за карточку */
  margin: 0; /* сброс UA-отступа <h1> (имя гражданина — заголовок Паспорта) */
}
.profile-username {
  font-size: 13.5px; color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.profile-bio {
  font-size: 14px; line-height: 1.6;
  margin-top: 10px; color: var(--text-secondary);
}
.profile-meta-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
}
.profile-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-muted);
}
/* Статус присутствия в Паспорте: точка + «в сети / был в сети N назад» */
.profile-status .online-dot { width: 8px; height: 8px; }
.profile-stats {
  display: flex; gap: 20px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.profile-stat {
  text-align: center; cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.profile-stat:hover { background: var(--bg); }
.stat-value { font-size: 18px; font-weight: 800; color: var(--text); }
.stat-label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-top: 1px; }

/* ===== CHATS ===== */
.chat-layout {
  display: flex;
  height: calc(100vh - 56px);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chat-list-panel {
  width: 290px;
  border-right: 1.5px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  background: var(--surface2);
}
.chat-list-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
}
.chat-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chat-search-input {
  width: 100%;
  padding: 7px 11px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  outline: none;
  background: var(--bg);
  transition: border-color var(--transition);
}
.chat-search-input:focus { border-color: var(--egor-primary); background: var(--surface); }
.chat-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.chat-item {
  display: flex; gap: 11px; align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  transition: background var(--transition);
  border-bottom: 1px solid var(--border);
}
.chat-item:hover { background: var(--bg); }
.chat-item.active { background: var(--egor-bg); }
.chat-item-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--egor-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.chat-item-info { flex: 1; min-width: 0; }
.chat-item-name {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item-preview {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-item-time {
  font-size: 11px; color: var(--text-muted);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 3px;
}

.chat-view {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0;
  background: var(--surface);
}
.chat-view-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
}
.chat-view-name { font-size: 15px; font-weight: 700; }
.chat-view-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
/* Шапка DM кликабельна — ведёт в Паспорт собеседника */
.chat-view-peer {
  display: flex; align-items: center; gap: 12px;
  border-radius: 10px; padding: 2px 6px; margin: -2px -6px;
  transition: background var(--transition);
}
.chat-view-peer[onclick]:hover { background: var(--bg); }
/* Кнопка «назад» к списку бесед — видна только на мобильном (см. @media ≤768) */
.chat-back {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  margin: -4px 2px -4px -6px;
  border-radius: 50%; border: none; background: none;
  color: var(--text-secondary); cursor: pointer;
  transition: background var(--transition);
}
.chat-back:hover { background: var(--bg); }
.chat-back svg { width: 20px; height: 20px; }

.messages-area {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 18px 16px;
  display: flex; flex-direction: column;
  gap: 2px;
  background: var(--bg);
}
.message-group {
  display: flex; gap: 9px;
  margin-bottom: 6px;
  align-items: flex-end;
}
.message-group.own { flex-direction: row-reverse; }
.message-group-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.message-group-content {
  max-width: 68%;
  display: flex; flex-direction: column; gap: 2px;
}
.message-group.own .message-group-content { align-items: flex-end; }
.message-sender {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-muted);
  padding: 0 4px;
  margin-bottom: 1px;
}
.message-bubble {
  background: var(--surface);
  padding: 8px 13px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 100%;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
}
.message-group.own .message-bubble {
  background: var(--egor-primary);
  color: white;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 14px;
}
.message-time {
  font-size: 10.5px; color: var(--text-muted);
  padding: 0 4px;
}

/* Подвал сообщения: «Одобрить» 👍 + время. Кнопка проявляется на hover/focus,
   а при наличии лайков (has-likes) остаётся видимой со счётчиком. */
.message-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px;
}
.message-foot .message-time { padding: 0; }
.msg-like {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  padding: 1px 6px; border-radius: 20px;
  color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 1;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.message-group:hover .msg-like,
.message-group:focus-within .msg-like { opacity: 0.55; }
.msg-like.has-likes { opacity: 1; }
.msg-like:hover, .msg-like:focus-visible { opacity: 1; background: var(--bg); color: var(--text); }
.msg-like.active { opacity: 1; color: var(--egor-primary); background: var(--egor-bg); }
.msg-like .count { font-variant-numeric: tabular-nums; }
.msg-like .count:empty { display: none; }

.typing-indicator {
  padding: 4px 18px;
  font-size: 12px; color: var(--text-muted);
  font-style: italic;
  min-height: 20px;
  background: var(--surface);
}

.message-input-area {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex; gap: 9px; align-items: flex-end;
  background: var(--surface);
}
.message-input {
  flex: 1;
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  resize: none;
  min-height: 42px;
  max-height: 120px;
  outline: none;
  transition: border-color var(--transition);
  font-family: var(--font);
  background: var(--bg);
}
.message-input:focus { border-color: var(--egor-primary); background: var(--surface); }
.send-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--egor-primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  box-shadow: 0 2px 6px rgba(39,71,168,0.3);
}
.send-btn:hover { background: var(--egor-dark); transform: scale(1.05); }

.chat-empty {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-muted);
  gap: 12px;
  font-size: 14px;
  background: var(--bg);
}
.chat-empty-icon { font-size: 44px; }

/* ===== CHANNELS ===== */
.channel-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.channel-card:hover {
  box-shadow: var(--shadow);
  border-color: rgba(176,125,18,0.2);
}
.channel-header {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 12px;
}
.channel-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--honorary-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--honorary-light);
}
.channel-info { flex: 1; }
.channel-name { font-size: 16px; font-weight: 800; cursor: pointer; letter-spacing: -0.2px; }
.channel-name:hover { color: var(--honorary-primary); }
.channel-sub-count { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.channel-desc { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; }
.channel-actions { display: flex; gap: 8px; }

.channel-post {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

/* ===== VIDEOS ===== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.video-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.video-card:hover {
  border-color: rgba(39,71,168,0.2);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.video-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #1a2333;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  position: relative;
  overflow: hidden;
}
.video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.video-duration {
  position: absolute;
  bottom: 6px; right: 7px;
  background: rgba(0,0,0,0.82);
  color: white;
  font-size: 11px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}
.video-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity var(--transition);
}
.video-card:hover .video-play-overlay { opacity: 1; }
.video-play-btn {
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.video-info { padding: 10px 13px 12px; }
.video-title {
  font-size: 13.5px; font-weight: 700;
  line-height: 1.35;
  margin-bottom: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.video-meta {
  font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.video-author { display: flex; align-items: center; gap: 5px; }
.video-author-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.video-player-wrap {
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
  margin-bottom: 18px;
  box-shadow: var(--shadow-lg);
}
.video-player-wrap video { width: 100%; height: 100%; }

/* ===== GAMES ===== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.game-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.game-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(39,71,168,0.2);
}
.game-thumbnail {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: linear-gradient(135deg, var(--egor-bg), var(--honorary-bg));
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  position: relative;
}
.game-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.game-info { padding: 10px 12px 12px; }
.game-title { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.game-meta { font-size: 11.5px; color: var(--text-muted); }
.game-top-score {
  background: var(--bg);
  border-radius: 6px;
  padding: 4px 7px;
  margin-top: 6px;
  font-size: 11px;
  display: flex; align-items: center; gap: 5px;
  color: var(--text-secondary);
}
.game-plays-badge {
  position: absolute;
  top: 7px; right: 7px;
  background: rgba(0,0,0,0.72);
  color: white;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.game-player-frame {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  background: #000;
}

/* ===== RIGHT PANEL ===== */
.right-panel-section { margin-bottom: 22px; }
.right-panel-title {
  font-size: 11px; font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.top-egor-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.top-egor-item:hover { background: var(--bg); }
.top-egor-rank {
  width: 20px;
  font-size: 12px; font-weight: 800; color: var(--text-muted);
  text-align: center; flex-shrink: 0;
}
.top-egor-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.top-egor-info { flex: 1; min-width: 0; }
.top-egor-name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-egor-followers { font-size: 11px; color: var(--text-muted); }

/* ===== ПРАВАЯ ПАНЕЛЬ — единая «канцелярская» система виджетов ===== */
/* Один карточный шкаф для всех сводок: Пульс, «Кого признать», Зал славы. */
.rp-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
/* Строка-ведомость: аватар · имя/мета · действие/значение */
.rp-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; }
.rp-row + .rp-row { border-top: 1px solid var(--border); }
.rp-row.clickable { cursor: pointer; transition: background var(--transition); }
.rp-row.clickable:hover { background: var(--bg); }
.rp-row-info { flex: 1; min-width: 0; }
.rp-row-info.clickable { cursor: pointer; }
.rp-row-name {
  font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-row-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: baseline; gap: 4px; min-width: 0; }
/* Ранг усыхает с многоточием, а значение (N ЕГ) закреплено — иначе при длинном
   ранге первым обрезался бы именно показатель, ради которого строка и нужна. */
.rp-meta-rank { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-meta-val { flex-shrink: 0; }
/* Формальный номер ранга вместо эмодзи-медалей — в тон Канцелярии */
.rp-rank {
  width: 20px; flex-shrink: 0; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.rp-rank.g1 { color: var(--gold); }
.rp-rank.g2 { color: #9aa3ad; }
.rp-rank.g3 { color: #c08457; }
/* Аватар с уголковой точкой присутствия */
.rp-ava { position: relative; flex-shrink: 0; cursor: pointer; }
.rp-ava .online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border: 2px solid var(--surface);
}
.rp-follow { flex-shrink: 0; padding: 5px 13px; }

/* Пульс: онлайн-счётчик + недавно вошедшие */
.rp-pulse { padding: 13px; }
.rp-pulse-stat { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.rp-pulse-stat b {
  font-family: var(--font-display); font-size: 17px; color: var(--egor-dark);
  font-variant-numeric: tabular-nums; margin-right: 2px;
}
/* Сигнатурный «живой пульс» — мягкая волна у точки онлайна */
.rp-pulse .online-dot { animation: rpPulse 2.4s ease-out infinite; }
@keyframes rpPulse {
  0% { box-shadow: 0 0 0 0 rgba(47,158,106,0.40); }
  70% { box-shadow: 0 0 0 7px rgba(47,158,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,158,106,0); }
}
@media (prefers-reduced-motion: reduce) { .rp-pulse .online-dot { animation: none; } }
.rp-recent { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.rp-recent-label {
  font-size: 10.5px; color: var(--text-muted); margin-bottom: 9px;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
}
.rp-recent-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Подвал панели */
.rp-foot {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.7; text-align: center;
}
.rp-foot a { text-decoration: underline; }

/* ===== ОНБОРДИНГ: полнота Паспорта ===== */
.profile-complete-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px;
}
.profile-complete-todo { font-size: 12.5px; color: var(--text-secondary); }

/* ===== PAGE HEADER ===== */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.page-title {
  font-size: 24px; font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
  display: flex; align-items: center; gap: 11px;
  margin: 0; /* сброс UA-отступов <h1> — заголовок страницы теперь семантический h1 */
}
/* #content получает программный фокус при SPA-навигации (перенос фокуса на новый
   экран для скринридера) — без видимого кольца, т.к. фокус не клавиатурный. */
#content:focus { outline: none; }
/* Геральдическая печать-ромб (золото = государственный акцент) перед заголовком */
.page-title::before {
  content: ''; flex-shrink: 0;
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 1.5px;
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.page-subtitle {
  font-size: 11px; color: var(--text-muted);
  margin-top: 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

/* ===== EMPTY STATES ===== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state-icon { font-size: 52px; margin-bottom: 14px; }
.empty-state-title {
  font-size: 17px; font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.empty-state-text {
  font-size: 13.5px; line-height: 1.6;
  max-width: 280px;
  margin: 0 auto 18px;
  color: var(--text-muted);
}

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(22,32,46,0.55);
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 500px;
  width: 100%;
  /* dvh учитывает динамическую панель браузера на мобильном — иначе низ модалки
     (кнопки) уходит под адресную строку. Фолбэк vh для старых браузеров — выше. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--border);
  animation: modalIn 0.18s ease;
}
@keyframes modalIn {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-header {
  padding: 18px 22px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 17px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-close {
  width: 30px; height: 30px;
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-muted);
  cursor: pointer; background: none; border: none;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body { padding: 18px 22px; }
.modal-footer {
  padding: 0 22px 18px;
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ===== TOAST ===== */
#toast-container {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: white;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s ease;
  max-width: 300px;
  pointer-events: all;
  display: flex; align-items: center; gap: 8px;
}
/* Затемнённые варианты — белый текст проходит WCAG AA (светлые primary давали ~4:1). */
.toast.success { background: var(--honorary-dark); }
.toast.error { background: var(--danger); }
.toast.info { background: var(--egor-dark); }
@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ===== USER CARDS ===== */
.user-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.user-card:hover {
  box-shadow: var(--shadow);
  border-color: rgba(39,71,168,0.2);
  transform: translateY(-1px);
}
.user-card-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.user-card-info { flex: 1; min-width: 0; }
.user-card-name {
  font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.user-card-username { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.user-card-bio {
  font-size: 12.5px; color: var(--text-secondary);
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ===== MISC ===== */
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.fw-bold { font-weight: 700; }
.hidden { display: none !important; }
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-screen {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh; gap: 18px;
}
.loading-logo { font-size: 28px; font-weight: 800; color: var(--egor-primary); }
.loading-caption { font-size: 13px; color: var(--text-muted); letter-spacing: .2px; }
.loading-spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--egor-primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ===== CATEGORY FILTERS ===== */
.category-chips {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.category-chip {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12.5px; font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.category-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg);
}
.category-chip.active {
  border-color: var(--egor-primary);
  background: var(--egor-bg);
  color: var(--egor-primary);
}

/* ===== UPLOAD AREAS ===== */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.upload-area:hover { border-color: var(--egor-primary); background: var(--egor-bg); }
.upload-area-icon { font-size: 30px; margin-bottom: 7px; }
.upload-area-text { font-size: 13px; color: var(--text-muted); }

/* ===== VERIFICATION BANNER ===== */
.verify-banner {
  background: var(--egor-bg);
  border: 1.5px solid var(--egor-light);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.verify-banner-icon { font-size: 24px; flex-shrink: 0; }
.verify-banner-text { flex: 1; }
.verify-banner-title { font-size: 13.5px; font-weight: 700; }
.verify-banner-sub { font-size: 12.5px; color: var(--text-secondary); }

/* ===== ONLINE INDICATOR ===== */
.online-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--success); /* зелёный «в сети» — совпадает с цветом пульс-волны (rpPulse) */
  flex-shrink: 0;
}
.online-dot.offline { background: var(--text-muted); }

/* ===== LEADERBOARD ===== */
.leaderboard-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.leaderboard-rank {
  width: 22px; text-align: center;
  font-size: 13px; font-weight: 800;
  color: var(--text-muted);
  flex-shrink: 0;
}
.leaderboard-rank.gold { color: #f39c12; }
.leaderboard-rank.silver { color: #95a5a6; }
.leaderboard-rank.bronze { color: #cd7f32; }

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== SEARCH ===== */
.search-bar {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 28px;
  padding: 8px 16px;
  gap: 10px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-bar-icon { font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
.search-bar-input {
  flex: 1; border: none; background: none;
  font-size: 13.5px; outline: none; color: var(--text);
}
.search-bar-input::placeholder { color: var(--text-muted); }
.search-bar:focus-within {
  border-color: var(--egor-primary);
  box-shadow: 0 0 0 3px rgba(39,71,168,0.10);
}

/* ===== CHANNEL POST NO-AUTH LABEL ===== */
.channel-post-header-label {
  padding: 10px 18px 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   АДАПТИВ (МОБИЛЬНАЯ ВЁРСТКА)
   Добавлено в конец файла. Существующие правила не меняются —
   только переопределения внутри @media для узких экранов.
   ========================================================= */

/* Высота нижней навигации на мобильном (используется ниже).
   Объявляется здесь, чтобы было одно место для правки. */
:root {
  --bottomnav-h: 58px;
}

/* ===== Адаптив: компактный десктоп / небольшие ноутбуки (≤1100px) ===== */
@media (max-width: 1100px) {
  #content {
    padding: 24px 18px;
  }
}

/* ===== Адаптив: широкие планшеты (≤900px) ===== */
/* Скрываем правую панель, центральная колонка занимает её место. */
@media (max-width: 900px) {
  #right-panel {
    display: none;
  }
  #main {
    margin-right: 0;
    max-width: calc(100vw - var(--sidebar-w));
  }
}

/* ===== Адаптив: планшеты и телефоны (≤768px) — ГЛАВНОЕ ===== */
/* Сайдбар превращается в нижнюю навигацию (bottom nav bar). */
@media (max-width: 768px) {
  /* Контейнер приложения — обычный поток, без боковых колонок */
  #app {
    display: block;
  }

  /* Сайдбар фиксируется внизу экрана горизонтальной полосой.
     env(safe-area-inset-bottom) добавляет отступ под home-indicator iPhone. */
  #sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: var(--bottomnav-h);
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 200;
  }
  .sidebar {
    flex-direction: row;
    height: var(--bottomnav-h);
    width: 100%;
    border-right: none;
    border-top: 1.5px solid var(--border);
    overflow: hidden;
    box-shadow: 0 -2px 10px rgba(40,30,12,0.10);
  }

  /* Прячем то, что в нижней навигации не нужно */
  .sidebar-logo,
  .sidebar-user,
  .sidebar-bottom,
  .nav-divider {
    display: none;
  }

  /* Навигация — горизонтальная, иконки равномерно по ширине */
  .sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    padding: 0;
    gap: 0;
    overflow-x: auto;
  }
  .nav-item {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 600;
    min-width: 56px;
    text-align: center;
    line-height: 1.1;
  }
  .nav-item.active {
    background: transparent;
  }
  body.theme-honorary .nav-item.active,
  body.theme-observer .nav-item.active {
    background: transparent;
  }
  .nav-item-icon {
    width: auto;
    height: auto;
    font-size: 19px;
  }
  /* Колокол уведомлений как полноценный пункт нижней навигации */
  .nav-notif {
    display: flex;
    color: var(--text-secondary);
  }
  /* Навпункт здесь — центрированная колонка: бейдж Бесед позиционируем абсолютно
     над иконкой (margin-left:auto из десктопа растянул бы строку). */
  .nav-item .nav-badge {
    position: absolute; top: 3px; right: calc(50% - 20px);
    margin-left: 0;
    border: 1.5px solid var(--surface);
  }

  /* Центральная колонка занимает всю ширину, оставляем место под нав */
  #main {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 6px);
  }
  #content {
    padding: 16px 12px;
    max-width: 100%;
  }

  /* ----- Беседы на мобильном: список ИЛИ беседа на весь экран (не сплит) -----
     Полноэкранная колонка; высота через dvh (учёт схлопывания адресной строки).
     По умолчанию виден список; при выборе беседы добавляется .has-active. */
  body.page-chats #main { padding-bottom: 0; }
  body.page-chats #content { padding: 0; }
  .chat-layout {
    flex-direction: column;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    height: calc(100vh - var(--bottomnav-h) - env(safe-area-inset-bottom));
    height: calc(100dvh - var(--bottomnav-h) - env(safe-area-inset-bottom));
  }
  .chat-list-panel {
    width: 100%;
    flex: 1;
    max-height: none;
    border-right: none;
    border-bottom: none;
  }
  .chat-view { flex: 1; min-height: 0; }
  /* Переключение список ↔ беседа */
  .chat-view { display: none; }
  .chat-layout.has-active .chat-list-panel { display: none; }
  .chat-layout.has-active .chat-view { display: flex; }
  .message-group-content { max-width: 82%; }
  /* Кнопка «назад» к списку — только на мобильном */
  .chat-back { display: inline-flex; }

  /* ----- Профиль ----- */
  .profile-cover,
  .profile-cover-area {
    height: 130px;
  }
  .profile-avatar-wrap {
    top: -38px;
    left: 16px;
  }
  .profile-avatar {
    width: 76px;
    height: 76px;
    border-width: 3px;
  }
  .profile-info {
    padding: 12px 16px 18px;
  }
  .profile-name-row {
    margin-top: 42px;
  }
  .profile-name {
    font-size: 19px;
  }
  .profile-stats {
    gap: 10px;
    flex-wrap: wrap;
  }
  .profile-stat {
    padding: 6px 8px;
  }
  .profile-actions {
    flex-wrap: wrap;
  }

  /* ----- Модалки ----- */
  .modal-overlay {
    padding: 12px;
  }
  .modal {
    width: 94vw;
    max-width: 94vw;
  }
  .modal-header { padding: 16px 16px 0; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 0 16px 16px; }

  /* ----- Заголовок страницы: разрешаем перенос ----- */
  .page-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ----- Тосты прижимаем по ширине экрана ----- */
  #toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottomnav-h) + 12px);
    align-items: center;
  }
  .toast { max-width: 100%; }
}

/* =========================================================
   УРОВЕНЬ ЕГОРИЗМА — Паспорт (ранг, прогресс, достижения)
   ========================================================= */
.passport-rank {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.passport-rank-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.passport-rank-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--egor-dark); letter-spacing: -0.02em; }
.passport-rank-eg { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.passport-rank-level {
  flex-shrink: 0; font-weight: 800; font-size: 12px; color: var(--honorary-dark);
  border: 1.5px solid var(--gold-soft); background: var(--honorary-bg);
  padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}
.passport-progress { height: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.passport-progress-fill { height: 100%; background: linear-gradient(90deg, var(--egor-primary), var(--gold)); border-radius: 20px; transition: width 0.4s ease; }
.passport-section-title {
  font-size: 11px; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.7px; margin: 16px 0 10px;
}
/* Сворачиваемый заголовок «Знаков отличия» — кнопка с шевроном */
.passport-section-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 16px 0 10px; padding: 0;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 11px; font-weight: 800; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.7px;
  transition: color var(--transition);
}
.passport-section-toggle:hover { color: var(--egor-primary); }
.passport-section-toggle::after {
  content: ''; flex-shrink: 0;
  width: 7px; height: 7px; margin-right: 3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--transition);
}
.passport-section-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
.passport-achievements.collapsed { display: none; }
/* Знаки отличия — наградные печати Канцелярии. Выданный знак «проштампован»
   тёплой золотой печатью с лёгким поворотом «от руки»; невыданный — пустой
   бланк реестра с пунктиром и замком (текст читаемый, без мутного grayscale). */
.passport-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 218px), 1fr));
  gap: 10px;
}
.ach {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 86px; /* единая высота карточек — сетка ровная при любой длине описания */
  padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ach.earned {
  background:
    radial-gradient(125% 145% at 0% 0%, rgba(231,207,138,0.38), transparent 62%),
    var(--honorary-bg);
  border-color: var(--gold-soft);
}
.ach.earned:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ach.locked { border-style: dashed; }

/* Медальон-печать */
.ach-seal {
  position: relative; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text-muted);
}
.ach-seal svg { width: 22px; height: 22px; }
.ach.locked .ach-seal { border-style: dashed; }
.ach.earned .ach-seal {
  background: radial-gradient(circle at 34% 28%, #f1db90, var(--gold) 96%);
  border: 2px solid var(--honorary-light); color: #5a3f06;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.55), 0 1px 3px rgba(133,93,9,0.30);
  transform: rotate(-5deg); /* «от руки» поставленная печать */
}
/* Уголок-бейдж: галочка (выдан) / замок (нет) */
.ach-seal-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text-muted);
}
.ach-seal-badge svg { width: 11px; height: 11px; }
.ach.earned .ach-seal-badge { background: var(--honorary-dark); border-color: var(--honorary-bg); color: #fff; }

.ach-body { flex: 1; min-width: 0; }
.ach-title {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  color: var(--egor-dark); letter-spacing: -0.01em;
}
.ach.earned .ach-title { color: var(--honorary-dark); }
.ach-desc { font-size: 11.5px; line-height: 1.35; color: var(--text-secondary); margin-top: 3px; }
.ach.locked .ach-title { color: var(--text-secondary); }

/* Награда в ЕГ */
.ach-bonus {
  flex-shrink: 0; align-self: flex-start;
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  color: var(--gold-text); line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
}
.ach-bonus span { font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; }
/* На золотом фоне earned-карточки --gold-text сливается — берём контрастный honorary-dark. */
.ach.earned .ach-bonus { color: var(--honorary-dark); }
.ach.locked .ach-bonus { color: var(--text-muted); }

/* Мобайл: компактнее печать и карточка, чтобы текст ачивки не зажимался. */
@media (max-width: 768px) {
  .passport-achievements { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .ach { min-height: 76px; padding: 11px 12px; gap: 10px; }
  .ach-seal { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ach { transition: none; }
  .ach.earned:hover { transform: none; }
}

/* Чип ранга рядом с именем */
.rank-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--honorary-dark);
  border: 1.5px solid var(--gold-soft); background: var(--honorary-bg);
  padding: 2px 9px; border-radius: 20px; white-space: nowrap; line-height: 1.4;
}

/* ===== Адаптив: маленькие телефоны (≤480px) ===== */
@media (max-width: 480px) {
  html { font-size: 14px; }

  #content {
    padding: 12px 10px;
  }

  /* Заголовки помельче */
  .page-title { font-size: 20px; }
  .auth-logo-title { font-size: 25px; }
  .auth-card { padding: 26px 20px; }
  .profile-name { font-size: 18px; }

  /* Карточки пользователей / каналов компактнее */
  .user-card { padding: 12px 14px; gap: 11px; }
  .user-card-avatar { width: 44px; height: 44px; }
  .channel-avatar { width: 44px; height: 44px; font-size: 18px; }
  .post-avatar { width: 40px; height: 40px; }

  /* Выбор роли при регистрации — в один столбец */
  .role-cards {
    grid-template-columns: 1fr;
  }

  /* Сетки видео/игр — минимум по ширине меньше */
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  /* Вкладки можно проскроллить, если не влезают */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn { padding: 9px 12px; }

  /* Реакции под постом — чуть компактнее */
  .reaction-btn, .comment-btn { padding: 6px 8px; }
}

/* =========================================================
   УЛОЖЕНИЕ (справочник мира) — codex.js
   ========================================================= */
/* Подложка-карточка: текст Уложения лежит на чистой поверхности, а дудл-фон —
   только в полях вокруг (как у телеграм-каналов), иначе длинный текст на узоре
   читается неопрятно. */
.codex {
  max-width: 760px; margin: 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 30px 26px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
  .codex { padding: 4px 16px 20px; border-radius: 0; border-left: none; border-right: none; }
}

.codex-hero {
  text-align: center;
  padding: 18px 20px 26px;
  margin-bottom: 8px;
  border-bottom: 1.5px solid var(--border);
}
.codex-hero-emblem { display: inline-flex; margin-bottom: 12px; }
.codex-hero-title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0; /* сброс UA-отступа <h1> */
  color: var(--egor-dark);
}
.codex-hero-sub {
  font-size: 14px; color: var(--text-secondary);
  max-width: 460px; margin: 8px auto 0;
  line-height: 1.6;
}

/* Оглавление Уложения — быстрые прыжки к разделам (особенно ценно на мобиле,
   где документ длинный). Кнопки, а не #-якоря: не засоряют history и не дёргают роутер. */
.codex-toc {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 18px auto 4px; max-width: 620px;
}
.codex-toc-link {
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text-secondary); border-radius: var(--radius-pill, 999px);
  padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--transition);
}
.codex-toc-link:hover { color: var(--egor-primary); border-color: var(--egor-primary); }

.codex-section {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.codex-section:last-of-type { border-bottom: none; }
.codex-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.codex-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--egor-bg);
  color: var(--egor-primary);
  border: 1.5px solid var(--egor-light);
}
.codex-section-icon svg { width: 20px; height: 20px; }
.codex-section-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}
.codex-text {
  font-size: 14.5px; line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 14px;
  max-width: 68ch; /* комфортная длина строки чтения — длинные абзацы не «простынёй» */
}
.codex-text b { color: var(--text); font-weight: 700; }

/* Сословия */
.codex-roles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.codex-role {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.codex-role--egor { border-top: 3px solid var(--egor-primary); }
.codex-role--honorary { border-top: 3px solid var(--honorary-primary); }
.codex-role--observer { border-top: 3px solid var(--observer-primary); }
.codex-role-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.codex-role-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--gold);
}
.codex-role-icon svg { width: 19px; height: 19px; }
.codex-role-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.codex-role-can { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.codex-can {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
}
.codex-can svg { width: 15px; height: 15px; flex-shrink: 0; }
.codex-can.yes svg { color: var(--success); }
.codex-can.no { color: var(--text-muted); }
.codex-can.no svg { color: var(--danger); }
.codex-role-note {
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* Заветы */
.codex-tenets {
  list-style: none; counter-reset: tenet;
  display: flex; flex-direction: column; gap: 10px;
}
.codex-tenets li {
  counter-increment: tenet;
  position: relative;
  padding: 12px 14px 12px 48px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary);
}
.codex-tenets li b { color: var(--text); }
.codex-tenets li::before {
  content: counter(tenet);
  position: absolute; left: 12px; top: 12px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--egor-bg);
  color: var(--egor-primary);
  border: 1.5px solid var(--gold);
  font-family: var(--font-display);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* Шаги Посвящения */
.codex-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.codex-step {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary);
}
.codex-step b { color: var(--text); }
.codex-step-num {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--egor-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.codex-cta { margin-top: 4px; }
.codex-passed {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--success);
}
.codex-passed svg { width: 18px; height: 18px; }

/* Словарь */
.codex-glossary {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.codex-gloss-row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.codex-gloss-row:last-child { border-bottom: none; }
.codex-gloss-term {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13.5px;
  color: var(--egor-dark);
}
.codex-gloss-meaning {
  font-size: 13px; line-height: 1.5;
  color: var(--text-secondary);
}

.codex-foot {
  text-align: center;
  font-size: 12px; color: var(--text-muted);
  padding: 24px 0 8px;
  font-style: italic;
}

/* Приветственный баннер новичка на Площади */
.welcome-banner {
  position: relative;
  background:
    radial-gradient(420px 180px at 88% -40%, rgba(199,147,40,0.16), transparent 60%),
    linear-gradient(135deg, var(--egor-bg), var(--surface));
  border: 1.5px solid var(--egor-light);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.welcome-banner-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800;
  color: var(--egor-dark);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 9px;
}
.welcome-banner-title svg { width: 22px; height: 22px; color: var(--gold); }
.welcome-banner-text {
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 14px;
  max-width: 560px;
}
.welcome-banner-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.welcome-banner-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  background: none; border: none; cursor: pointer;
  transition: all var(--transition);
}
.welcome-banner-close:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.welcome-banner-close svg { width: 16px; height: 16px; }

/* Страница Посвящения (обряд) */
.rite { box-shadow: var(--shadow); }
.rite-emblem { display: flex; justify-content: center; margin-bottom: 14px; }
.rite-note {
  background: var(--egor-bg);
  border: 1.5px solid var(--egor-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 520px; margin: 0 auto;
  text-align: center;
}
.rite-note b { color: var(--egor-dark); }
.rite #rite-cta { text-align: center; margin-top: 22px; }

@media (max-width: 768px) {
  .codex-roles { grid-template-columns: 1fr; }
  .codex-hero-title { font-size: 25px; }
  .codex-gloss-row { grid-template-columns: 110px 1fr; gap: 10px; }
}
/* На самых узких — термин/значение в столбик (definition-list), без зажатой колонки. */
@media (max-width: 480px) {
  .codex-gloss-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ===== БЕСЕДЫ: онлайн-статус и непрочитанные ===== */
.chat-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-avatar-wrap .online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px;
  border: 2px solid var(--surface2);
  box-shadow: 0 0 0 0.5px var(--border);
}
.chat-view-header .chat-avatar-wrap .online-dot { border-color: var(--surface); }
.chat-item-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.chat-unread {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--egor-primary); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: 20px;
}
.chat-item.active .chat-unread { background: var(--gold); }

/* ===== Уведомления (колокол + панель) ===== */
.notif-bell {
  position: relative; margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.notif-bell:hover { background: var(--bg); color: var(--egor-primary); }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--gold); color: #3a2a05;
  font-size: 10px; font-weight: 800; line-height: 1;
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--surface);
}
/* Колокол-пункт нижней навигации: на десктопе скрыт (есть колокол в сайдбар-юзере),
   виден только в bottom-nav на ≤768px. background:none — это <button>. */
.nav-notif { display: none; background: none; border: none; cursor: pointer; }
.nav-notif .notif-badge {
  position: absolute; top: -5px; right: -8px;
}
.notif-panel {
  position: fixed; left: 16px; bottom: 70px;
  width: 320px; max-width: calc(100vw - 32px); max-height: 62vh; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 500; animation: modalIn 0.15s ease;
}
.notif-head {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.notif-clear {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; transition: color var(--transition), background var(--transition);
}
.notif-clear:hover, .notif-clear:focus-visible { color: var(--egor-primary); background: var(--bg); }
.notif-empty { text-align: center; color: var(--text-muted); padding: 28px 16px; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.notif-empty svg { color: var(--border-strong); }
.notif-item { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.notif-item:hover { background: var(--bg); }
/* Маркер «непрочитано»: фон + акцентная риска слева через inset-тень (без сдвига вёрстки). */
.notif-item.unread { background: var(--egor-bg); box-shadow: inset 3px 0 0 var(--egor-primary); }
.notif-link {
  flex: 1; min-width: 0; display: flex; gap: 11px; align-items: center;
  padding: 11px 14px; color: inherit; text-decoration: none;
}
.notif-ava { flex-shrink: 0; }
.notif-body { min-width: 0; }
.notif-text { font-size: 13px; line-height: 1.4; color: var(--text); }
.notif-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Кнопка «убрать» одно уведомление — по наведению/фокусу (на тач показываем всегда). */
.notif-del {
  flex-shrink: 0; margin-right: 8px;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  opacity: 0; transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.notif-item:hover .notif-del, .notif-item:focus-within .notif-del { opacity: 0.6; }
.notif-del:hover, .notif-del:focus-visible { opacity: 1; background: var(--bg); color: var(--danger); }
.notif-del svg { width: 14px; height: 14px; }
/* Подсветка поста при переходе по deep-link из уведомления */
.post.post-flash { animation: postFlash 2s ease; }
@keyframes postFlash {
  0%, 30% { box-shadow: 0 0 0 2px var(--egor-primary), var(--shadow); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow); }
}

/* Удаление своего сообщения (по наведению) */
.msg-del {
  align-self: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); opacity: 0; transition: opacity var(--transition), background var(--transition);
}
.message-group:hover .msg-del { opacity: 0.65; }
/* Клавиатура: кнопка появляется, когда фокус внутри группы сообщения */
.message-group:focus-within .msg-del { opacity: 0.65; }
.msg-del:hover, .msg-del:focus-visible { opacity: 1; background: var(--bg); color: var(--danger); }
.msg-del svg { width: 15px; height: 15px; }
/* Метка «изменено» у поста */
.edited-mark { font-style: italic; }

/* ===== A11Y: видимый фокус для клавиатуры + уважение reduced-motion ===== */
:focus-visible { outline: 2px solid var(--egor-primary); outline-offset: 2px; border-radius: 4px; }
/* На цветных кнопках синий outline сливается с фоном — даём белую прокладку + кольцо. */
.btn-primary:focus-visible, .btn-subscribe:focus-visible, .btn-danger:focus-visible, .send-btn:focus-visible, .garden-chat-send:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--egor-primary);
}
/* Круглые элементы — кольцо фокуса по форме, без прямоугольного radius:4px. */
.reg-chip:focus-visible, .rp-ava:focus-visible, .online-dot:focus-visible { border-radius: var(--radius-pill); }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* На мобильном сайдбар-юзер скрыт (нижняя навигация) → колокол доступен на десктопе.
   Панель привязываем к низу над bottom-nav, если вдруг показана. */
@media (max-width: 768px) {
  .notif-panel { left: 8px; right: 8px; width: auto; bottom: calc(var(--bottomnav-h) + 10px); }
  /* Тач: hover недоступен — кнопки удаления показываем постоянно */
  .msg-del { opacity: 0.65; }
  .notif-del { opacity: 0.6; }
  .comment-del { opacity: 0.6; }
  .comment-reply { opacity: 0.6; } /* тач: hover нет — «Ответить» должна быть видна */
}

/* =========================================================
   ГЕРАЛЬДИЧЕСКИЕ ТУЛТИПЫ (tooltip.js) — заменяют системные title
   ========================================================= */
.eg-tooltip {
  position: fixed;
  top: 0; left: 0;
  z-index: 10000;
  max-width: 230px;
  padding: 6px 10px;
  background: #1d2235;            /* тёмные «чернила» — спокойно и премиально */
  color: #f4eedd;                /* тёплый светлый текст */
  border-radius: 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1px;
  text-align: center;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(20,26,46,0.28), 0 1px 3px rgba(0,0,0,0.22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(0.97);
  transform-origin: center bottom;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.eg-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }
.eg-tooltip b { color: var(--gold-soft); font-weight: 700; }
/* Стрелка — бесшовный ромб того же цвета (без рамки) */
.eg-tooltip::after {
  content: '';
  position: absolute;
  left: var(--tip-arrow, 50%);
  width: 8px; height: 8px;
  background: #1d2235;
  transform: translateX(-50%) rotate(45deg);
}
.eg-tooltip[data-placement="top"]::after { bottom: -3px; }
.eg-tooltip[data-placement="bottom"]::after { top: -3px; transform-origin: center top; }
/* Прячем только на чисто сенсорных устройствах (телефоны/планшеты),
   но НЕ на MacBook с трекпадом — у него есть hover. */
@media (hover: none) and (pointer: coarse) {
  .eg-tooltip { display: none; }
}

/* =========================================================
   РЕДИЗАЙН · ПАСТЕЛЬ — «Тихая Канцелярия»
   Мягкая, воздушная палитра: пудрово-синий + шампань + облако.
   Палитра переопределена на уровне ТОКЕНОВ → весь интерфейс
   (лента, профиль, чаты, модалки, кнопки) перекрашивается разом.
   Блок идёт последним и переопределяет базу по каскаду.
   ========================================================= */
:root{
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Бренд / Егор — пудрово-синий. primary/dark затемнены до WCAG AA (текст/кнопки
     на белом ≥4.5; белый текст на кнопке-градиенте читаем). Светлые egor-bg/egor-light
     оставлены пастельными — поверхности/активные фоны сохраняют «воздушность». */
  --egor-primary:#5b72c4;
  --egor-dark:#4a5fa6;
  --egor-bg:#eaeefb;
  --egor-light:#cfdaf4;

  /* Гоша (honorary_egor) — шампанское. primary/dark затемнены до WCAG AA:
     белый текст на --honorary-primary ≥4.5; --honorary-dark как текст на
     светлом honorary-bg ≥4.5. Светлые bg/light оставлены пастельными. */
  --honorary-primary:#8f6d39;
  --honorary-bg:#f5ecdc;
  --honorary-dark:#6d5226;
  --honorary-light:#ecdcbd;

  /* Наблюдатель — лавандово-серый. --observer-dark затемнён до AA (текст
     бейджа на observer-bg/белом ≥4.5); primary остаётся для рамок/акцентов. */
  --observer-primary:#9398b8;
  --observer-dark:#565b78;
  --observer-bg:#eeeff7;

  /* Акцент — приглушённое шампань-золото (рамки/иконки/заливки — декоративно). */
  --gold:#c7af7e;
  --gold-soft:#e6d6af;
  /* Золото как ТЕКСТ — затемнено до WCAG AA (≥4.5:1 на светлом фоне): шампань-золото
     #c7af7e даёт ~1.9:1 и нечитаемо. Использовать только для текстовых акцентов. */
  --gold-text:#8a6d1f;
  --success:#2f9e6a;

  /* Нейтральные — воздушные */
  --bg:#eef1f9;
  --surface:#ffffff;
  --surface2:#f5f7fd;
  --border:rgba(74,86,128,.13);
  --border-strong:rgba(74,86,128,.22);
  --text:#343c5a;
  --text-secondary:#626c8e;
  --text-muted:#646b88; /* затемнён с #9aa0b8 → WCAG AA (≥4.5) для обычного текста на --bg (meta/время/превью/счётчики) */

  /* Мягкие, слегка синеватые тени */
  --shadow-sm:0 1px 3px rgba(90,105,160,.06), 0 1px 2px rgba(90,105,160,.04);
  --shadow:0 4px 16px rgba(90,105,160,.10), 0 1px 4px rgba(90,105,160,.05);
  --shadow-lg:0 18px 46px rgba(90,105,160,.18), 0 4px 12px rgba(90,105,160,.08);
  --shadow-hover:0 8px 24px rgba(90,105,160,.14), 0 2px 6px rgba(90,105,160,.06);

  --radius:16px;
  --radius-sm:12px;
  --radius-pill:999px;
  /* Единый «красный Канцелярии» (опасные действия/ошибки) — мягче бутстрап-#e74c3c,
     в тон пастели; -dark для hover. Контраст белого текста ≥ AA. */
  --danger:#d14536;
  --danger-dark:#b23a28;
}

/* Чистый воздушный фон: мягкое свечение, без зерна */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 82% -12%, rgba(129,152,214,.12), transparent 60%),
    radial-gradient(840px 440px at 6% 0%, rgba(199,175,126,.08), transparent 55%);
}

/* Сайдбар — светлый и воздушный (база уже на токенах; усиливаем мягкость) */
.sidebar{ box-shadow:none; }
.sidebar-nav .nav-item.active{ box-shadow:inset 3px 0 0 var(--egor-primary); }
.sidebar-nav .nav-item.active .nav-item-icon{ color:var(--egor-primary); }

/* Галочка «Посвящён» → мягкий пастельный кругляш */
.verified-badge{
  display:inline-grid; place-items:center; width:18px; height:18px;
  border-radius:50%; font-size:11px; line-height:1;
  color:var(--egor-primary); background:var(--egor-bg);
  border:1px solid var(--egor-light);
}

/* Посты — мягкие карточки с лёгким появлением */
/* Сохраняем сословную грань (--spine, цвет роли автора из JS) — иначе это позднее
   правило затирало inset-полосу и роль автора в карточке не читалась. */
.post{ box-shadow:var(--shadow-sm), inset 3px 0 0 0 var(--spine, var(--egor-light)); animation:rdRise .25s both; }
.post:hover{ box-shadow:var(--shadow), inset 3px 0 0 0 var(--spine, var(--egor-primary)); border-color:var(--egor-light); }
/* Мягкое появление: малый сдвиг и короткая длительность — каскад при загрузке/смене
   вкладки/поиске не «прыгает» по высоте. */
@keyframes rdRise{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
/* мягкое кольцо у аватара автора */
.post-header .avatar-img, .post-header .avatar-placeholder{
  box-shadow:0 0 0 3px var(--surface), 0 0 0 4px var(--egor-light);
}

/* Кнопка-указ — мягкое шампанское */
.btn-gold{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 20px; border-radius:12px; font-weight:700; font-size:13.5px;
  color:#6e5527; border:1px solid var(--honorary-light);
  background:linear-gradient(180deg, #f1e3c3, #e3cd9f);
  box-shadow:0 2px 8px rgba(160,130,70,.18);
  transition:all .16s ease;
}
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 5px 14px rgba(160,130,70,.26); }
.btn-gold:active{ transform:translateY(0); }
.btn-gold svg{ width:16px; height:16px; }

/* ===== ПОЛИРОВКА: тени/свечения старой палитры → пастель ===== */
/* Кнопки */
.btn-primary{ box-shadow:0 2px 8px rgba(129,152,214,.28); }
.btn-primary:hover{ box-shadow:0 5px 14px rgba(129,152,214,.38); }
.btn-subscribe{ box-shadow:0 2px 8px rgba(195,154,100,.26); }
.send-btn{ box-shadow:0 2px 8px rgba(129,152,214,.30); }
/* Фокус полей и поиска — мягкое пастельное кольцо */
.form-input:focus, .form-textarea:focus{ box-shadow:0 0 0 3px rgba(129,152,214,.16); }
.search-bar:focus-within{ box-shadow:0 0 0 3px rgba(129,152,214,.14); }
/* Наведение на карточки */
.user-card:hover{ border-color:var(--egor-light); }
/* Страница авторизации — пастельные свечения вместо королевских */
.auth-page{
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(129,152,214,.16), transparent 60%),
    radial-gradient(600px 400px at 85% 110%, rgba(199,175,126,.12), transparent 55%),
    var(--bg);
}
/* Баннер-приветствие новичка */
.welcome-banner{
  background:
    radial-gradient(420px 180px at 88% -40%, rgba(199,175,126,.16), transparent 60%),
    linear-gradient(135deg, var(--egor-bg), var(--surface));
  border-color:var(--egor-light);
}
/* Эмблема-щит в лого — мягкая пастельная тень */
.sidebar-logo-icon{ box-shadow:0 2px 8px rgba(129,152,214,.22), inset 0 0 0 2px rgba(255,255,255,.18); }

/* ===== Адаптив нижней навигации ===== */
@media (max-width: 768px){
  /* Нижняя навигация: активный пункт — верхняя риска, без вертикальной полосы слева */
  .sidebar-nav .nav-item.active{ box-shadow:inset 0 3px 0 var(--egor-primary); background:transparent; color:var(--egor-primary); }
}

/* ===== Доступность тач-устройств: hit-area кнопок ≥44px (WCAG 2.5.5) =====
   На сенсорных экранах мелкие иконочные/реакционные кнопки трудно нажать пальцем.
   Расширяем только зону нажатия; визуальный размер иконки прежний. Десктоп (мышь)
   не затрагивается — правило под (pointer: coarse). */
@media (pointer: coarse){
  /* Кнопки с текстом и в тулбарах/шапках — расширяем сам бокс до 44px */
  .reaction-btn, .comment-btn{ min-height:44px; }
  .modal-close, .btn-icon, .chat-back, .notif-bell{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* Мелкие иконки-корзины ВНУТРИ строк (коммент/сообщение): расширяем только зону
     нажатия невидимым 44px-оверлеем, НЕ раздувая бокс — иначе корзина отъедала бы
     ширину/высоту строки. */
  .comment-del, .msg-del, .comment-reply{ position:relative; }
  .comment-del::after, .msg-del::after, .comment-reply::after{
    content:''; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
  /* Основные кнопки/пункты навигации/поля — до тач-минимума 44px (бокс растёт,
     визуальный паддинг прежний). Поля: font-size:16px гасит автозум iOS Safari. */
  .btn{ min-height:44px; }
  .btn-sm{ min-height:40px; }
  .nav-item{ min-height:48px; }
  .reaction-btn{ min-width:44px; }
  .garden-chat-send{ width:44px; height:44px; }
  .form-input, .form-select, .form-textarea, .garden-chat-input,
  /* iOS Safari зумит вьюпорт при фокусе на поле с font-size<16px. Самые частые поля
     ввода (пост/коммент/сообщение/поиск) имели 13–14.5px → рывок зума и съезд вёрстки.
     На десктопе (мышь) правило не действует — оно под (pointer: coarse). */
  .compose-textarea, .comment-input, .comment-textarea, .message-input, .chat-search-input, .search-bar-input{
    font-size:16px;
  }
  .send-btn{ width:44px; height:44px; } /* тач-минимум 44px (был 42) */
  .reg-chip{ min-height:38px; }
}

/* ===== Баннер потери связи (Socket.io) ===== */
#connection-banner{
  position:fixed; left:50%; top:0; transform:translate(-50%,-120%);
  z-index:1200; max-width:calc(100vw - 24px);
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:0 0 var(--radius-sm) var(--radius-sm);
  background:#8a3b3b; color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .25s ease;
  pointer-events:none;
}
#connection-banner.visible{ transform:translate(-50%,0); }
.connection-banner-dot{
  width:8px; height:8px; border-radius:50%; background:#ffd2d2; flex-shrink:0;
  animation:connPulse 1.1s ease-in-out infinite;
}
@keyframes connPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

/* Очень узкие экраны (≤360px): нижняя навигация — только иконки, иначе 6 пунктов
   с подписями переполняют ширину и навбар уходит в горизонтальный скролл. */
@media (max-width: 360px){
  .sidebar-nav .nav-item-label{ display:none; }
  .sidebar-nav .nav-item{ min-width:48px; justify-content:center; }
}

/* На мобильном модалку прижимаем к верху: при открытой клавиатуре центрированная
   модалка с textarea уезжала полем под клавиатуру. */
@media (max-width: 768px){
  .modal-overlay{ align-items:flex-start; padding:16px 12px; }
  /* Тесный футер (напр. editUser: «Удалить» + «Закрыть/Сохранить») переносим, а не давим. */
  .modal-footer{ flex-wrap:wrap; gap:8px; }
}

/* ===== Skip-link «к содержимому» (a11y) ===== */
.skip-link{
  position:fixed; top:8px; left:8px; z-index:1300;
  background:var(--egor-primary); color:#fff;
  padding:10px 16px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:700; text-decoration:none;
  transform:translateY(-160%); transition:transform .18s ease;
}
.skip-link:focus{ transform:translateY(0); outline:2px solid #fff; outline-offset:2px; }

/* Skip-link внутри Огорода: скрыт, пока не получит фокус с клавиатуры — тогда
   виден над наделами и уводит к Беседке (иначе Tab идёт через все наделы). */
.garden-sr-skip{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.garden-sr-skip:focus{
  position:static; left:auto; width:auto; height:auto;
  display:inline-block; margin:0 0 8px;
  background:var(--egor-primary); color:#fff; text-decoration:none;
  padding:8px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:700;
}


/* ===== Общественный Огород — «канцелярская пастораль» ========================
   Эстетика: официальный указ встречает грядку. Пергамент + геральдическое золото,
   деревянная рама грядки, казённые бирки моноширинным шрифтом, deadpan-тон. */
.garden-page{ position:relative; }

/* — Указ-плашка — */
.garden-decree{
  display:flex; gap:18px; align-items:stretch;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(199,147,40,0.10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface2));
  border:1.5px solid var(--border-strong);
  border-left:5px solid var(--gold);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
  box-shadow:var(--shadow);
}
.garden-decree-side{ display:flex; align-items:flex-start; }
.garden-seal{
  width:54px; height:54px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:radial-gradient(circle at 35% 30%, #fbf3da, #e7cf8a);
  border:2px solid var(--gold); box-shadow:inset 0 0 0 3px rgba(255,255,255,0.4), var(--shadow-sm);
}
.garden-decree-kicker{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-text); margin-bottom:4px;
}
.garden-decree-title{
  font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.02;
  letter-spacing:-0.01em; color:var(--text); margin-bottom:8px;
}
.garden-decree-sub{ font-size:13.5px; color:var(--text-secondary); max-width:60ch; line-height:1.5; }
.garden-decree-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.garden-chip{
  font-size:12px; font-weight:600; color:var(--text-secondary);
  background:var(--surface); border:1.5px solid var(--border-strong);
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.garden-chip--mono{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.04em; color:var(--text-muted); }
.garden-chip--live{ display:inline-flex; align-items:center; gap:7px; }
.garden-chip--live::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 0 rgba(47,158,106,0.5); animation:gardenPulse 1.8s infinite;
}
@keyframes gardenPulse{ 0%{box-shadow:0 0 0 0 rgba(47,158,106,0.45)} 70%{box-shadow:0 0 0 7px rgba(47,158,106,0)} 100%{box-shadow:0 0 0 0 rgba(47,158,106,0)} }

/* — Мерило Плана — */
.garden-season{
  position:relative; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:15px 18px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.garden-season.is-done{ border-color:var(--gold-soft); background:linear-gradient(180deg, #fffbf0, var(--surface)); }
.garden-season-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:11px; }
.garden-season-name{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.garden-season-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.garden-season-num{ font-size:13px; color:var(--text-muted); white-space:nowrap; font-family:'JetBrains Mono', monospace; }
.garden-season-num b{ font-size:20px; color:var(--egor-primary); font-weight:800; }
.garden-meter{
  position:relative; height:16px; border-radius:999px; overflow:hidden;
  background:repeating-linear-gradient(45deg,#ece4d2,#ece4d2 7px,#e6ddc8 7px,#e6ddc8 14px);
  border:1.5px solid var(--border-strong);
}
.garden-meter-fill{
  height:100%; border-radius:999px; transition:width .6s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,#7aa84f,#4f8a3a);
  box-shadow:0 0 10px rgba(79,138,58,0.4);
}
.garden-meter-pct{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700; color:var(--text);
}
.garden-stamp{
  position:absolute; top:8px; right:14px; transform:rotate(-9deg);
  font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:0.05em;
  color:#b4452f; border:2.5px solid #b4452f; border-radius:6px; padding:3px 9px;
  opacity:0.85; text-transform:uppercase;
}

/* — Грядка-доска — */
.garden-board-plate{
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow-sm);
}
.garden-board-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.garden-board-title{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.garden-board-hint{ font-size:11.5px; color:var(--text-muted); text-align:right; }
.garden-board-frame{
  border-radius:var(--radius-sm); padding:8px;
  background:linear-gradient(150deg,#7a5a3c,#5e4129);
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.08);
  border:1px solid rgba(0,0,0,0.2);
  max-width:none; /* грядка — герой страницы во всю ширину */
}
.garden-canvas{ width:100%; display:block; touch-action:manipulation; }
.garden-legend{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:12px; }
.garden-legend-item{ font-size:12px; color:var(--text-secondary); display:inline-flex; align-items:center; gap:6px; }
.garden-legend-item i{ font-style:normal; font-size:15px; }
.garden-legend-item .gl-soil{
  width:15px; height:15px; border-radius:4px; display:inline-block;
  background:linear-gradient(150deg,#8a6647,#6b4d36);
}

/* — Панели (Беседка, Доска почёта) — блоки одной колонки под грядкой — */
.garden-panel{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.garden-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1.5px solid var(--border);
  font-weight:700; font-size:13.5px; background:var(--surface2);
}
.garden-panel-note{ font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600; color:var(--text-muted); letter-spacing:0.04em; }
.garden-panel-body{ padding:8px 12px; }
.garden-empty{ font-size:12.5px; color:var(--text-muted); text-align:center; padding:18px 6px; line-height:1.5; }
.garden-spin{ width:22px; height:22px; margin:18px auto; border:2.5px solid var(--border-strong); border-top-color:var(--egor-primary); border-radius:50%; animation:gardenSpin .8s linear infinite; }
@keyframes gardenSpin{ to{ transform:rotate(360deg) } }

/* доска почёта */
.garden-lb-row{ display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid var(--border); }
.garden-lb-row:last-child{ border-bottom:none; }
.garden-lb-rank{ width:24px; text-align:center; font-weight:800; font-size:14px; color:var(--text-muted); flex-shrink:0; }
.garden-lb-row.is-top .garden-lb-rank{ color:var(--gold); font-size:15px; }
.garden-lb-name{ flex:1; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.garden-lb-pts{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700; color:var(--egor-primary); white-space:nowrap; }
.garden-lb-pts span{ font-size:10px; color:var(--text-muted); margin-left:1px; }

/* Беседка — блок под грядкой во всю ширину; лог фикс-высоты со скроллом внутри,
   чтобы страница НЕ росла от количества сообщений (раньше уезжала вниз). Высота
   через clamp(vh) не зависит от числа сообщений — никакой круговой зависимости. */
.garden-chat{ display:flex; flex-direction:column; }
.garden-chat-log{ height:clamp(260px, 36vh, 420px); overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:9px; }
/* Вертикальные отступы между блоками страницы Огорода (одна колонка). */
.garden-board-wrap, .garden-chat, .garden-manual, .garden-leaderboard{ margin-bottom:16px; }
.garden-msg{ display:flex; gap:8px; align-items:flex-start; }
.garden-msg.is-me{ flex-direction:row-reverse; }
.garden-msg-body{ max-width:78%; }
.garden-msg.is-me .garden-msg-body{ text-align:right; }
.garden-msg-head{ display:flex; gap:7px; align-items:baseline; margin-bottom:2px; }
.garden-msg.is-me .garden-msg-head{ flex-direction:row-reverse; }
.garden-msg-name{ font-size:11.5px; font-weight:700; color:var(--text-secondary); }
.garden-msg-time{ font-size:10px; color:var(--text-muted); }
.garden-msg-text{
  display:inline-block; font-size:13px; line-height:1.4; text-align:left;
  background:var(--surface2); border:1px solid var(--border); padding:6px 10px;
  border-radius:12px 12px 12px 4px; word-break:break-word;
}
.garden-msg.is-me .garden-msg-text{ background:var(--egor-bg); border-color:var(--egor-light); border-radius:12px 12px 4px 12px; }
.garden-chat-form{ display:flex; gap:8px; align-items:center; padding:10px 12px; border-top:1.5px solid var(--border); background:var(--surface2); }
.garden-chat-input{
  flex:1; min-width:0; min-height:44px; font-family:var(--font); font-size:14px; color:var(--text);
  background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--radius-pill); padding:9px 14px;
}
.garden-chat-input:focus{ outline:none; border-color:var(--egor-primary); }
.garden-chat-input:disabled{ background:var(--bg); color:var(--text-muted); }
.garden-chat-send{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:var(--egor-primary); transition:var(--transition);
}
.garden-chat-send:hover{ background:var(--egor-dark); }

/* — Памятка огородника: разъяснение «что/как/зачем» внизу страницы — */
.garden-manual{
  margin-top:18px; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px 24px;
}
.garden-manual-head{ max-width:72ch; }
.garden-manual-title{
  font-family:var(--font-display); font-weight:800; font-size:22px;
  color:var(--text); letter-spacing:-0.01em; margin:2px 0 8px;
}
.garden-manual-lead{ font-size:14px; line-height:1.6; color:var(--text-secondary); }

/* Жизненный цикл надела: засеять → полить → собрать */
.garden-manual-steps{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,210px),1fr));
  gap:12px; margin:20px 0 10px;
}
.gm-step{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px;
}
.gm-step-ic{
  flex-shrink:0; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:var(--surface); border:1px solid var(--border);
}
.gm-step-ic.gm-soil{ background:linear-gradient(150deg,#8a6647,#6b4d36); border:none; }
.gm-step-b{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gm-step-b b{ font-family:var(--font-display); font-size:14px; color:var(--text); }
.gm-step-b span{ font-size:12.5px; line-height:1.45; color:var(--text-secondary); }

.garden-manual-aside{
  display:flex; gap:9px; align-items:baseline;
  font-size:13px; line-height:1.55; color:var(--text-secondary);
  background:var(--surface2); border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm); padding:10px 13px; margin-bottom:18px;
}
.gm-aside-ic{ flex-shrink:0; font-size:15px; }

/* Три столпа: зачем всё это */
.garden-manual-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr)); gap:12px;
}
.gm-card{
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 15px;
}
.gm-card-ic{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--egor-bg); color:var(--egor-primary); margin-bottom:9px;
}
.gm-card-t{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--text); margin-bottom:5px; }
.gm-card-d{ font-size:12.5px; line-height:1.5; color:var(--text-secondary); }

/* Порядок — параграфы Устава */
.garden-manual-rules{
  display:flex; flex-direction:column; gap:7px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
}
.gm-rule{ position:relative; padding-left:18px; font-size:12.5px; line-height:1.5; color:var(--text-muted); }
.gm-rule::before{ content:'§'; position:absolute; left:0; color:var(--gold-text); font-weight:700; }

@media (max-width:560px){
  .garden-manual{ padding:18px 16px; }
  .garden-manual-title{ font-size:19px; }
}

/* — Тултип-бирка надела — */
.garden-tip{
  position:absolute; z-index:50; pointer-events:none; max-width:230px;
  background:#1a2030; color:#f3e8cd; border:1px solid rgba(231,207,138,0.35);
  border-radius:8px; padding:8px 11px; box-shadow:0 10px 30px rgba(0,0,0,0.3);
}
.garden-tip .gt-title{ font-family:var(--font-display); font-weight:700; font-size:13px; color:#fff; }
.garden-tip .gt-body{ font-size:12px; color:#cdd3e0; margin-top:2px; }
.garden-tip .gt-act{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--gold-soft);
  margin-top:5px; letter-spacing:0.02em;
}

@media (max-width: 980px){
  .garden-decree-title{ font-size:24px; }
  .garden-seal{ width:46px; height:46px; font-size:22px; }
  /* На мобиле Беседка — основной контент колонки: даём логу больше высоты вьюпорта.
     Переопределяем именно height (не max-height — он бесполезен поверх фикс. height). */
  .garden-chat-log{ height:clamp(240px, 46vh, 440px); }
}
@media (max-width: 560px){
  .garden-decree{ padding:14px; gap:12px; }
  .garden-decree-side{ display:none; }
}

/* Огород — доступность и доводка после UX-ревью */
.garden-panel-title{ display:inline-flex; align-items:center; gap:7px; }
.garden-panel-title svg{ color:var(--gold); flex-shrink:0; }

/* Процент мерила — пилюля для контраста поверх любого фона полосы */
.garden-meter-pct{
  background:rgba(255,253,248,0.9); padding:1px 6px; border-radius:6px;
  color:var(--text); box-shadow:0 1px 2px rgba(40,30,12,0.15);
}

/* Доступный список наделов: визуально скрыт, но фокусируется с клавиатуры.
   При фокусе кнопка проявляется поверх грядки (видимый фокус — WCAG). */
.garden-sr{ display:flex; flex-wrap:wrap; gap:4px; }
.garden-sr-plot{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; background:transparent; color:inherit;
}
.garden-sr-plot:focus{
  position:static; width:auto; height:auto; margin:2px; clip:auto;
  padding:6px 10px; font-size:12px; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--text);
  border:2px solid var(--egor-primary); border-radius:var(--radius-xs);
}

/* Огород — широкий контейнер: грядка-доска должна доминировать на странице */
body.page-garden #content{ max-width:1080px; padding:24px; }

/* Огород — чип обратного отсчёта кулдауна (прозрачность) */
.garden-board-head .garden-board-title{ margin-right:auto; }
.garden-cd{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  color:var(--gold-text); background:rgba(199,147,40,0.12);
  border:1px solid var(--gold-soft); border-radius:999px; padding:2px 9px; white-space:nowrap;
}

/* Огород — фикс «мёртвой зоны» и выравнивание.
   Пустой #right-panel сайта (position:fixed, справа на всю высоту) перекрывал
   правую колонку широкой страницы Огорода и перехватывал клики по чату — прячем его. */
body.page-garden #right-panel{ display:none; }
body.page-garden #content{ margin:0 auto; }