/* Cyberpunk Wiki: Neon & ASCII Brutalism */
/* палитры — в модуле тем: static/css/themes.css (:root = дефолт) */

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

body {
  font-family: 'JetBrains Mono', 'Fira Code', 'Space Mono', 'Consolas', monospace;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content { max-width: none; }   /* авторастяжение: ширину задаёт сетка */

/* ASCII hover effects — только для inline-ссылок внутри абзацев контента */
a {
  color: var(--neon-cyan);
  text-decoration: none;
  transition: color 0.15s ease, text-shadow 0.15s ease;
  text-shadow: 0 0 5px rgba(3, 216, 243, 0.3);
}

a:hover {
  color: var(--neon-yellow);
  text-shadow: var(--glow-yellow);
}

/* скобки [ ] появляются только у ссылок в тексте статей (внутри <p>).
   inline-block делает ссылку единым box — иначе при переносе строки
   ::before/::after уезжают к краям блока и скобка «разъезжается». */
.main-content p a,
.main-content li a {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.main-content p a::before,
.main-content p a::after,
.main-content li a::before,
.main-content li a::after {
  content: '';
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.main-content p a::before,
.main-content li a::before { left: -14px; content: '['; transform: translateX(4px); }
.main-content p a::after,
.main-content li a::after  { right: -14px; content: ']'; transform: translateX(-4px); }
.main-content p a:hover::before,
.main-content p a:hover::after,
.main-content li a:hover::before,
.main-content li a:hover::after { opacity: 1; transform: translateX(0); }

/* навигация, заголовки списков и ссылки внутри <li> — без скобок */
.nav-link::before, .nav-link::after,
.page-title::before, .page-title::after { content: none; }
/* ссылки в списках (главная/MOC) — тот же ховер со скобками, что в абзацах */

/* Active state */
a.active { color: var(--neon-yellow); }

/* Закреплённая шапка (крошки+admin+подписка): sticky-полоса над сеткой,
   той же ширины/выступов, что и .layout — панель плывёт над контентом */
.page-head {
  position: sticky; top: 0.9rem; z-index: 35;
  width: 100%; max-width: 1520px; margin: 1.8rem auto 0;
  padding: 0 2rem;
}

/* Layout grid */
.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 250px;
  grid-template-areas: "side main right";
  gap: 1.4rem 2.2rem;
  width: 100%;         /* обязательно: без этого margin:auto во flex-колонке
                          отключает растяжение и блок сжимается по контенту */
  max-width: 1520px;
  margin: 0 auto;      /* на широких экранах держим блок по центру */
  padding: 1.2rem 2rem 2rem;
  flex: 1;
  align-items: start;
}
.layout > .sidebar { grid-area: side; }
.layout > .main-content { grid-area: main; min-width: 0; }
.layout > .graph-col { grid-area: right; }
.layout > .graph-col .graph-panel { position: static !important; top: auto; right: auto;
                                    width: auto; padding: 0.6rem; }
.graph-col { position: sticky; top: 4.4rem; }
/* правая колонка зарезервирована ВСЕГДА (десктоп): заметка и шапка держат
   одну и ту же ширину на страницах с картой и без неё — без «скачки»
   при переходах между заметками */


/* ASCII Sidebar */
.sidebar {
  position: sticky;
  top: 2rem;
  height: fit-content;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

.sidebar-header {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--neon-yellow);
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}

.sidebar-header::before {
  content: '//';
  margin-right: 0.5rem;
  opacity: 0.7;
}

/* Сайдбар: свёрнутые разделы через <details> */
.nav-list { display: flex; flex-direction: column; gap: 0.15rem; }

.nav-cat { margin-bottom: 0.2rem; }

.nav-cat-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: var(--text-dim);                       /* тихий: не маджента */
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0.32rem 0.2rem;
  border-left: 2px solid transparent;
  user-select: none;
  transition: color 0.15s ease;
}
.nav-cat-head::-webkit-details-marker { display: none; }
.nav-cat-head::before {
  content: '▸';
  color: inherit;                               /* стрелка в тон тексту */
  margin-right: 0.4rem;
  display: inline-block;
  transition: transform 0.15s ease;
}
.nav-cat-head:hover { color: var(--neon-cyan); }
.nav-cat[open] > .nav-cat-head { color: var(--neon-cyan); border-left-color: var(--border); }
.nav-cat[open] > .nav-cat-head::before { content: '▾'; }
.nav-cat-name { flex: 1; }
.nav-cat-count {
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0;
}

.nav-cat-pages {
  display: flex;
  flex-direction: column;
  padding: 0.2rem 0 0.4rem 0.5rem;
}

/* вложенные подразделы (группировка вида 00-Теория/01-Основы-агентов) */
.nav-cat--sub { margin: 0.05rem 0; }
.nav-cat--sub > .nav-cat-head { font-size: 0.64rem; padding: 0.26rem 0.2rem; }
.nav-cat--sub .nav-link { font-size: 0.72rem; }

.nav-link {
  display: block;
  padding: 0.22rem 0 0.22rem 0.6rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}

.nav-link:hover {
  color: var(--neon-cyan);
  border-left-color: var(--neon-cyan);
  padding-left: 0.9rem;
}

.nav-link.active {
  color: var(--neon-yellow);
  border-left-color: var(--neon-yellow);
  text-shadow: var(--glow-yellow);
}

/* Main content */
.main-content { min-width: 0; }

/* ASCII dividers */
.divider {
  color: var(--neon-cyan);
  font-size: 0.7rem;
  letter-spacing: 3px;
  margin: 2rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.divider::before,
.divider::after {
  content: '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~';
  opacity: 0.3;
}

/* Terminal frame */
.terminal-frame {
  border: 1px solid var(--border);
  padding: 1.5rem;
  position: relative;
}

.terminal-frame::before {
  content: '┌─────────────────────────────────────────────┐';
  position: absolute;
  top: -2px;
  left: -1px;
  color: var(--neon-cyan);
  font-size: 0.7rem;
  white-space: pre;
}

.terminal-frame::after {
  content: '└─────────────────────────────────────────────┘';
  position: absolute;
  bottom: -2px;
  left: -1px;
  color: var(--neon-cyan);
  font-size: 0.7rem;
  white-space: pre;
}

/* Content typography */
h1, h2, h3 { 
  margin: 2rem 0 1rem; 
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1 { 
  font-size: 1.5rem; 
  border-bottom: 2px solid var(--neon-yellow); 
  padding-bottom: 0.5rem;
  text-shadow: var(--glow-yellow);
}


h2 { 
  font-size: 1.1rem; 
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}

h2::before { content: '>> '; color: var(--neon-cyan); }

h3 { 
  font-size: 0.95rem; 
  color: var(--neon-magenta);
}

p { margin: 1rem 0; color: var(--text-body); }

/* иерархия внутри текста: важное — светлее базы, глаз цепляется */
.main-content strong, .main-content b { color: #ECF1F9; font-weight: 700; }
.main-content mark {
  background: rgba(252, 238, 12, 0.12);
  color: var(--neon-yellow);
  padding: 0 0.3rem;
}
.main-content kbd {
  font-family: inherit;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--neon-yellow);
  padding: 0.1rem 0.4rem;
  font-size: 0.85em;
  border-radius: 3px;
}
.main-content blockquote {
  border-left: 2px solid var(--neon-magenta);
  background: rgba(255, 0, 255, 0.04);
  padding: 0.4rem 1rem;
  margin: 1.2rem 0;
  color: var(--text-dim);
  font-style: italic;
}
.main-content hr {
  border: none;
  height: 1px;
  margin: 2rem 0;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}
.main-content table {
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.9em;
}
.main-content th, .main-content td {
  border: 1px solid rgba(3, 216, 243, 0.25);
  padding: 0.4rem 0.8rem;
  text-align: left;
}
.main-content th { color: var(--neon-cyan); text-transform: uppercase; font-size: 0.85em; letter-spacing: 1px; }

/* Контентные списки — стильный неон-маркер вместо дефолтных точек.
   Вложенность читается: уровень 1 › (циан), уровень 2 · (маджента),
   нумерованные — цветные номера, у вложенных тише */
.main-content ul { list-style: none; padding-left: 1.5rem; margin: 1rem 0; }
.main-content ol { padding-left: 1.6rem; margin: 1rem 0; }
.main-content li { position: relative; margin: 0.3rem 0; color: var(--text-body);
                   border-radius: 6px; transition: background 0.15s ease; }
.main-content ul > li::before {
  content: '›';
  position: absolute;
  left: -1.3rem;              /* левее скобок [ ] ховера ссылок — не накладываются */
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
  transition: transform 0.15s ease;
  transform-origin: 100% 50%;
}
/* hover: строка подсвечивается, маркер всех уровней чуть растёт и уходит влево */
.main-content li:hover { background: rgba(3, 216, 243, 0.06); }
.main-content ul > li:hover::before { transform: translateX(-4px) scale(1.25); }
.main-content ol > li:hover::marker { color: var(--neon-yellow); }
/* вложенные списки: заметный отступ от родителя + другой тон маркера */
.main-content li > ul, .main-content li > ol { margin: 0.25rem 0 0.15rem; }
.main-content ul ul > li::before {
  content: '·';
  color: var(--neon-magenta);
  text-shadow: none;
  transition: transform 0.15s ease;
  transform-origin: 100% 50%;
}
.main-content ul ul ul > li::before { content: '·'; color: var(--text-dim); }
.main-content ol > li::marker { color: var(--neon-cyan); font-weight: 600; }
.main-content ol ol > li::marker, .main-content ul ol > li::marker {
  color: var(--text-dim); font-weight: 400;
}

/* Code blocks: ```-блоки рендерятся как figure.codeblock (шапка-язык + pre),
   голые <pre> — ASCII-диаграммы без языка, ~~~-блоки, блоки с отступом. */
pre {
  font-family: 'JetBrains Mono', 'Fira Code', 'Space Mono', 'Consolas', monospace;
  background: var(--bg-alt);
  border: 1px solid var(--neon-cyan);
  padding: 1.2rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.codeblock {
  margin: 1.5rem 0;
}

.codeblock pre {
  margin: 0;
}

.codeblock__lang {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;      /* сливается с верхней границей pre — окно-вкладка */
  padding: 0.25rem 0.8rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon-yellow);
  background: var(--bg-alt);
  border: 1px solid var(--neon-cyan);
  border-bottom: none;
}

code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Space Mono', 'Consolas', monospace;
  background: var(--bg-alt);
  color: var(--neon-cyan);
  padding: 0.2rem 0.4rem;
  font-size: 0.85em;
  text-shadow: var(--glow-cyan);
}

pre code { 
  background: none; 
  padding: 0;
  text-shadow: none;
  color: var(--text-body);
}

/* Подсветка синтаксиса (Pygments) в неоновой палитре: база — цвет текста,
   акценты — циан (ключевые слова), жёлтый (строки), маджента (числа). */
pre code .c, pre code .c1, pre code .cm, pre code .cp, pre code .cs,
pre code .ch { color: var(--text-dim); font-style: italic; }
pre code .k, pre code .kc, pre code .kd, pre code .kn, pre code .kp,
pre code .kr, pre code .kt { color: var(--neon-cyan); }
pre code .s, pre code .s1, pre code .s2, pre code .sa, pre code .sb,
pre code .sc, pre code .sd, pre code .se, pre code .sh, pre code .si,
pre code .sx { color: var(--neon-yellow); }
pre code .m, pre code .mb, pre code .mf, pre code .mh, pre code .mi,
pre code .mo, pre code .il { color: var(--neon-magenta); }
pre code .nf, pre code .nc { color: var(--text); }
pre code .nb, pre code .bp { color: var(--neon-cyan); }
pre code .o, pre code .ow { color: var(--neon-cyan); }
pre code .p { color: var(--text-dim); }
pre code .err { color: #FF5252; }

/* Tags */
.tag {
  color: var(--neon-magenta);
  font-size: 0.8em;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

/* Transclusion: встроенная заметка ![[Заметка]] */
.embed {
  margin: 1.4rem 0;
  padding: 0.2rem 1rem 0.4rem;
  border-left: 2px solid var(--neon-magenta);
  background: rgba(255, 0, 255, 0.04);
}
.embed__src {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
}
.embed__src a { color: var(--neon-magenta); }
.embed__body { font-size: 0.92em; }
.embed__body > *:first-child { margin-top: 0.5rem; }
.embed--missing {
  border-left-color: var(--text-dim);
  color: var(--text-dim);
  font-size: 0.8rem;
}
.embed--cycle {
  border-left-color: var(--neon-yellow);
  color: var(--neon-yellow);
  font-size: 0.8rem;
}

/* Раскрывашка #![[Заметка]]: <details> — свёрнут, виден только заголовок */
.embed-collapse {
  margin: 1.4rem 0;
  border: 1px solid var(--border);
  border-left: 2px solid var(--neon-cyan);
  background: rgba(3, 216, 243, 0.04);
}
.embed-collapse > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.55rem 1rem;
  font-size: 0.92em;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.embed-collapse > summary::-webkit-details-marker { display: none; }
.embed-collapse > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.55rem;
  color: var(--neon-cyan);
  text-shadow: 0 0 6px rgba(3, 216, 243, 0.6);
  transition: transform 0.2s;
}
.embed-collapse[open] > summary::before { content: "▾"; }
.embed-collapse > summary:hover { color: var(--neon-cyan); }
.embed-collapse__body {
  border-top: 1px dashed var(--border);
  padding: 0.1rem 1rem 0.5rem;
}

/* Иллюстрации ![[файл.svg]] */
.illustration {
  margin: 1.6rem 0;
  text-align: center;
}
.illustration img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--neon-cyan);
  background: var(--bg-alt);
  box-shadow: 0 0 18px rgba(3, 216, 243, 0.15);
}
.illustration figcaption {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}

/* Хлебные крошки */
.breadcrumbs {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 1.2rem;
}
.breadcrumbs a { color: var(--neon-cyan); }
.breadcrumbs .bc-sep { margin: 0 0.45rem; opacity: 0.6; }
.breadcrumbs .bc-cat { color: var(--neon-magenta); }
.breadcrumbs .bc-current { color: var(--text); }

/* Page list */
.page-list { list-style: none; }
.page-item {
  border-left: 2px solid var(--border);
  padding: 1rem 0 1rem 1rem;
  margin: 1rem 0;
  transition: border-color 0.15s ease;
}

.page-item:hover {
  border-left: 2px solid var(--neon-yellow);
}

.page-title { 
  font-weight: bold; 
  font-size: 1rem;
  color: var(--text);
}

.page-preview { 
  color: var(--text-dim); 
  font-size: 0.85rem; 
  margin-top: 0.5rem;
}

/* 404 */
.error-page { 
  text-align: center; 
  padding: 4rem 0;
}
.error-code { 
  font-size: 4rem; 
  color: var(--neon-yellow); 
  text-shadow: var(--glow-yellow);
  margin-bottom: 1rem;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
  background: var(--neon-cyan);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-yellow);
  box-shadow: var(--glow-yellow);
}

/* === Живой киберпанк-фон (ненавязчивый, CSS-only) === */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;               /* за контентом, над фоном body */
}

/* Неоновая сетка: тонкая, но заметная; медленно ползёт по диагонали,
   растворяется к краям (mask), чтобы не резать глаз */
body::before {
  background-image:
    linear-gradient(var(--grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px, 220px 220px, 220px 220px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,1), transparent 90%);
  mask-image: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,1), transparent 90%);
  animation: cyber-grid 120s linear infinite;
  will-change: transform;
}

/* Дышащие неоновые пятна (маджента/циан/жёлтый) + медленный дрейф:
   фон живёт даже боковым зрением */
body::after {
  background:
    radial-gradient(620px 420px at 85% 8%, var(--blob-1), transparent 70%),
    radial-gradient(720px 520px at 8% 92%, var(--blob-2), transparent 70%),
    radial-gradient(520px 420px at 50% 55%, var(--blob-3), transparent 70%);
  animation: cyber-glow 26s ease-in-out infinite alternate,
             blob-drift 47s ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { transform: translate3d(-26px, -14px, 0) scale(1); }
  to   { transform: translate3d(26px, 18px, 0) scale(1.07); }
}

/* Звёздная пыль: редкие мерцающие точки за сеткой (инжектит panels.js).
   Тайт 560px с россыпью точек — повторы не читаются; лёгкое мерцание
   целиком слоя (compositor, без repaint) */
.bg-stars {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    radial-gradient(1.3px 1.3px at 47px 131px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 163px 451px, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 311px 89px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 449px 277px, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 521px 503px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 89px 317px, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 233px 213px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 401px 401px, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 137px 541px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 533px 173px, rgba(255,255,255,.4), transparent 60%);
  background-size: 560px 560px;
  animation: star-twinkle 6s ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  from { opacity: 0.35; }
  to   { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-stars { animation: none; opacity: 0.5; }
}
html[data-theme='light'] .bg-stars { display: none; }   /* на бумаге — шум */

@keyframes cyber-grid {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(44px, 44px, 0); }   /* ровно шаг сетки — бесшовный цикл */
}
@keyframes cyber-glow {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* Доступность: без анимаций при reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

/* Подсветка сетки у курсора: та же сетка ярче + циановый тинт, круглая маска.
   Анимация та же, что у body::before — линии совпадают при движении. */
.cyber-spot {
  position: fixed; left: 0; top: 0;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity 0.4s ease;
  background-image:
    radial-gradient(circle, rgba(3, 216, 243, 0.06), transparent 62%),
    linear-gradient(rgba(3, 216, 243, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 216, 243, 0.30) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 32%, transparent 62%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 32%, transparent 62%);
  animation: cyber-grid 120s linear infinite;
  will-change: transform;
}
.cyber-spot.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cyber-spot { animation: none; }   /* статичная сетка = статичная подсветка */
}

/* === Mini graph panel: связи заметки, справа внизу === */
.graph-panel {
  position: fixed;
  right: 1.2rem;
  top: 1.2rem;
  width: 220px;
  background: var(--bg-alt);
  border: 1px solid var(--neon-cyan);
  padding: 0.6rem 0.6rem 0.45rem;
  z-index: 50;
  box-shadow: 0 0 24px rgba(3, 216, 243, 0.18);
}

.graph-panel::before {
  content: '┌─ GRAPH ─┐';
  position: absolute;
  top: -0.55rem;
  left: 0.5rem;
  background: var(--bg);
  padding: 0 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 1px;
  color: var(--neon-yellow);
}

.graph-panel__header {
  font-size: 0.62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0.1rem 0 0.2rem;
}

.graph-panel__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* сбрасываем глобальные hover-скобки ссылок внутри svg */
svg a,
svg a::before,
svg a::after { position: static; text-shadow: none; }
svg a::before,
svg a::after { content: normal; }

.gp-edge { stroke-width: 1.3; fill: none; }
.gp-edge-out { stroke: var(--neon-cyan); stroke-opacity: 0.6; }
.gp-edge-in { stroke: var(--neon-magenta); stroke-opacity: 0.6; }
.gp-edge-both { stroke: var(--neon-yellow); stroke-opacity: 0.75; }

/* легенда направлений под графом */
.gp-legend {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem;
  margin-top: 0.4rem; font-size: 0.55rem; letter-spacing: 0.5px;
}
.gp-leg { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-dim); }
.gp-leg::before { content: ''; width: 14px; height: 0; border-top: 1.5px solid currentColor; }
.gp-leg-out { color: var(--neon-cyan); }
.gp-leg-in { color: var(--neon-magenta); }
.gp-leg-both { color: var(--neon-yellow); }

.gp-node {
  fill: var(--neon-cyan);
  cursor: pointer;
  transition: fill 0.15s ease, r 0.15s ease;
}

.gp-link:hover .gp-node {
  fill: var(--neon-yellow);
  r: 7;
}

/* синхронный ховер: узел графа, соответствующий ссылке в тексте (и наоборот) */
.gp-link.gp-active .gp-node {
  fill: var(--neon-yellow);
  r: 7;
  filter: drop-shadow(0 0 6px rgba(252, 238, 12, 0.9));
}
.gp-link.gp-active { cursor: pointer; }

.main-content a.link-sync {
  color: var(--neon-yellow);
  text-shadow: var(--glow-yellow);
  background: rgba(252, 238, 12, 0.08);
}

.gp-current {
  fill: var(--neon-yellow);
  filter: drop-shadow(0 0 6px rgba(252, 238, 12, 0.9));
}

/* Средние экраны (до 1200): граф в поток страницы — fixed справа налегал бы на текст */
@media (max-width: 1200px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); max-width: 1200px;
            grid-template-areas: "side main" "side right"; }
  .graph-col { position: static; margin-top: 1.2rem; }
  .graph-col .graph-panel { max-width: 320px; }
}

/* === AI-маскот (этап 5) — реплики с выбором === */
#mascot {
  position: fixed; left: 0; top: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transition: left 0.9s ease, top 0.9s ease, opacity 0.3s ease, filter 0.3s ease;
  will-change: left, top;
}
#mascot.dragging { transition: none; }
#mascot.gone { display: none; }
#mascot.snapping .mascot-ascii { animation: snap 0.5s ease-in forwards; }
@keyframes snap {
  0% { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
  100% { opacity: 0; filter: blur(9px); transform: scale(1.35) translateY(-14px); }
}
.mascot-char {
  cursor: grab; user-select: none; touch-action: none;
  animation: mascot-flicker 5s linear infinite;
}
.mascot-char:hover { animation: none; }
#mascot.dragging .mascot-char { cursor: grabbing; animation: none; }
body.mascot-busy .mascot-char { cursor: progress; }
.mascot-ascii {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1.15; white-space: pre;
  margin: 0;
  opacity: 0.8;
  text-shadow: 0 0 8px currentColor, 0 0 18px currentColor, 0 0 32px currentColor;
  filter: blur(0.4px);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.mascot-char:hover .mascot-ascii { opacity: 1; filter: blur(0); }
@keyframes mascot-flicker {
  0%, 100% { opacity: 1; }
  46% { opacity: 0.85; }
  50% { opacity: 1; }
  54% { opacity: 0.78; }
  58% { opacity: 1; }
}
.mascot-anim-stream { animation: mascot-stream 2s ease-in-out infinite; }
.mascot-anim-sphere { animation: mascot-sphere 3s ease-in-out infinite; }
.mascot-anim-glitch { animation: mascot-glitch .5s steps(2) infinite; }
.mascot-anim-float { animation: mascot-float 4s ease-in-out infinite; }
@keyframes mascot-stream { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes mascot-sphere { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes mascot-glitch { 0%,100%{transform:translate(0)} 25%{transform:translate(-1px,1px)} 50%{transform:translate(1px,-1px)} 75%{transform:translate(-1px,-1px)} }
@keyframes mascot-float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(1deg)} }

.mascot-panel {
  width: 280px; max-width: 72vw;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.mascot-panel.open { pointer-events: auto; }
.mascot-bubble {
  display: none;
  position: relative;
  width: 100%; box-sizing: border-box;
  background: rgba(0, 6, 14, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(3, 216, 243, 0.5);
  color: var(--text); padding: 0.55rem 0.7rem; font-size: 0.78rem; line-height: 1.4;
  box-shadow: 0 0 16px rgba(3, 216, 243, 0.18);
  white-space: pre-wrap; word-wrap: break-word;
}
.mascot-bubble.show { display: block; }

.mascot-like {
  position: absolute; top: 2px; right: 2px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 0.85rem; line-height: 1;
  padding: 2px 4px; font-family: inherit;
}
.mascot-like:hover { color: var(--neon-yellow); text-shadow: var(--glow-yellow); }
.mascot-like.liked { color: var(--neon-yellow); }

.mascot-options { display: none; flex-direction: column; gap: 5px; }
.mascot-options.show { display: flex; }
.mascot-option {
  width: 100%; box-sizing: border-box;
  background: rgba(0, 6, 14, 0.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid var(--border);
  border-left: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  padding: 0.4rem 0.6rem; font-family: inherit; font-size: 0.74rem;
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mascot-option:hover {
  background: rgba(3, 216, 243, 0.12);
  color: var(--neon-yellow);
  border-left-color: var(--neon-yellow);
}
@media (max-width: 600px) { .mascot-panel { width: 230px; max-width: 80vw; } }

/* === Мобильная адаптация === */
.nav-toggle {
  display: none;
  position: fixed; top: 0.7rem; left: 0.7rem; z-index: 120;
  background: var(--bg-alt); border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan); padding: 0.35rem 0.55rem; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; line-height: 1;
  box-shadow: 0 0 10px rgba(3, 216, 243, 0.25);
}
.nav-backdrop { display: none; }

/* Средние экраны 769–1200: сайдбар в сетке + разделитель, компактнее */
@media (min-width: 769px) and (max-width: 1200px) {
  .layout { grid-template-columns: 210px 1fr; gap: 1.4rem; padding: 1.2rem; }
  .sidebar {
    position: sticky; top: 4.4rem; max-height: calc(100vh - 5.4rem); overflow-y: auto;
    border-right: 1px solid var(--border);   /* явный разделитель */
    padding-right: 0.8rem;
  }
  .nav-cat-head { font-size: 0.7rem; }
  .nav-link { font-size: 0.74rem; }
  h1 { font-size: 1.4rem; }
  .mascot-ascii { font-size: 11px; }
  .mascot-panel { max-width: 60vw; }
}
.admin-link {                       /* инлайн в крошках, слева */
  flex-shrink: 0; border: 1px solid var(--panel-border);
  color: var(--neon-magenta); padding: 0.05rem 0.45rem;
  font-size: 0.68rem; letter-spacing: 1px; text-decoration: none;
  text-transform: uppercase; border-radius: 6px;
}
.admin-link:hover { background: var(--neon-magenta); color: var(--bg); }

/* Кнопка Web Push 🔔 */
.push-btn {
  position: fixed; top: 3rem; right: 0.6rem; z-index: 115;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 6, 14, 0.7); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; font-family: inherit; font-size: 0.95rem;
  transition: color 0.15s, border-color 0.15s;
}
.push-btn.on { color: var(--neon-yellow); border-color: var(--neon-yellow); }
.push-btn.denied { color: var(--neon-magenta); }
.push-btn:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

/* Журнал посещений (детальный лог) */
.log-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; align-items: center; }
.log-filters input, .log-filters select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 0.45rem 0.55rem; font-family: inherit; font-size: 0.78rem;
}
.log-filters input { flex: 1; min-width: 200px; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-top: 0.5rem; }
.log-table th { text-align: left; color: var(--neon-cyan); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 1px; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
.log-table td { padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.log-table td.path { word-break: break-all; }   /* длинные URL не растягивают таблицу */
.log-table tr.is-bot td { color: var(--text-dim); opacity: 0.65; }
.log-table tr.is-404 td { color: var(--neon-magenta); }
.log-table tr.is-404 td.path a { color: var(--neon-magenta); }
.is-404-path { color: var(--neon-magenta) !important; }
.log-table td.ts { white-space: nowrap; color: var(--text-dim); }
.log-table td.path a { color: var(--neon-cyan); word-break: break-all; }
.log-table td.visitor { font-family: monospace; color: var(--neon-magenta); }
.log-table td.ref { color: var(--text-dim); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.2rem; }
.log-pager a { color: var(--neon-cyan); }
.log-pager span { color: var(--text-dim); font-size: 0.8rem; }
@media (max-width: 700px) { .log-table th:nth-child(4), .log-table td.ref { display: none; } }

/* max-device-width — страховка от iOS Safari «Запросить сайт для компьютера»
   (тогда layout-ширина 980px, но физический экран узкий — мобильные правила
   всё равно нужны) */
@media (max-width: 768px), (max-device-width: 768px) {
  /* ВАЖНО: переопределяем и AREAS — иначе от десктопа остаётся
     "side main right" и при columns:1fr сетка неявно строит 3 столбца,
     заметка попадает во второй (узкая полоска слева) */
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas: "side" "right" "main";   /* карта ПЕРЕД заметкой */
    padding: 1rem; gap: 0;
  }
  .graph-col { grid-area: right; position: static; margin: 0 0 0.8rem; }
  .graph-col .graph-panel { max-width: none; }    /* на всю ширину, как заметка */
  /* карта свёрнута в полоску-заголовок; разворачивается тапом (mobile.js) */
  .graph-panel__header { cursor: pointer; user-select: none; }
  .graph-panel__header::after { content: ' ▾'; color: var(--neon-cyan); }
  .graph-panel.graph-collapsed .graph-panel__header::after { content: ' ▸'; }
  .graph-panel.graph-collapsed .graph-panel__svg,
  .graph-panel.graph-collapsed .gp-legend { display: none; }
  /* шапка — полноценная верхняя планка; бургер и ◆ живут ВНУТРИ неё
     (mobile.js переносит кнопки в строку крошек — ничего не налегает) */
  .page-head { margin: 0; padding: 0.5rem 0.6rem 0; top: 0; z-index: 115; }
  /* бургер — обычный элемент строки крошек, не фиксированный угол */
  .nav-toggle {
    position: static; display: inline-flex; align-items: center;
    flex-shrink: 0; margin-right: 0.5rem;
  }
  /* специфичность ВЫШЕ стеклянного .sidebar.panel{position:sticky} — иначе
     drawer оставался в потоке, уезжал невидимым влево и занимал место.
     Drawer выезжает ПОД шапкой (z ниже), бургер всегда доступен */
  .layout > .sidebar.panel {
    position: fixed; top: 3.4rem; left: 0; bottom: 0;
    width: 280px; max-width: 85vw; height: calc(100vh - 3.4rem);
    background: var(--bg); z-index: 110;
    transform: translateX(-100%); transition: transform 0.25s ease;
    overflow-y: auto; padding: 1rem 1rem 1rem;
    border-right: 1px solid var(--border);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  }
  body.nav-open .layout > .sidebar.panel { transform: translateX(0); }
  .nav-toggle { display: block; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 100;
  }
  body.nav-open .nav-backdrop { display: block; }
  .main-content { padding-top: 0; }   /* шапка-планка занимает верх */
  /* ниже admin-ссылки (top 0.6rem), чтобы не накладываться */
  .push-btn { top: 2.6rem; width: 34px; height: 34px; font-size: 1.05rem; }
  .breadcrumbs { font-size: 0.66rem; }
  .mascot-ascii { font-size: 10px; }
  h1 { font-size: 1.3rem; }
}

@media (max-width: 600px) {
  .stat-cols { grid-template-columns: 1fr; }
  .admin-page { padding: 1rem; }
}

/* === Админ-страницы === */
.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.admin-form {
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--neon-cyan);
  background: var(--bg-alt);
  padding: 1.6rem 1.4rem;
  box-shadow: 0 0 24px rgba(3, 216, 243, 0.15);
}
.admin-form__title {
  color: var(--neon-yellow);
  font-size: 0.8rem;
  letter-spacing: 2px;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--neon-cyan);
  padding-bottom: 0.5rem;
}
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}
.admin-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
}
.admin-field input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(3, 216, 243, 0.4);
}
.admin-submit {
  width: 100%;
  margin-top: 0.4rem;
  background: transparent;
  border: 1px solid var(--neon-yellow);
  color: var(--neon-yellow);
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-submit:hover {
  background: var(--neon-yellow);
  color: var(--bg);
}
.admin-error {
  color: var(--neon-magenta);
  font-size: 0.78rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

.admin-page { padding: 2rem; }
.admin-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.admin-top__brand { color: var(--neon-yellow); font-size: 0.78rem; letter-spacing: 2px; }
.admin-top__out { display: inline; }
.admin-top__out button {
  background: transparent;
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.admin-top__out button:hover { background: var(--neon-cyan); color: var(--bg); }
.admin-page h1 { border-bottom-color: var(--neon-cyan); }
/* устарело: ширина теперь у .admin-wrap (две плитки) */
.admin-note { color: var(--text-dim); }
.admin-roadmap { margin-top: 1rem; padding-left: 1.2rem; color: var(--text-dim); }
.admin-roadmap li { margin: 0.3rem 0; }

/* Навигация в шапке админки + формы настроек */
/* Шапка админки: компактные вкладки, переносятся, не едут */
.admin-top { flex-wrap: wrap; gap: 0.6rem; }
.admin-top__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
/* внутренние вкладки активного модуля (второй ряд, мельче и тише) */
.admin-top__subnav {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; width: 100%;
  margin-top: 0.5rem; padding-top: 0.45rem;
  border-top: 1px dashed var(--panel-border);
}
.admin-top__subnav a {
  font-size: 0.7rem; letter-spacing: 0.5px; text-transform: none;
  color: var(--text-dim);
}
.admin-top__subnav a:hover { color: var(--neon-cyan); }
.admin-top__subnav a.is-active { color: var(--neon-yellow); text-shadow: var(--glow-yellow); }
.admin-top__nav a, .admin-top__link {
  color: var(--neon-cyan); font-size: 0.7rem; text-decoration: none; letter-spacing: 0.5px;
  border: 1px solid var(--border); padding: 0.22rem 0.5rem; white-space: nowrap;
}
.admin-top__nav a:hover, .admin-top__link:hover {
  color: var(--neon-yellow); border-color: var(--neon-yellow);
}
.admin-top__nav a.is-active {
  color: var(--neon-yellow); border-color: var(--neon-yellow);
  text-shadow: var(--glow-yellow);
}
.admin-page--wide { max-width: none; }

/* Файловый редактор */
.file-editor {
  width: 100%; min-height: 55vh; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.55;
  padding: 0.8rem; resize: vertical; tab-size: 2;
}
.file-editor:focus { outline: none; border-color: var(--neon-cyan); }
.admin-field textarea, .admin-field select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.85rem; resize: vertical;
}
/* Выбор главной: явная иерархия папка → заметка */
.home-select optgroup {
  font-style: normal; font-weight: bold;
  color: var(--neon-magenta); text-transform: uppercase;
  letter-spacing: 1px; background: var(--bg-alt);
}
.home-select option { color: var(--neon-cyan); padding: 2px 4px; }
.home-select option:checked { color: var(--neon-yellow); background: var(--bg-alt); }
.admin-field--row { flex-direction: row; align-items: center; gap: 0.5rem; }
.mascot-form { max-width: 560px; }

/* Метрики дашборда (этап 3) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  margin: 1.4rem 0;
}
.stat-card {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 0.8rem 0.9rem;
}
.stat-card__v { font-size: 1.6rem; color: var(--neon-yellow); text-shadow: var(--glow-yellow); line-height: 1.1; }
.stat-card__v small { font-size: 0.9rem; color: var(--neon-cyan); text-shadow: none; }
.stat-card__l { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-top: 0.4rem; }

.stat-section { margin: 1.6rem 0; }
.stat-section h2 { font-size: 0.78rem; color: var(--neon-cyan); margin-bottom: 0.6rem; }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.bar { flex: 1; min-width: 16px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar__fill {
  background: linear-gradient(180deg, var(--neon-cyan), rgba(3, 216, 243, 0.15));
  min-height: 1px;
  width: 100%;
}
.bar__label { font-size: 0.48rem; color: var(--text-dim); text-align: center; margin-top: 3px; }
.bars--hours { height: 80px; }
.bars--hours .bar { min-width: 12px; }
.bar__fill--hour { background: linear-gradient(180deg, var(--neon-magenta), rgba(255, 0, 255, 0.12)); }
.bar--prev .bar__fill--hour { opacity: 0.35; }
.bar__day { display: block; color: var(--neon-magenta); opacity: 0.85; }

.stat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 700px) { .stat-cols { grid-template-columns: 1fr; } }
.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li {
  display: flex; justify-content: space-between; gap: 0.6rem;
  padding: 0.32rem 0; border-bottom: 1px solid var(--border); font-size: 0.78rem;
}
.stat-list__path { color: var(--text); word-break: break-all; }
a.stat-list__path { color: var(--neon-cyan); }
.stat-list__count { color: var(--neon-yellow); flex-shrink: 0; }
/* Telegram: лого-бейдж у категории (→ канал) и ссылка под статьёй (→ пост) */
.tg-badge {
  display: inline-flex; align-items: center; margin-left: 0.45rem;
  color: var(--neon-cyan); text-decoration: none;
  vertical-align: middle; line-height: 1;
}
.tg-badge:hover { color: #229ED9; }
.tg-ico {
  display: block;
  margin: 0 5px;
}
.tg-post-link { margin: 1.4rem 0 0.4rem; }
.tg-post-link a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: #229ED9; text-decoration: none; font-size: 0.82rem;
  border: 1px solid rgba(34, 158, 217, 0.4); padding: 0.4rem 0.7rem;
}
.tg-post-link a:hover { border-color: #229ED9; box-shadow: 0 0 12px rgba(34, 158, 217, 0.35); }

/* Тумблер обсуждения поста в /admin/telegram */
.c-toggle {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 0.7rem; padding: 0.2rem 0.5rem; cursor: pointer;
}
.c-toggle.on { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.c-toggle:hover { color: var(--neon-yellow); border-color: var(--neon-yellow); }

/* Страница поиска: без сайдбар-сетки layout (иначе main упадёт в колонку 280px) */
.search-wrap { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 2rem 2rem 4rem; }
.search-wrap .page-list { margin-top: 1rem; }
@media (min-width: 1024px) {
  .search-wrap .page-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
}

/* Поиск (модуль search) */
.search-form { display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.search-form--side { margin: 0 0 1.2rem; }
.search-form__input {
  flex: 1; background: var(--bg-alt); border: 1px solid var(--border);
  color: var(--text-body); font-family: inherit; font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
}
.search-form__input:focus { outline: none; border-color: var(--neon-cyan); }
.search-form__btn {
  background: none; border: 1px solid var(--border); color: var(--neon-cyan);
  font-family: inherit; font-size: 0.75rem; cursor: pointer; padding: 0 0.7rem;
}
.search-form__btn:hover { border-color: var(--neon-cyan); text-shadow: var(--glow-cyan); }

/* кнопка-стрелка ВНУТРИ поля (сайдбар-поиск): оверлей справа, без своей рамки */
.search-field { position: relative; display: flex; flex: 1; min-width: 0; }
.search-field .search-form__input { width: 100%; padding-right: 2rem; }
.search-field .search-form__btn {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  background: none; border: none; color: var(--neon-cyan);
  font-family: inherit; font-size: 0.85rem; cursor: pointer;
  padding: 0 0.55rem;
}
.search-field .search-form__btn:hover { border: none; text-shadow: var(--glow-cyan); }

.search-backlink { margin: 0 0 0.8rem; }
.search-backlink a { font-size: 0.8rem; }

/* === СТЕКЛЯННАЯ ПАНЕЛЬ (концепт «парящее стекло», все темы) ===
   Механика: полупрозрачный фон темы + backdrop-blur живого фона-сетки,
   скругление, тонкая кайма акцента, тень «парения» и верхний блик-кромка.
   Вложенные панели (.panel .panel) — плоские подложки без стекла. */
.panel {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  backdrop-filter: blur(9px) saturate(1.25);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow), inset 0 1px 0 var(--panel-hl);
  padding: 1.1rem 1.25rem;
}
.panel .panel, .panel-flat {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.06);
  border: 1px solid var(--panel-border);
  padding: 0.9rem 1rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: var(--bg); }   /* фолбэк: непрозрачная, но читаемая */
}
@media (prefers-reduced-motion: reduce) {
  .panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Прилегание панелей после вёрстки (sticky ниже закреплённой шапки) */
.sidebar.panel { margin-top: 0; position: sticky; top: 4.4rem; }
.main-content > article.panel { margin-top: 0; }
.graph-panel.panel { padding: 0.7rem 0.7rem 0.3rem; }
/* Админка: ДВЕ плитки — шапка с навигацией сверху, панель контента ниже */
.admin-wrap { width: 100%; max-width: 1180px; margin: 1.2rem auto 3rem;
              padding: 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.admin-top.panel { padding: 0.8rem 1.1rem 0.7rem; position: sticky; top: 0.8rem; z-index: 35; }
.admin-page.panel { padding: 1.6rem 2rem 2.4rem; }
@media (max-width: 768px) {
  .admin-wrap { padding: 0 0.6rem; margin: 0.8rem auto 2rem; }
  .admin-page.panel { padding: 1.1rem 0.9rem 1.6rem; }
}
.main-content.panel { padding: 1.6rem 2rem 2.2rem; }
.log-table { background: transparent; }

/* === Отточка стекла === */
/* HUD-уголки: тонкие скобки-кронштейны на углах панели, ярче при hover */
.panel::before,
.panel::after {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  --c: 10px;                       /* длина плеча уголка */
  --w: 1.5px;                      /* толщина */
  --cc: var(--panel-corner, rgba(3, 216, 243, 0.5));
  opacity: 0.5;
  transition: opacity 0.25s ease;
  background:
    linear-gradient(var(--cc), var(--cc)) 0 0 / var(--c) var(--w),
    linear-gradient(var(--cc), var(--cc)) 0 0 / var(--w) var(--c),
    linear-gradient(var(--cc), var(--cc)) 100% 100% / var(--c) var(--w),
    linear-gradient(var(--cc), var(--cc)) 100% 100% / var(--w) var(--c),
    linear-gradient(var(--cc), var(--cc)) 100% 0 / var(--c) var(--w),
    linear-gradient(var(--cc), var(--cc)) 100% 0 / var(--w) var(--c),
    linear-gradient(var(--cc), var(--cc)) 0 100% / var(--c) var(--w),
    linear-gradient(var(--cc), var(--cc)) 0 100% / var(--w) var(--c);
  background-repeat: no-repeat;
}
.panel { position: relative; }
.panel:hover::before, .panel:hover::after { opacity: 1; }

/* Панели полностью статичны (по фидбеку: ничего не пульсирует само и не
   реагирует на мышь движением). «Парение» — визуальный эффект стекла над
   живым фоном, без анимаций самих панелей. */
.panel { animation: none; }

/* Параллакс-наклон панелей к курсору УДАЛЁН (по фидбеку: панели не должны
   реагировать движением на мышь). Стиль стекла — статичный. */

/* Крошки-панель: компактная + кнопка подписки (в .page-head, закреплена) */
.breadcrumbs.panel { padding: 0.55rem 0.9rem; display: flex; align-items: center;
                     gap: 0.45rem; flex-wrap: nowrap;
                     min-width: 0; }
/* длинные названия (ТГ-заметки) не выдавливают кнопку: текущая крошка
   обрезается многоточием, кнопка всегда прижата вправо */
.bc-cat, .bc-sep { flex-shrink: 0; }
.bc-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-subscribe { margin-left: auto; flex-shrink: 0; font-size: 0.75rem;
                text-transform: uppercase; letter-spacing: 1px;
                border: 1px solid var(--panel-border);
                padding: 0.15rem 0.6rem; border-radius: 8px; white-space: nowrap; }
.bc-subscribe:hover { border-color: var(--neon-cyan); text-shadow: var(--glow-cyan); }

/* === Игровой прогресс чтения (localStorage, progress.js) ===
   Живёт ПОД мини-картой в правой колонке; клик по заголовку — компактный
   режим с «дышащей» точкой-приманкой */
.progress-widget { margin-top: 1rem; padding: 0.6rem 0.75rem 0.7rem; }
.pw__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.45rem; cursor: pointer;
  user-select: none;
}
.pw__head:hover { color: var(--neon-cyan); }
.pw__chev { color: var(--neon-cyan); }
.progress-widget.compact .pw__head { margin-bottom: 0.2rem; }
.pw__compact {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; color: var(--text-body);
}
/* намёк, что свёрнутый чип разворачивается: кликабелен весь, при наведении
   оживает и подмигивает надписью «развернуть ▸» */
.progress-widget.compact { cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.progress-widget.compact:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(3, 216, 243, 0.25);
}
.pw__open {
  margin-left: auto; font-size: 0.6rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--neon-cyan);
  opacity: 0; transform: translateX(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.progress-widget.compact:hover .pw__open { opacity: 1; transform: translateX(0); }
.pw__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--neon-yellow);
  /* периодический пульс: двойной «удар» и тихая пауза (не непрерывное дыхание) */
  animation: pw-pulse 7s ease-in-out infinite;
}
@keyframes pw-pulse {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 3px rgba(252, 238, 12, 0.35); }
  3%       { opacity: 1;    box-shadow: 0 0 12px rgba(252, 238, 12, 0.95); }
  7%       { opacity: 0.45; box-shadow: 0 0 3px rgba(252, 238, 12, 0.35); }
  11%      { opacity: 1;    box-shadow: 0 0 10px rgba(252, 238, 12, 0.85); }
  16%      { opacity: 0.5;  box-shadow: 0 0 3px rgba(252, 238, 12, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .pw__dot { animation: none; } }
.pw__bar {
  height: 8px; border: 1px solid var(--panel-border); border-radius: 5px;
  overflow: hidden; background: rgba(127, 127, 127, 0.08);
}
.pw__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-yellow));
  box-shadow: 0 0 8px rgba(3, 216, 243, 0.5);
  transition: width 0.4s ease;
}
.pw__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-body);
}
.pw__lvl { color: var(--neon-yellow); text-shadow: var(--glow-yellow); font-size: 0.68rem; }
.pw__next { font-size: 0.62rem; color: var(--text-dim); margin-top: 0.15rem; }
.pw__reset {
  margin-top: 0.55rem; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: 0.6rem;
  letter-spacing: 1px; padding: 0;
}
.pw__reset:hover { color: var(--neon-magenta); }

/* Древо знаний: на карте сайта прочитанные узлы светятся, остальные тусклее */
.sg-g.is-read .sg-node { fill: var(--neon-yellow); fill-opacity: 1;
                         filter: drop-shadow(0 0 4px rgba(252, 238, 12, 0.8)); }
.sg-g.is-read .sg-label { fill: var(--neon-yellow); }
.sg-g:not(.is-read) .sg-node { fill-opacity: 0.4; }
.sg-g:not(.is-read) .sg-label { opacity: 0.6; }

/* Достижения (страница карты): сетка чипов; открытые светятся, свежие вспыхивают */
.ach { margin-top: 1.4rem; }
.ach__head {
  font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.55rem;
}
.ach__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.5rem; }
.ach__item {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--panel-border); border-radius: 10px;
  background: var(--panel-bg); padding: 0.5rem 0.65rem;
  font-size: 0.74rem; color: var(--text-dim); min-width: 0;
}
.ach__ico { flex-shrink: 0; font-size: 0.85rem; }
.ach__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach__pct { margin-left: auto; flex-shrink: 0; font-size: 0.62rem; color: var(--text-dim); }
.ach__item.is-done {
  color: var(--neon-yellow); text-shadow: var(--glow-yellow);
  border-color: rgba(252, 238, 12, 0.45);
}
.ach__item.is-new { animation: ach-pop 1.1s ease-in-out 4; }
@keyframes ach-pop {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 16px rgba(252, 238, 12, 0.75); }
}
@media (prefers-reduced-motion: reduce) { .ach__item.is-new { animation: none; } }

/* Связанные заметки под статьёй: чипы-ссылки с направлением связи */
.related-notes { margin-top: 1.2rem; }
.related-notes__head {
  font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.5rem;
}
.related-notes__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.related-note {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 0.4rem 0.75rem; font-size: 0.8rem;
  color: var(--neon-cyan); text-decoration: none; background: var(--panel-bg);
  transition: border-color 0.15s ease, color 0.15s ease, text-shadow 0.15s ease;
}
.related-note:hover { border-color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
.related-note__dir { color: var(--neon-magenta); font-size: 0.85rem; }

/* Граф-панель: .panel ставит position:relative и сбивает fixed-примораживание
   к правому верхнему углу — возвращаем, стекло оставляем */
.graph-panel.panel { position: fixed; right: 1.2rem; top: 1.2rem; width: 220px;
                     padding: 0.55rem 0.6rem 0.2rem; }
@media (max-width: 1024px) { .graph-panel.panel { position: static; width: auto; } }

/* Push-кнопка в сайдбаре (маунт под поиском) */
/* колокольчик — компактный, слева от поисковой строки */
.push-mount { display: inline-flex; flex-shrink: 0; margin: 0; }
.push-mount .push-btn { position: static; width: auto; padding: 0 0.1rem;
  font-size: 0.9rem; line-height: 1.75;
  background: none; border: none; color: var(--text-body); }
.push-mount .push-btn.on { border: none; color: var(--neon-yellow); }
.push-mount .push-btn.denied { border: none; color: var(--neon-magenta); }
.push-mount .push-btn:hover { border: none; color: var(--neon-cyan); }

/* ─── Файловый менеджер (вкладка 🗃): две панели, как Total Commander ─── */
.files-topbar { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center;
  margin: 0 0 0.8rem; padding: 0.55rem 0.9rem; }
.files-svc { display: inline-flex; gap: 0.45rem; align-items: center; cursor: pointer;
  color: var(--text-body); font-size: 0.8rem; }
.files-svc input { accent-color: var(--neon-cyan); cursor: pointer; margin: 0; }
.files-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; align-items: stretch; }
.files-panel { display: flex; flex-direction: column; padding: 0.7rem 0.8rem; min-width: 0; }
.files-panel__form { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.files-panel__head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline;
  justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.76rem; }
.files-panel__crumbs { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: baseline; }
.files-panel__crumbs a { color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.files-panel__crumbs a:hover { color: var(--neon-cyan); }
.files-panel__crumbs .file-up { color: var(--neon-yellow); }
.files-panel__crumbs span { color: var(--text-dim); }
.files-panel__roots { display: flex; gap: 0.5rem; }
.files-panel__roots a { color: var(--text-dim); text-decoration: none;
  border: 1px solid var(--border); padding: 0.05rem 0.4rem; }
.files-panel__roots a.is-active { color: var(--neon-yellow); border-color: var(--neon-yellow); }
.files-panel__roots a:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.files-table { width: 100%; margin-top: 0; }
.files-table td, .files-table th { font-size: 0.78rem; padding: 0.28rem 0.4rem; }
.files-table td.path { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-panel__bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-top: auto; padding-top: 0.5rem; }
.files-panel__bar .admin-note { flex: 1; }
.files-panel__bar .admin-submit { width: auto; margin: 0; padding: 0.4rem 0.9rem; font-size: 0.75rem; }
/* Колонка действий в таблицах админки: кнопки стопкой, компактные —
   .admin-submit по умолчанию width:100%, в ряд с nowrap рвали таблицу
   за край страницы (грабли 📦 проекты, 2026-08-26). */
.admin-actions { display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; }
.admin-actions form { margin: 0; }
.admin-actions .admin-submit { width: auto; margin: 0; padding: 0.32rem 0.55rem;
  font-size: 0.7rem; white-space: nowrap; }
.admin-actions .admin-submit--on { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.admin-actions .admin-submit--off { border-color: var(--neon-magenta); color: var(--neon-magenta); }
.files-forms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.files-forms form { flex: 1; min-width: 210px; border: 1px dashed var(--border); padding: 0.6rem; }
.files-forms .log-filters { margin: 0; }
.file-minibtn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 0.72rem; padding: 0.08rem 0.32rem; cursor: pointer; margin-right: 0.2rem;
}
.file-minibtn:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

/* MD-редактор */
.file-toolbar { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.8rem 0; }
.file-toolbar button {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; padding: 0.22rem 0.5rem; cursor: pointer;
}
.file-toolbar button:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.file-toolbar button.is-active { color: var(--neon-yellow); border-color: var(--neon-yellow); }
.file-toolbar__gap { flex: 1; }
.file-panes { display: block; }
#preview { display: none; }
.file-panes.is-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.file-panes.is-split #preview { display: block; }
.file-panes.is-preview .file-editor { display: none; }
.file-panes.is-preview #preview { display: block; }
.file-preview {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-body);
  padding: 0.9rem 1.3rem; min-height: 55vh; overflow: auto; font-size: 0.88rem; line-height: 1.7;
}
.file-preview h1, .file-preview h2 { border: none; }
.file-preview a { color: var(--neon-cyan); }
.file-actions { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.8rem; }
.file-actions .admin-submit { width: auto; margin-top: 0; padding: 0.5rem 1.4rem; }
.files-editor .admin-submit { width: auto; margin: 0; padding: 0.4rem 0.9rem; font-size: 0.75rem; }
@media (max-width: 900px) {
  .files-dual { grid-template-columns: 1fr; }
  .file-panes.is-split { grid-template-columns: 1fr; }
}