/* ============================================================
 * GREP_SUMMARY: mint emerald cream theme, glassmorphism, feed cards, domain sections,
 *               status badges, top-3 voting, tooltip, modals, superposition v6,
 *               micro-animations 2026, reduced-motion, compact sticky header on scroll
 * STRUCTURE: vars -> reset -> focus/anim -> glass header/nav -> dropdown menu
 *           -> page -> buttons -> modal/fields -> details/band -> idea page
 *           -> comments -> roadmap -> votes -> domain feed/statuses -> my top
 *           -> rating -> legend -> badges -> tooltip -> graph -> utils -> footer
 *           -> superposition v6 -> roles -> toast
 * Тема: макет v6 — мята/изумруд/крем, glassmorphism, 2026.
 * ЦА: девелопер из топ-20, премиум-сегмент недвижимости; 95% сотрудников —
 * женщины 25-35 лет. Светлая тёплая тема, воздух, крупные скругления,
 * мягкие тени, лёгкий glassmorphism в шапке.
 * ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

:root {
  /* Тёплый кремовый фон + изумрудно-мятный акцент */
  --bg: #faf8f3;
  --bg-soft: #f3efe6;
  --panel: #ffffff;
  --panel-2: #fdfbf7;
  --border: #e8e2d6;
  --border-strong: #d8cfc0;
  --text: #2d2a26;        /* тёплый угольный, НЕ чисто-чёрный */
  --text-dim: #6b6258;    /* тёплый серый */

  --accent: #10b981;      /* изумруд-мята (emerald-500) */
  --accent-soft: #d1fae5; /* светлая мята (emerald-100) */
  --accent-dim: #059669;  /* глубокий изумруд (emerald-600) */
  --green: #10b981;
  --red: #e05252;
  --cyan: #4a9cc7;
  --violet: #8b5cf6;
  --amber: #059669;

  /* Домен-цвета приходят инлайн (style="--dc: <color>") из common.js/HTML;
     без инлайн-стиля работают дефолты. Цвета доменов — из tree.json, они
     уже сочетаются с мятной палитрой. */
  --dc: var(--accent);
  --dc-soft: var(--accent-soft);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-b: var(--font); /* graph.html использует var(--font-b) в инлайн-SVG */
  --shadow: 0 4px 20px -8px rgba(45, 42, 38, 0.10);
  --shadow-hover: 0 16px 36px -14px rgba(45, 42, 38, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(45, 42, 38, 0.32);
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(900px 420px at 12% -80px, rgba(16, 185, 129, 0.08), transparent 70%),
    radial-gradient(800px 500px at 95% 15%, rgba(14, 165, 233, 0.05), transparent 70%),
    radial-gradient(700px 500px at 55% 115%, rgba(16, 185, 129, 0.06), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-dim); }

h1, h2, h3, h4 {
  font-family: var(--font);
  letter-spacing: -0.01em; /* лёгкий негативный трекинг — тренд 2026 */
  line-height: 1.3;
}

/* ---------- Микроанимации 2026: фокус, актив, reduced-motion ---------- */

:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:active, .vote-mini:active, .sp-like:active, .dom-pill:active,
.nav-dd-btn:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Header / навигация (glassmorphism) ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}
.site-header .inner {
  max-width: 1240px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  transition: padding 0.25s var(--ease);
}
.brand { font-weight: 800; font-size: 17px; color: var(--accent-dim); white-space: nowrap; }
.brand small { display: block; color: var(--text-dim); font-size: 11px; font-weight: 500; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
.nav a {
  font-weight: 600; font-size: 14.5px;
  padding: 7px 16px; border-radius: 999px; color: var(--text-dim);
  transition: all 0.2s var(--ease);
}
.nav a:hover { color: var(--accent-dim); background: var(--accent-soft); }
.nav a.active { color: var(--accent-dim); background: var(--accent-soft); }
.header-meta { margin-left: auto; color: var(--text-dim); font-size: 12.5px; text-align: right; white-space: nowrap; }

/* ---------- Шапка при прокрутке: компактный режим ----------
   Меню всегда прижато к верху (position: sticky), но на мобильных шапка
   из трёх строк (бренд/навигация/CTA) съедала пол-экрана. Класс .scrolled
   вешает common.js при scroll > 8px: паддинги ужимаются, на мобильных
   строка бренда скрывается — вверху остаётся только меню + CTA. */

.site-header.scrolled .inner { padding-top: 8px; padding-bottom: 8px; }
.site-header.scrolled .brand small { display: none; }

.page { max-width: 1240px; margin: 0 auto; padding: 28px 24px 70px; }
.page-title { font-size: 34px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
/* Иконка направления в заголовке страницы домена — фирменный цвет (как у эмодзи раньше) */
.page-title .di { color: var(--dc, var(--accent)); }
.page-sub { color: var(--text-dim); margin-bottom: 26px; font-size: 15.5px; max-width: 780px; }

/* ---------- Меню: dropdown направлений ---------- */

.nav-dd { position: relative; display: flex; }
.nav-dd-btn {
  font-family: var(--font); font-weight: 600; font-size: 14.5px;
  padding: 7px 16px; border-radius: 999px; border: none; cursor: pointer;
  color: var(--text-dim); background: transparent;
  transition: all 0.2s var(--ease);
}
.nav-dd-btn:hover, .nav-dd-btn.open { color: var(--accent-dim); background: var(--accent-soft); }
.nav-dd-btn::after { content: "▾"; margin-left: 6px; font-size: 11px; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 280px; display: none; flex-direction: column; gap: 2px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  padding: 8px;
}
.nav-dd-menu.open { display: flex; }
.nav-dd-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px; font-size: 14px; font-weight: 600;
  color: var(--text); transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-dd-menu a:hover { background: var(--accent-soft); color: var(--accent-dim); }
.nav-dd-menu a span { flex: 1; }
.nav-dd-menu a small {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-soft); border-radius: 999px; padding: 2px 8px;
}
.nav-dd-menu a:hover small { color: var(--accent-dim); }

/* Кнопка «+ Предложить идею» в шапке */
.btn-idea { flex-shrink: 0; }
.header-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-cta .header-meta { margin-left: 0; }

/* Счётчик идей в суперпозиции у пункта меню */
.nav-count {
  display: none; font-size: 11px; font-weight: 700; color: #ffffff;
  background: var(--violet); border-radius: 999px; padding: 1px 7px;
  vertical-align: 1px; margin-left: 5px;
}
.nav-count.show { display: inline-block; }
.nav a.active .nav-count { background: var(--accent-dim); }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: 15px;
  padding: 11px 24px; border-radius: 999px; cursor: pointer;
  color: #ffffff; background: var(--accent); border: 1px solid var(--accent);
  transition: all 0.2s var(--ease);
}
.btn:hover { background: var(--accent-dim); border-color: var(--accent-dim); box-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.5); transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.full { opacity: 0.55; }
.btn-sm { padding: 7px 16px; font-size: 13.5px; }
.btn-ghost { background: var(--panel); color: var(--accent-dim); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-dim); border-color: var(--accent); box-shadow: none; }
.btn.voted { background: var(--green); border-color: var(--green); }
.btn.voted:hover { background: var(--accent-dim); border-color: var(--accent-dim); box-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.5); }

/* ---------- Модальное подтверждение ---------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(45, 42, 38, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  padding: 26px 30px; max-width: 420px; width: 100%;
}
.modal-title { font-size: 19px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.modal-text { color: var(--text); font-size: 15px; margin-bottom: 20px; }
.modal-text b { color: var(--accent-dim); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn-danger { background: var(--red); border-color: var(--red); }
.btn-danger:hover { background: #c44545; border-color: #c44545; box-shadow: 0 10px 24px -10px rgba(224, 82, 82, 0.5); }
.modal-lg { max-width: 640px; }
.modal-lg .modal-text { font-size: 14.5px; }

/* ---------- Модал «Предложить идею»: мягкий дружелюбный вид ---------- */

.modal-overlay:has(.idea-modal) { background: rgba(45, 42, 38, 0.26); }
.modal.idea-modal {
  max-width: 660px; padding: 30px 34px 32px;
  background: rgba(255, 255, 255, 0.98);
  animation: idea-modal-in 0.22s var(--ease);
}
@keyframes idea-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.idea-modal .modal-title { font-size: 21px; margin-bottom: 22px; }
.idea-modal .fld { gap: 7px; margin-bottom: 18px; }
.idea-modal .fld > span { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0; }
.idea-modal .fld input, .idea-modal .fld textarea, .idea-modal .fld select {
  background: var(--panel-2);
  border-color: var(--border);
  border-radius: 16px; padding: 13px 17px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.idea-modal .fld input:hover, .idea-modal .fld textarea:hover, .idea-modal .fld select:hover {
  border-color: var(--border-strong);
}
.idea-modal .fld textarea { min-height: 84px; }
.idea-modal .modal-actions { margin-top: 8px; gap: 12px; }
.idea-modal .btn { padding: 12px 26px; }

/* ---------- Модал «Вместо какой идеи?»: 4 блока один под одним ---------- */

.rep-list { display: flex; flex-direction: column; gap: 8px; }
.rep-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 16px;
  font-family: var(--font); font-size: 15px; text-align: left;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rep-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); border-color: var(--green); }
.rep-row:active { transform: scale(0.98); }
.rep-rank { font-weight: 800; color: var(--green); flex-shrink: 0; }
.rep-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.rep-pts { font-weight: 700; color: var(--green); flex-shrink: 0; }
.rep-cancel { justify-content: center; color: var(--text-dim); border-style: dashed; }
.rep-cancel:hover { border-color: var(--border-strong); color: var(--text); box-shadow: none; }

/* ---------- Поля форм (модалка + страница) ---------- */

.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.fld input, .fld textarea, .fld select {
  font-family: var(--font); font-size: 15px; color: var(--text);
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 13px 16px; width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.fld textarea { resize: vertical; min-height: 110px; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.fld select { cursor: pointer; }
.fld > span { font-size: 13px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.02em; }

/* ---------- Аккордеон «Подробнее» ---------- */

details.sx {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden;
  transition: box-shadow 0.2s var(--ease);
}
details.sx summary {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; cursor: pointer; font-weight: 700; font-size: 15px;
  list-style: none; user-select: none;
}
details.sx summary::-webkit-details-marker { display: none; }
details.sx summary::before { content: "▸"; color: var(--accent-dim); transition: transform 0.2s var(--ease); }
details.sx[open] summary::before { content: "▾"; }
details.sx .sx-body { padding: 2px 20px 18px; color: var(--text-dim); font-size: 14px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.kv b { color: var(--text-dim); font-weight: 500; font-size: 12.5px; }
.sx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* ---------- Полоса связей с другими доменами ---------- */

.band {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-top: 24px;
}
.band h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--dc, var(--accent-dim)); }
.band ul { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--text); }
.band .bd-dim { color: var(--text-dim); }
.band a { color: var(--accent-dim); font-weight: 600; }
.band .band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .band .band-grid { grid-template-columns: 1fr; } }

/* ---------- Страница идеи ---------- */

.crumbs { font-size: 13.5px; color: var(--text-dim); margin-bottom: 16px; }
.crumbs a { font-weight: 600; color: var(--accent-dim); }

.idea-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
/* Замок перед названием: h1 — флекс-ряд, чтобы замок и имя шли в одну строку */
.idea-head h1 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 34px; font-weight: 800;
}
.idea-head .idea-sub { color: var(--text-dim); font-size: 16px; max-width: 760px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 22px; }
.step-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow);
  transition: all 0.2s var(--ease);
}
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--dc, var(--border-strong)); }
.step-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; color: var(--accent-dim); }
.step-card p { color: var(--text); font-size: 14.5px; }
.step-card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.step-card li { font-size: 14px; }
.step-card li a { font-weight: 600; }
.step-card li .st-dim { color: var(--text-dim); font-size: 12.5px; }
.sc-empty { color: var(--text-dim); font-size: 13.5px; }

/* ---------- Лесенка на странице идеи (idea.html, над голосованием) ----------
   Инлайн-блок во всю ширину: та же лесенка, что в модале замка. Ступени —
   .ladder/.ladder-step (общий CSS с модалом), здесь снимается скролл-лимит.
   Никаких цифр и пояснений: первая ступень (зелёная) — с чего начать,
   последняя (🎯) — сама идея. */

.idea-ladder {
  background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 26px; margin-bottom: 22px; box-shadow: var(--shadow);
}
.idea-ladder .il-title { font-size: 19px; font-weight: 800; margin-bottom: 12px; }
/* В инлайн-блоке контейнер не ограничивает высоту (в модале — скролл) */
.idea-ladder .ladder { max-height: none; overflow: visible; margin: 0; padding: 0; }

/* Кнопка голоса на странице идеи */
.vote-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f0faf5 0%, #e2f3ea 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 22px; box-shadow: var(--shadow);
}
.vote-hero .vh-txt { flex: 1; min-width: 200px; }
.vote-hero .vh-score { flex-shrink: 0; }
.vote-hero .vh-txt b { font-size: 16px; display: block; }
.vote-hero .vh-txt span { color: var(--text-dim); font-size: 13.5px; }
/* Голос на странице идеи — компактный, как на главной (voteMiniHtml):
   счётчик-сердце или селект места не должны сжиматься в флекс-ряду */
.vote-hero .vote-mini, .vote-hero .vote-rank, .vote-hero .btn { flex-shrink: 0; }

/* Иконка домена в списках «Что откроется после» и других списках */
.st-ic { margin-right: 6px; }

/* ---------- Обсуждение на странице идеи ---------- */

.discuss-card {
  background: linear-gradient(180deg, var(--panel), #f4fbf7);
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px 20px;
  margin-top: 26px;
}
.discuss-head h2 { font-size: 21px; font-weight: 800; margin-bottom: 10px; }

/* Комментарий, отмеченный админом */
.comment .c-like {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--green); border: 1px solid #b7e6cf; background: #ecf8f2;
  border-radius: 999px; padding: 1px 8px;
}

/* ---------- Комментарии ---------- */

.comment { border-left: 3px solid var(--border-strong); padding: 6px 0 6px 14px; margin: 10px 0; }
.comment.reply { margin-left: 24px; border-left-color: var(--accent); }
.comment .c-head { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 10px; }
.comment .c-head b { color: var(--accent-dim); }
.comment .c-text { font-size: 16px; margin-top: 3px; color: var(--text); line-height: 1.55; }
.comment-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.comment-form textarea {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: 12px 16px; border-radius: 14px; font-size: 15px;
  font-family: var(--font); resize: vertical; min-height: 80px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.comment-form textarea:hover { border-color: var(--border-strong); }
.comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.comment-form .btn { align-self: flex-end; padding: 10px 18px; }
.comment-empty { color: var(--text-dim); font-size: 14px; }

/* Лайк админа за помощь в реализации (idea.html) */
.c-like-btn {
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--accent-dim); font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.c-like-btn:hover { border-color: var(--green); color: var(--green); }

/* Панель администратора на странице идеи: статус */
.admin-box {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 13px; color: var(--text-dim);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 10px 14px; background: var(--accent-soft);
}
.admin-box b { color: var(--accent-dim); }
.admin-box select {
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 5px 8px; font-size: 13px; background: var(--panel); color: var(--text);
}

/* ---------- Ход работ (roadmap) ---------- */

.now-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 12px; border-radius: 999px;
  color: #ffffff; background: var(--accent);
}
.ph-unlocks { margin-top: 12px; font-size: 13.5px; color: var(--text-dim); }
.ph-unlocks .arrow { color: var(--green); font-weight: 700; }
.ph-unlocks a { font-weight: 600; color: var(--accent-dim); }

/* ---------- Мини-кнопка голоса на карточках ---------- */

/* Сердце-кнопка: большое сердце — фон, поверх — цифра (стиль +3) */
.vote-mini {
  position: relative;
  display: inline-flex;
  width: 48px; height: 44px;
  cursor: pointer; user-select: none; flex-shrink: 0;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.vote-mini:hover { transform: translateY(-1px) scale(1.05); }
.vote-mini:active { transform: scale(0.96); }
.vote-mini.full { opacity: 0.55; }
.vote-mini.full:hover { transform: translateY(-1px) scale(1.05); }
.vote-mini.done { opacity: 0.5; cursor: default; }
.vote-mini.done:hover { transform: none; }

/* ---------- Счётчик-сердце «+3»: сердце-фон + цифра поверх ---------- */

.heart-score {
  position: relative;
  display: inline-flex;
  width: 52px; height: 48px;
  flex-shrink: 0;
  line-height: 1;
}
.heart-score > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 8px rgba(5, 150, 105, 0.35));
}
.heart-score > b {
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 19px; font-weight: 800; color: #ffffff;
  text-shadow: 0 1px 2px rgba(6, 78, 59, 0.5);
}
/* Формат «+3» на сердце: маленький + и крупная цифра (как было в топ-3) */
.heart-score > b.hs-x {
  display: flex; align-items: baseline; gap: 1px;
  white-space: nowrap;
}
.heart-score > b.hs-x small { font-size: 0.55em; font-weight: 700; }
.heart-score > b.hs-x strong { font-size: 1.12em; font-weight: 800; }
.heart-score.hs-btn { width: 48px; height: 44px; }
.heart-score.hs-btn > b { font-size: 15px; }
.heart-score.hs-sm { width: 38px; height: 35px; }
.heart-score.hs-sm > b { font-size: 14px; top: 47%; }
.heart-score.hs-lg { width: 64px; height: 58px; }
.heart-score.hs-lg > b { font-size: 24px; }

/* Инлайн-сердце в тексте: «Получает 3 ♥» */
.ht {
  width: 1.05em; height: 1.05em;
  display: inline-block;
  vertical-align: -0.18em;
  filter: drop-shadow(0 1px 2px rgba(5, 150, 105, 0.3));
}

/* Инлайн-SVG иконка направления (common.js ICONS/domainIcon): размер в 1em —
   следует за font-size контекста (пилюли 13.5px, заголовок 34px, dm-icon 19px).
   Цвет — фирменный домена везде: --dc приходит инлайн на самой иконке
   (ICONS) или с контейнера; вне доменного контекста — цвет текста.
   Иконки этапов/уровней (phaseIcon/levelIcon) без --dc — наследуют цвет
   контейнера (.dm-icon красит их в --dc домена или акцент). */
.di {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.16em;
  flex-shrink: 0;
  color: var(--dc, currentColor);
}
/* Активная пилюля меню/футера залита фирменным цветом — иконка белая */
.dom-pill.on .di { color: #ffffff; }

/* Медали мест в топе: золото/серебро/бронза вместо зелёного */
.vote-mini.rank-1 { color: #ffffff; background: #059669; border-color: #047857; }
.vote-mini.rank-1:hover { background: #047857; }
.vote-mini.rank-2 { color: #ffffff; background: #9aa7b1; border-color: #7f8d98; }
.vote-mini.rank-2:hover { background: #84929d; }
.vote-mini.rank-3 { color: #ffffff; background: #c98d5a; border-color: #b07442; }
.vote-mini.rank-3:hover { background: #b57a49; }

/* Селект выбора места на карточке — в стиле кнопок проекта (.btn),
   компактная версия; крупная — в .vote-hero на странице идеи.
   Нативная стрелка убрана (appearance:none) — вместо неё кастомная
   SVG-стрелка с отступом от края (в Safari/Firefox нативная прилипает
   вплотную к углу). */
.vote-rank {
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  color: #ffffff; background-color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 7px 34px 7px 14px; cursor: pointer; outline: none;
  max-width: 170px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  transition: all 0.2s var(--ease);
}
.vote-rank:hover, .vote-rank:focus {
  background-color: var(--accent-dim); border-color: var(--accent-dim);
  box-shadow: 0 8px 18px -8px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

/* Крупный селект в блоке голоса на странице идеи — в стиле кнопок проекта
   (.btn): зелёный акцент, белый текст, пилюля. Карточки остаются компактными */
.vote-hero .vote-rank {
  font-family: var(--font); font-weight: 600; font-size: 15px;
  color: #ffffff; background-color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 11px 38px 11px 24px; min-width: 210px; max-width: none; cursor: pointer; outline: none;
  transition: all 0.2s var(--ease);
}
.vote-hero .vote-rank:hover, .vote-hero .vote-rank:focus {
  background-color: var(--accent-dim); border-color: var(--accent-dim);
  box-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

/* ---------- Лента идей по доменам (главная) ---------- */

.dom-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.dom-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 13.5px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.dom-pill:hover { color: var(--accent-dim); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.dom-pill.on { color: #ffffff; background: var(--dc, var(--accent)); border-color: var(--dc, var(--accent)); }
.dom-pill .dom-count {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-soft); border-radius: 999px; padding: 2px 8px;
}
.dom-pill.on .dom-count { color: var(--dc, var(--accent-dim)); background: #ffffff; }

.dm-section { margin-bottom: 34px; scroll-margin-top: 84px; }
.dm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.dm-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--dc-soft, var(--accent-soft));
  border: 1px solid var(--border);
  /* Иконки направлений (.di) в кружке секции — фирменный цвет домена */
  color: var(--dc, var(--accent));
}
/* Страницы направлений (domain.html): бордер кружка — в цвет направления,
   толщина 2px (вместо нейтрального 1px на главной) */
.dom-page .dm-icon { border: 2px solid var(--dc, var(--accent)); }
/* «Ход работ» (roadmap.html): тот же стиль бордера, но цвет как у кнопок
   (--accent), заливка белая, иконка остаётся акцентной */
.page-rm .dm-icon {
  background: #ffffff;
  border: 2px solid var(--accent);
}
.dm-head h2 { font-size: 22px; font-weight: 800; }
.dm-head .lvl-note { color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
.dm-count-badge { margin-left: auto; color: var(--text-dim); font-size: 13px; font-weight: 600; }
.dm-desc { color: var(--text-dim); font-size: 14px; margin-bottom: 12px; max-width: 860px; }

.dm-feed { display: flex; flex-direction: column; gap: 12px; }
.dm-empty { color: var(--text-dim); font-size: 14px; padding: 12px 4px; }

/* Плашка идеи на всю ширину: тело слева, теги и голос справа.
   Фон — зелёный (тот же «зелёный стиль», что у блоков «Мой топ-3»/
   «Ваши предложения»); статус читается по толстому бордеру слева и бейджу. */
.feed-card {
  position: relative; display: flex; align-items: flex-start; gap: 18px;
  width: 100%;
  background: linear-gradient(135deg, #f2faf6 0%, #e6f5ec 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  border-left: 4px solid var(--border-strong);
  padding: 16px 20px; box-shadow: var(--shadow); cursor: pointer;
  transition: all 0.2s var(--ease);
}
/* ⚠️ TRAP[UX]: при наведении бордер — ЕДИНЫЙ акцентный цвет (--accent), а не
   доменный --dc. Смена на --dc домена перегружала визуально («перегруз»),
   потому бордер при наведении красится в один общий зелёный. */
.feed-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
/* Статусы — базовое состояние левого бордера (без hover) */
.feed-card.st-draft    { border-left-style: dashed; }
.feed-card.st-check    { border-left-style: dashed; border-left-color: #b49ae0; }
.feed-card.st-approved { border-left-color: var(--green); }
.feed-card.st-work     { border-left-color: var(--cyan); }
.feed-card.st-done     { border-left-color: var(--green); }
.feed-card.st-rejected { border-left-color: var(--red); border-left-style: dashed; }
/* ⚠️ TRAP[UX]: hover-правило обязано стоять ПОСЛЕ .st-* — специфичность
   .feed-card:hover и .feed-card.st-* одинаковая (0,2,0), побеждает позднее
   правило. Иначе левый бордер остаётся в цвете статуса и не перекрашивается.
   Единый цвет при наведении — --accent (без доменного --dc). */
.feed-card:hover { border-left-color: var(--accent); border-left-style: solid; }
/* ⚠️ TRAP[UX]: затемнение .locked убрано — зависимости читаются по замку
   (fc-lock, клик — модал «Задачи для разблокировки»), списка «Нужно
   сначала» в карточках больше нет. Класс .locked остаётся семантическим
   маркером «есть зависимости». */

.fc-body { flex: 1; min-width: 0; }
/* Левая колонка плашки: сердце сверху, замок — в левом нижнем углу.
   Растягивается на всю высоту карточки (align-self: stretch), чтобы
   justify-content: space-between прижимал замок к нижнему краю. */
.fc-left {
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  align-self: stretch; gap: 10px; flex-shrink: 0;
}
.fc-score { flex-shrink: 0; display: flex; align-items: center; }
.fc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
/* Замок «требует подготовки» — размером с сердечко (как .heart-score.hs-btn:
   48×44). Клик открывает модал с задачами, которые нужно решить для
   разблокировки идеи. Счётчик «хN» (fc-lock-n) — сколько таких задач осталось. */
.fc-lock {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  width: 48px; height: 44px;
  color: var(--text-dim);
  border-radius: 12px;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.fc-lock svg { width: 30px; height: 30px; }
.fc-lock:hover { color: var(--accent-dim); background: var(--accent-soft); transform: translateY(-1px); }
.fc-lock:active { transform: scale(0.96); }
/* Компактный замок перед названием идеи — в строке заголовка плашки (fc-title)
   и перед H1 на странице идеи: инлайн-иконка вместо блока 48×44 */
.fc-title .fc-lock,
.idea-head h1 .fc-lock {
  width: auto; height: auto;
  padding: 3px 7px; border-radius: 9px;
}
.fc-title .fc-lock svg,
.idea-head h1 .fc-lock svg { width: 19px; height: 19px; }
.fc-title .fc-lock-n,
.idea-head h1 .fc-lock-n {
  right: -4px; bottom: -4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  font-size: 9px; font-weight: 800;
  border-width: 1.5px;
}
/* Счётчик блокеров: «хN» в правом нижнем углу замка (N — осталось задач) */
.fc-lock-n {
  position: absolute; right: -5px; bottom: -5px;
  min-width: 20px; height: 20px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--red); color: #ffffff;
  font-size: 11px; font-weight: 800; line-height: 1;
  border: 2px solid var(--panel);
  box-shadow: 0 1px 5px rgba(45, 42, 38, 0.28);
}
.fc-name { font-weight: 800; font-size: 16.5px; color: var(--text); }
.fc-name:hover { color: var(--accent-dim); }
.fc-desc {
  color: var(--text-dim); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 860px;
}

.fc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.fc-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Модал «Задачи для разблокировки» (клик по замку плашки) ----------
   Ступени по порядку: первая (зелёная) — с чего начать, дальше вниз-вправо
   по лесенке к идее. Глубина — отступом через --lvl. Без нумерации. */

.ladder-modal .modal-text { margin-bottom: 14px; }
.ladder {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 52vh; overflow-y: auto;
  margin-bottom: 16px; padding: 4px 2px 4px 4px;
}
.ladder-step {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 11px;
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 11px;
  margin-left: calc(var(--lvl, 0) * 18px);
}
/* Первая ступень — с чего начать */
.ladder-step.first { border-color: var(--green); background: var(--accent-soft); }
/* Ступень-цель: сама идея в конце лесенки (страница идеи) */
.ladder-step.self {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}
.ladder-step.self .ls-name { font-weight: 800; }
/* Выполненные ступени — уже готовы */
.ladder-step.done { opacity: 0.55; }
.ls-ic { font-size: 16px; line-height: 1; }
.ls-name { font-weight: 700; color: var(--text); }
.ls-name:hover { color: var(--accent-dim); }
.ladder-step .chip { font-size: 11px; }
.ladder-step .badge { font-size: 10px; }

/* ---------- Лесенка домена (domain.html): цепочки идей, идущих одна за одной.
   Ступени переиспользуют .ladder/.ladder-step модала: первая (зелёная) —
   с чего начать, дальше по лесенке вниз-вправо. Без нумерации. ---------- */

.chains { display: flex; flex-direction: column; gap: 20px; }
.chain { display: flex; flex-direction: column; gap: 7px; }
.chain-cap {
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-dim);
}
/* В секции лесенки контейнер не ограничивает высоту (в модале — скролл) */
.chain-ladder {
  max-height: none; overflow: visible;
  margin: 0; padding: 0;
}

@media (max-width: 720px) {
  .feed-card { flex-direction: column; gap: 12px; }
  /* На мобильном колонка не растягивается: сердце сверху, замок прямо под ним */
  .fc-left { align-self: flex-start; justify-content: flex-start; }
  .fc-side { align-items: flex-start; width: 100%; }
  .fc-tags { justify-content: flex-start; }
}

/* ---------- Блок «Мои выбранные идеи» ---------- */

.my-block {
  background: linear-gradient(135deg, #f2faf6 0%, #e6f5ec 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 28px; margin-bottom: 30px; box-shadow: var(--shadow);
}
/* Блоки «Ваши предложения» и «Мой топ-3 идей» скрыты, пока пусты:
   renderMySuggestions()/renderMy() отдают пустую разметку, когда идей/лайков нет */
.my-block:empty { display: none; }
.my-block .mb-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.my-block .mb-head h2 { font-size: 21px; font-weight: 800; }
.my-block .mb-count { font-size: 13.5px; color: var(--text-dim); }
.my-block .mb-count b { color: var(--accent-dim); }

/* Топ-3: строки с медалью места, очками и селектом перестановки */
.my-ranks { display: flex; flex-direction: column; gap: 10px; }
.mr-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow);
  transition: all 0.2s var(--ease);
}
.mr-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--dc, var(--border-strong)); }
.mr-medal {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mr-txt { flex: 1; min-width: 0; }
.mr-name { font-weight: 700; font-size: 14.5px; display: block; }
.mr-name:hover { color: var(--accent-dim); }
.mr-sub { color: var(--text-dim); font-size: 13px; }
.mr-sub b { color: var(--accent-dim); }
/* Селект места в «Моём топ-3» — та же кнопка-пилюля, что и в лентах */
.mr-rank {
  flex-shrink: 0; font-family: var(--font); font-size: 13.5px; font-weight: 600;
  color: #ffffff; background-color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 7px 34px 7px 14px; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  transition: all 0.2s var(--ease);
}
.mr-rank:hover, .mr-rank:focus {
  background-color: var(--accent-dim); border-color: var(--accent-dim);
  box-shadow: 0 8px 18px -8px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}
@media (max-width: 560px) {
  .mr-row { flex-wrap: wrap; }
  .mr-rank { margin-left: 50px; }
}

/* ---------- Блок «Рейтинг идей» (главная) — агрегация голосов ---------- */

.rt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel);
  transition: all 0.2s var(--ease);
}
.rt-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--dc, var(--border-strong)); }
.rt-rank {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  background: var(--accent-soft); color: var(--text-dim);
}
.rt-rank.r1 { background: #059669; color: #ffffff; }
.rt-rank.r2 { background: #9aa7b1; color: #ffffff; }
.rt-rank.r3 { background: #c98d5a; color: #ffffff; }
.rt-txt { flex: 1; min-width: 0; }
.rt-txt a { font-weight: 700; font-size: 14.5px; display: block; }
.rt-txt a:hover { color: var(--accent-dim); }
.rt-txt span { color: var(--text-dim); font-size: 12.5px; display: block; }
.rt-score { display: flex; align-items: center; white-space: nowrap; }

/* ---------- Легенда ---------- */

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0 8px; color: var(--text-dim); font-size: 13.5px; align-items: center; }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Бейджи ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.k-base   { color: #6b727e; border-color: #d5dae2; background: #eef0f4; }
.k-skill  { color: #3f7fb8; border-color: #c9dff0; background: #eef5fa; }
.k-combo  { color: #059669; border-color: #b7e6cf; background: #ecf8f2; }
.k-agent  { color: #7b5cd6; border-color: #d8cdf0; background: #f3eefc; }
.k-service{ color: #c44545; border-color: #eecfcf; background: #faeeee; }
.b-ai     { color: #059669; border-color: #b7e6cf; background: #ecf8f2; }
.b-user   { color: #7b5cd6; border-color: #d8cdf0; background: #f3eefc; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 4px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text);
  white-space: nowrap;
}

/* ---------- Статусы задач ---------- */

.st-draft    { color: #6b6258; border-color: #d8cfc0; background: #f3efe6; }
.st-check    { color: #7b5cd6; border-color: #d8cdf0; background: #f3eefc; }
.st-approved { color: #059669; border-color: #b7e6cf; background: #ecf8f2; }
.st-work     { color: #3f7fb8; border-color: #c9dff0; background: #eef5fa; }
.st-done     { color: #059669; border-color: #b7e6cf; background: #ecf8f2; }
.st-rejected { color: #c44545; border-color: #eecfcf; background: #faeeee; }

/* ---------- Тултип ---------- */

.tooltip {
  position: fixed; z-index: 100; width: 330px; max-width: 88vw;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--dc, var(--accent)); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  font-size: 13.5px; pointer-events: none;
}
.tooltip .tt-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.tooltip .tt-desc { color: var(--text-dim); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tooltip .tt-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 5px; font-size: 12.5px; }
.tooltip .tt-open { color: var(--green); }

/* ---------- Граф зависимостей (техстраница, не в меню) ---------- */

.graph-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); }
.graph-box svg { display: block; }
.g-node { cursor: pointer; }
.g-node rect { transition: stroke-width 0.12s ease; }
.g-node:hover rect { stroke-width: 2.5; }
.g-node text { font-size: 11.5px; fill: var(--text); }
.g-selected rect { stroke-width: 3; stroke-dasharray: 5 3; }
.g-edge { fill: none; stroke-width: 1.4; opacity: 0.55; }
.g-col-label { font-family: var(--font); font-size: 11px; letter-spacing: 0.1em; fill: var(--text-dim); text-transform: uppercase; }

.picker { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.picker select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
  padding: 9px 14px; border-radius: 999px; font-size: 14.5px; min-width: 360px; font-family: var(--font);
}
.picker select:focus { outline: none; border-color: var(--accent); }

/* ---------- Утилиты ---------- */

.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-20 { margin-top: 20px; } .mb-12 { margin-bottom: 12px; }
.flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.dim { color: var(--text-dim); }
.small { font-size: 13px; }
.tright { text-align: right; }
.hidden { display: none !important; }

.err-box {
  border: 1px solid var(--red); background: rgba(224, 82, 82, 0.08); color: #b04545;
  padding: 22px 26px; border-radius: var(--radius); font-size: 15px;
}
.err-box a { color: var(--accent-dim); text-decoration: underline; font-weight: 600; }

footer { border-top: 1px solid var(--border); margin-top: 50px; padding: 20px 24px 34px; color: var(--text-dim); font-size: 12.5px; }
footer .inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
footer .foot-label { font-weight: 700; }
footer .foot-nav { display: flex; gap: 8px; flex-wrap: wrap; }
footer .foot-meta { margin-left: auto; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
footer .dom-pill {
  font-size: 12.5px; padding: 6px 12px; font-weight: 600;
  text-decoration: none; color: var(--text-dim);
  border-color: var(--border);
}
footer .dom-pill:hover { color: var(--accent-dim); border-color: var(--accent); transform: translateY(-1px); }
footer .dom-pill.on { color: #ffffff; background: var(--dc, var(--accent)); border-color: var(--dc, var(--accent)); }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #d9cfc0; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #c4b6a2; }

/* ============================================================
 * СУПЕРПОЗИЦИЯ ИДЕЙ + НОВОЕ МЕНЮ (v6)
 * Меню: dropdown направлений, кнопка «+ Предложить идею», счётчик.
 * Страница суперпозиции: hero-объяснение, форма, лента идей, коллапс.
 * ============================================================ */

/* ---------- Бейдж «предложено сотрудником» ---------- */

.b-user { color: #7b5cd6; border-color: #d8cdf0; background: #f3eefc; }

/* ---------- Лайк на карточке идеи сотрудника ---------- */
/* sp-like — единственный живой класс из блока суперпозиции: генерируется
   в common.js Ideas.likeMiniHtml(). Остальные sp-* классы и страница
   суперпозиции удалены в макете v6 (не использовались). */
.sp-like {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; user-select: none;
  padding: 5px 12px; border-radius: 999px;
  color: var(--violet); border: 1px solid var(--violet); background: #f7f3fd;
  transition: all 0.2s var(--ease);
}
.sp-like:hover { background: #ede4f9; transform: translateY(-1px); }
.sp-like.liked { color: #ffffff; background: var(--violet); border-color: var(--violet); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 300;
  transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--violet); border-radius: 16px;
  padding: 13px 20px; box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); max-width: 92vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast a { font-weight: 700; color: var(--accent-dim); }

/* ============================================================
 * Роли: «Сотрудник» (по умолчанию) или «Администратор».
 * ⚠️ TRAP[CLEANUP]: кнопка-переключатель ролей удалена по запросу
 * пользователя (Role.mount в common.js не вызывается). CSS-классы
 * .role-switch* удалены вместе с кнопкой; role-admin остаётся для
 * стилизации шапки при сохранённой в localStorage роли админа.
 * ============================================================ */

.role-admin .header-meta { color: var(--accent-dim); }

/* Кнопка «Утвердить» (админ) */
.btn-ok { background: var(--green); border-color: var(--green); }
.btn-ok:hover { background: var(--accent-dim); border-color: var(--accent-dim); box-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.5); }

/* ============================================================
 * Адаптивность v7 (mobile)
 * Мобильная стратегия макета: тач-таргеты ≥44px, iOS safe-area,
 * брейкпоинты ≤720px (мобильный) / 721–959px (планшет) / ≥960px (десктоп).
 * ВСЕ мобильные правила изолированы в media-запросах либо в точечных
 * глобальных правках (step-grid/лесенка/clamp/safe-area) — десктоп ≥960px
 * визуально не меняется. Существующие media 760/720/560 не трогаем.
 * ============================================================ */

/* ---------- iOS safe-area (D7): модалы и toast не прилипают к home indicator.
   Без поддержки env() даёт 0 → max() возвращает прежние значения (20px/26px). ---------- */

.modal-overlay { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.toast { bottom: max(26px, env(safe-area-inset-bottom)); }

/* ---------- D3 fix: step-grid не переполняет узкие контейнеры (320px).
   min(280px, 100%) — колонка сжимается до ширины контейнера вместо
   жёстких 280px (горизонтальное переполнение ~8px на iPhone SE). ---------- */

.step-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ---------- D6 fix: лесенка не уезжает за экран на глубоких цепочках.
   min(18px, 3vw): на 320px шаг ≈ 10px, на десктопе — прежние 18px. ---------- */

.ladder-step { margin-left: calc(var(--lvl, 0) * min(18px, 3vw)); }

/* ---------- D10 fix: типографика заголовков масштабируется (clamp).
   На десктопе 7vw ≥ 34px → значение прежнее; на 320px — минимум 26px. ---------- */

.page-title, .idea-head h1 { font-size: clamp(26px, 7vw, 34px); }

/* ---------- Мобильная навигация без гамбургера: .nav всегда видима,
   flex-wrap переносит пункты на узких экранах (см. media ≤720px ниже). ---------- */

/* ---------- D11 fix: граф не растягивает страницу по вертикали ---------- */

.graph-box { max-height: 70vh; }

/* ---------- Подсказка свайпа в графе (graph.html): скрыта по умолчанию,
   показывается на тач-устройствах (pointer: coarse), прячется при первом
   touchstart (JS в graph.html добавляет .hidden-hint). ---------- */

.graph-hint { display: none; }

/* ---------- D8 fix: тултипы отключены на тач-устройствах (pointer: coarse).
   Узлы графа остаются ссылками — вся информация доступна кликом. На
   гибридных устройствах (тач+мышь) media (pointer: fine) применяется
   автоматически, тултип работает по мыши. Здесь же — подсказка свайпа. ---------- */

@media (pointer: coarse) {
  .tooltip { display: none !important; }
  .graph-hint {
    display: flex; align-items: center; justify-content: center;
    position: sticky; top: 0; z-index: 5;
    margin: 0 auto;
    width: fit-content; max-width: calc(100% - 20px);
    padding: 8px 16px; border-radius: 0 0 12px 12px;
    background: var(--accent-soft); color: var(--accent-dim);
    border: 1px solid var(--border-strong); border-top: 0;
    font-size: 13px; font-weight: 600;
    pointer-events: none;
    box-shadow: var(--shadow);
  }
  .graph-hint.hidden-hint { display: none; }
}

/* ---------- Мобильный ≤720px: навигация всегда видима (без гамбургера),
   переносится flex-wrap; CTA-кнопка «+ Предложить идею» уходит на
   собственную строку. Тач-таргеты ≥44px (D2) + D4/D5 ---------- */

@media (max-width: 720px) {
  /* Тач-таргеты ≥44px: навигация, dropdown, пилюли, кнопки, селекты, замок.
     min-height:44px добавлен там, где паддинги дают <44px (btn-sm, dom-pill). */
  .nav a { padding: 11px 18px; }
  .nav-dd-btn { padding: 11px 18px; }
  .dom-pill { padding: 11px 18px; min-height: 44px; }
  .btn-sm { padding: 10px 20px; min-height: 44px; }
  .vote-rank { min-height: 44px; }
  .mr-rank { min-height: 44px; }
  .fc-lock { width: 44px; height: 44px; }

  /* Навигация: собственная строка под брендом, пункты переносятся.
     Гамбургер удалён — меню не скрывается и не требует toggle. */
  .nav {
    display: flex; flex-wrap: wrap; width: 100%;
    margin-left: 0; padding-top: 2px;
  }

  /* D4 fix: picker — селект на всю ширину (graph.html) */
  .picker { flex-direction: column; align-items: stretch; }
  .picker select { min-width: 0; width: 100%; }

  /* D5 fix: dropdown «Направления» прижат к правому краю шапки,
     не вылезает за экран при переносе кнопки */
  .nav-dd-menu { left: auto; right: 0; }

  /* CTA: собственная строка под навигацией, кнопка прижата вправо */
  .header-cta { width: 100%; }
  .header-cta .btn-idea { margin-left: auto; }

  /* Компактный режим при скролле (класс .scrolled от common.js):
     бренд скрыт, пилюли и кнопка ужаты — меню остаётся сверху,
     контент под шапкой виден */
  .site-header.scrolled .brand { display: none; }
  .site-header.scrolled .inner { padding: 8px 16px; gap: 8px; }
  .site-header.scrolled .nav { padding-top: 0; }
  .site-header.scrolled .nav a,
  .site-header.scrolled .nav-dd-btn { padding: 8px 14px; }
  .site-header.scrolled .header-cta .btn-idea { padding: 8px 14px; min-height: 40px; }
}

/* ---------- Узкий мобильный ≤480px: полировка паддингов (D9) + CTA на всю ширину ---------- */

@media (max-width: 480px) {
  .modal { padding: 20px 18px; }
  .modal-overlay { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .idea-modal { padding: 22px 20px; }
  .my-block { padding: 18px 16px; }
  .page { padding: 20px 14px 60px; }
  .comment.reply { margin-left: 10px; }

  /* Кнопка «+ Предложить идею»: на малых телефонах — полноширинная
     строка (не сжимается рядом с остальными элементами шапки) */
  .header-cta .btn-idea { width: 100%; justify-content: center; }
}