/*
  Блог hi.datool.ru/blog/ и разделы /news/, /notes/, /events/ (apps/news/views.py, шаблоны templates/news/).
  Лента и новость — утверждены пользователем 26.10.2026: крошки как на сайте
  (.channel-breadcrumb), слева лента строками или белый лист новости, справа
  боковая панель (.nw-aside), которая стоит на месте при прокрутке. Поиск,
  тег и автор — утверждённые макеты 24.10.2026 («Карточки», «Карточка сбоку»),
  их новый вид — следующим шагом.

  Все классы — с приставкой nw-, чтобы общие стили сайта (.card, .btn, .tag…)
  их не задевали. Цвета — переменные темы сайта (source.css, те же имена, что
  у brain-pro), свои — ниже в .nw и [data-bs-theme=dark] .nw: тёмная тема
  работает сама. Содержимое держится над фоновой анимацией классом bp-page у
  <main> (templates/news/base.html).
*/

/* 1. Цвета раздела поверх переменных темы */
.nw {
  --nw-bg: var(--bs-body-bg, #f7f7f8);
  --nw-surface: var(--bp-surface, #fff);
  --nw-surface-2: var(--bs-input-bg, #ecedee);
  --nw-ink: var(--bp-ink, #2c2d2f);
  --nw-muted: var(--bp-muted, #666a71);
  --nw-line: var(--line, #dcdcdc);
  --nw-brand: var(--brand, #6b45f6);
  --nw-brand-ink: var(--text-purple, #6b45f6);
  --nw-hover: var(--bp-hover, #edebfa);
  --nw-hover-2: var(--bp-hover-strong, #d2caf6);
  --nw-on-brand: #fff;
  --nw-green: #1d7f55; --nw-green-bg: #e6f6ee;
  --nw-blue: #2a62c9; --nw-blue-bg: #e8f0fd;
  --nw-orange: #b4560b; --nw-orange-bg: #fdf0e3;
  --nw-mark: #fff1a8; --nw-mark-ink: #2c2d2f;
  --nw-code-bg: #f1f1f4;
  color: var(--nw-ink);
}
[data-bs-theme=dark] .nw {
  --nw-green: #6cc79c; --nw-green-bg: rgba(96, 173, 137, .14);
  --nw-blue: #8db1f3; --nw-blue-bg: rgba(126, 166, 240, .14);
  --nw-orange: #f0a35e; --nw-orange-bg: rgba(240, 163, 94, .14);
  --nw-mark: rgba(255, 214, 0, .28); --nw-mark-ink: #f4f4f4;
  --nw-code-bg: #22262c;
}
.nw *, .nw *::before, .nw *::after { box-sizing: border-box; }
.nw a { color: inherit; text-decoration: none; }
.nw mark { background: var(--nw-mark); color: var(--nw-mark-ink); border-radius: 3px; padding: 0 1px; }
.nw svg.nw-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.nw :focus-visible { outline: 2px solid var(--nw-brand); outline-offset: 2px; }

/* 2. Каркас: крошки, заголовок с рубриками, ниже сетка «лента или лист | боковая панель 320 px».
   Заголовок и рубрики стоят над сеткой — панель начинается вровень с первой новостью */
.nw-page { padding-bottom: 72px; }
.nw-head { display: grid; gap: 20px; margin-bottom: 24px; }
.nw-title { margin: 0; font-size: 46px; line-height: 1.12; font-weight: 700; letter-spacing: -.015em; color: var(--bp-ink); text-wrap: balance; overflow-wrap: anywhere; }
.nw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.nw-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nw-plain { display: flex; flex-direction: column; gap: 20px; padding-bottom: 72px; }
.nw-plain > .channel-breadcrumb { margin-bottom: 0; }
.nw-h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 700; text-wrap: balance; }
.nw-h2 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 700; }
.nw-h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.nw-card { background: var(--nw-surface); border: 1px solid var(--nw-line); border-radius: 18px; }
.nw-pad { padding: 20px; }
.nw-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nw-between { justify-content: space-between; }
.nw-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--nw-brand); background: var(--nw-brand); color: var(--nw-on-brand) !important; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.nw-btn--ghost { background: var(--nw-surface); color: var(--nw-brand-ink) !important; border-color: var(--nw-line); }
.nw-btn--ghost:hover { border-color: var(--nw-brand); }
.nw-link { color: var(--nw-brand-ink) !important; }
.nw-date { font-size: 13px; color: var(--nw-muted); white-space: nowrap; }
.nw-muted { color: var(--nw-muted); }

/* 3. Рубрики: в ленте — таблетки с рамкой цвета бренда, выбранная залита (как
   у brain-pro); у автора и поиска — серая таблетка (как ряд периодов). Теги —
   светло-фиолетовые таблетки, при наведении залитые */
.nw-menu { display: flex; flex-wrap: wrap; gap: 12px; }
.nw-menu a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 2px solid var(--brand); border-radius: 50px; color: var(--brand); font-size: 16px; line-height: 1.2; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.nw-menu a small { font-size: 13px; opacity: .75; }
.nw-menu a:hover { background: var(--brand-dark, var(--brand)); border-color: var(--brand-dark, var(--brand)); color: #fff; }
.nw-menu a[aria-current] { background: var(--brand); color: #fff; }
[data-bs-theme=dark] .nw-menu a { color: var(--text-gray-dark, #dcdcdc); border-color: var(--text-gray-dark, #dcdcdc); }
[data-bs-theme=dark] .nw-menu a[aria-current], [data-bs-theme=dark] .nw-menu a:hover { background: var(--brand-dark, var(--brand)); border-color: var(--brand-dark, var(--brand)); color: #fff; }
.nw-pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--nw-surface-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nw-pills a { flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nw-pills a small { color: var(--nw-muted); font-size: 12px; }
.nw-pills a[aria-current] { background: var(--nw-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); color: var(--nw-brand-ink); font-weight: 700; }
.nw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nw .nw-tag { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: var(--color-purple-shadow-rgba, rgba(104, 69, 246, .1)); color: var(--text-purple, var(--nw-brand-ink)); font-size: 14px; line-height: 1; white-space: nowrap; transition: background-color .2s, color .2s; }
.nw .nw-tag:hover { background: var(--bg-purple, var(--nw-brand)); color: #fff; }
.nw-tag small { opacity: .7; font-size: 12px; }
[data-bs-theme=dark] .nw .nw-tag { background: rgba(178, 163, 245, .12); }
[data-bs-theme=dark] .nw .nw-tag:hover { background: var(--bg-purple, var(--nw-brand)); color: var(--color-black-2, #16171a); }
.nw .nw-tag--sm { padding: 5px 10px; font-size: 12px; }
.nw-rub { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.nw .nw-rub--purple { background: var(--nw-hover); color: var(--nw-brand-ink); }
.nw .nw-rub--blue { background: var(--nw-blue-bg); color: var(--nw-blue); }
.nw .nw-rub--green { background: var(--nw-green-bg); color: var(--nw-green); }
.nw .nw-rub--orange { background: var(--nw-orange-bg); color: var(--nw-orange); }
/* Цвета плашек — через .nw: иначе общее «.nw a { color: inherit }» перекрасило бы
   плашку-ссылку в цвет текста строки.
   Плашка рубрики в строке над заголовком — ссылка на рубрику: при наведении фон
   становится цветом её текста, текст — белым (замечание пользователя 26.10.2026) */
.nw a.nw-rub { transition: background-color .2s, color .2s; }
.nw a.nw-rub--purple:hover { background: var(--nw-brand-ink); color: #fff; }
.nw a.nw-rub--blue:hover { background: var(--nw-blue); color: #fff; }
.nw a.nw-rub--green:hover { background: var(--nw-green); color: #fff; }
.nw a.nw-rub--orange:hover { background: var(--nw-orange); color: #fff; }
[data-bs-theme=dark] .nw a.nw-rub:hover { color: #16171a; }

/* 4. Обложка 16:9: загруженная картинка или нарисованная заглушка цвета рубрики
   (цвет подписи — через .nw .nw-cov: иначе .nw a перекрасил бы её в цвет текста) */
.nw-cov { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; color: #fff; background-color: #5b3fe0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 28px 28px; }
.nw .nw-cov { color: #fff; }
.nw-cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-cov--purple { background-color: #5b3fe0; }
.nw-cov--blue { background-color: #2a5fc4; }
.nw-cov--green { background-color: #1b7a52; }
.nw-cov--orange { background-color: #b4560b; }
.nw-cov__k { position: absolute; left: 6%; top: 9%; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.nw-cov__art { position: absolute; right: 6%; bottom: 12%; width: 38%; height: 52%; display: flex; align-items: flex-end; gap: 5%; }
.nw-cov__art i { flex: 1; border-radius: 4px 4px 1px 1px; background: rgba(255, 255, 255, .85); }
.nw-cov__art i:nth-child(odd) { background: rgba(255, 255, 255, .45); }
.nw-cov--sm .nw-cov__k { font-size: 11px; }

/* 5. Автор: круглые аватары; у «Редакции» — логотип на белом */
.nw-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nw-muted); min-width: 0; }
.nw-by b { color: var(--nw-ink); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-av { flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 700; letter-spacing: .02em; background: var(--nw-brand); }
.nw-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-av--logo { background: #fff; border: 1px solid var(--nw-line); }
.nw-av--logo img { width: 76%; height: auto; object-fit: contain; }
.nw-av--24 { width: 24px; height: 24px; font-size: 10px; }
.nw-av--32 { width: 32px; height: 32px; font-size: 12px; }
.nw-av--44 { width: 44px; height: 44px; font-size: 15px; }
.nw-av--64 { width: 64px; height: 64px; font-size: 22px; }
.nw-av--120 { width: 120px; height: 120px; font-size: 38px; }

/* 6. Карточка новости: низ прижат, пустоты внутри нет */
.nw-nc { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 16px; min-width: 0; }
.nw-nc:hover { border-color: var(--nw-hover-2); }
.nw-nc__body { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; flex: 1; }
.nw-nc__t { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; }
.nw-nc__t a:hover { color: var(--nw-brand-ink); }
.nw-nc__l { margin: 0; font-size: 14px; line-height: 1.4; color: var(--nw-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-nc__f { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 7. Лента — новости строками (утверждено 26.10.2026): белая карточка с тенью и
   фиолетовой полосой слева; строка «рубрика · дата · минуты · просмотры»,
   заголовок, анонс в две строки, обложка 16:9 справа. Нет обложки
   (.nw-item--text) — текст на всю ширину, анонс до трёх строк */
.nw-list { display: grid; gap: 20px; }
.nw-item { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center; padding: 24px 26px 24px 30px; border-radius: var(--border-radius-xl, 2rem); background: var(--nw-surface); border: 1px solid rgba(130, 92, 255, .14); box-shadow: var(--bp-shadow); transition: border-color .25s, box-shadow .25s; }
.nw-item::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, var(--text-purple, #6b45f6), var(--text-purple-light, #b2a3f5)); }
/* Полоса слева — цвета рубрики, как её плашка (решение пользователя 26.10.2026) */
.nw-item--purple::before { background: var(--nw-brand-ink); }
.nw-item--green::before { background: var(--nw-green); }
.nw-item--orange::before { background: var(--nw-orange); }
.nw-item--blue::before { background: var(--nw-blue); }
.nw-item:hover { border-color: rgba(130, 92, 255, .32); box-shadow: 0 18px 46px rgba(22, 18, 45, .1); }
.nw-item--text { grid-template-columns: minmax(0, 1fr); }
.nw-item__b { min-width: 0; }
.nw-item .nw-meta { margin-bottom: 10px; }
.nw-item__t { margin: 0 0 10px; font-size: 24px; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; color: var(--bp-ink); text-wrap: balance; }
.nw-item__t a { transition: color .2s; }
.nw-item__t a:hover { color: var(--text-purple, var(--nw-brand-ink)); }
.nw-item__l { margin: 0; font-size: 16px; line-height: 1.45; color: var(--bp-ink-2, var(--nw-ink)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-item--text .nw-item__l { -webkit-line-clamp: 3; }
.nw-item__img { display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; }
.nw-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-bs-theme=dark] .nw-item { background: linear-gradient(180deg, var(--bp-surface), var(--bp-surface-2)); border-color: rgba(255, 255, 255, .08); box-shadow: 0 14px 40px rgba(0, 0, 0, .22); }
/* Строка над заголовком (лента и новость): рубрика, дата, минуты, просмотры с глазиком */
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 15px; color: var(--text-gray, var(--nw-muted)); }
.nw-meta i { font-style: normal; opacity: .55; }
.nw-meta .nw-rub { height: 24px; font-size: 13px; }
.nw-views { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
/* «Загрузить ещё» и номера страниц — те же размеры, что у каталога max./channels/
   (.catalog-more__button в catalog.css — на страницах новостей он не подключён) */
.nw-paging { display: grid; justify-items: center; gap: 16px; margin-top: 6px; }
.nw-paging:empty { display: none; }
.nw-paging .dt-pager { margin: 0; }
.nw .nw-more { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--bp-surface); color: var(--text-purple); font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(30, 20, 80, .12); }
.nw .nw-more:hover { border-color: var(--brand); }
.nw-more svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nw-more[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* 7a. Боковая панель: стоит на месте при прокрутке. Панель новости (--long)
   выше экрана — едет вместе со страницей, пока не покажется её низ, дальше
   стоит (высоту пишет news.js в --nw-aside-h) */
.nw-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; min-width: 0; }
.nw-aside--long { top: min(16px, calc(100vh - var(--nw-aside-h, 0px) - 16px)); }
.nw-sub, .nw-soc, .nw-pop { position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: 24px; border: 1px solid var(--bp-line, var(--nw-line)); border-radius: 20px; background: var(--nw-surface); box-shadow: 0 12px 38px rgba(27, 18, 58, .06); }
.nw-sub { display: flex; flex-direction: column; gap: 20px; background: var(--bg-brand-light, #f3f0ff); }
.nw-sub__head { display: flex; align-items: center; gap: 20px; }
.nw-sub__head b { font-size: 24px; line-height: 1.2; font-weight: 700; }
.nw-sub__ic { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #6033eb; color: #fff; }
.nw-sub p { margin: 0; font-size: 16px; line-height: 1.3; }
.nw .nw-sub__btn { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 16px; transition: background-color .2s; }
.nw .nw-sub__btn:hover { background: var(--brand-dark, var(--brand)); }
.nw-soc::before { content: ""; position: absolute; right: 20px; top: 20px; width: 68px; height: 34px; border-left: 2px solid rgba(107, 69, 246, .38); border-bottom: 2px solid rgba(107, 69, 246, .38); border-radius: 0 0 0 18px; transform: rotate(180deg); opacity: .55; pointer-events: none; }
.nw-soc::after { content: ""; position: absolute; left: -62px; bottom: -62px; width: 170px; height: 170px; border-radius: 50%; background: rgba(107, 69, 246, .1); opacity: .72; pointer-events: none; z-index: -1; }
.nw-soc__t { display: block; margin-bottom: 14px; font-size: 20px; line-height: 1.2; font-weight: 700; }
.nw-soc p { margin: 0 0 16px; font-size: 15px; line-height: 1.4; }
.nw-soc__icons { display: flex; flex-wrap: wrap; gap: 10px; }
/* Значок соцсети: цветной кружок с белым логотипом (news/includes/social_icon.html) */
.nw .nw-si { flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer; transition: transform .2s, opacity .2s; }
.nw .nw-si:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -6px var(--nw-si-c, var(--brand)); }
.nw-si b { font-size: 14px; }
/* Цвет значка — и фон, и цветная тень при наведении (--nw-si-c) */
.nw .nw-si--max { --nw-si-c: #6033eb; background: #6033eb; }
.nw .nw-si--vk { --nw-si-c: #0077ff; background: #0077ff; }
.nw .nw-si--telegram { --nw-si-c: #2aabee; background: #2aabee; }
.nw .nw-si--ok { --nw-si-c: #ee8208; background: #ee8208; }
.nw .nw-si--dzen { --nw-si-c: #3d3d3d; background: #3d3d3d; }
.nw .nw-si--rss { --nw-si-c: #f26522; background: #f26522; }
.nw .nw-si--copy { background: var(--nw-surface-2); color: var(--bp-ink); }
/* Поиск в колонке: сила .nw .nw-find — выше общих полей кабинета (fields.css) */
.nw .nw-find input { display: block; width: 100%; height: 44px; min-height: 0; padding: 0 16px; border: 1px solid var(--bp-line, var(--nw-line)); border-radius: 6px; background: var(--nw-surface); color: inherit; font: inherit; font-size: 16px; box-shadow: none; outline: 0; }
.nw .nw-find input:hover { border-color: var(--nw-hover-2); }
.nw .nw-find input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(107, 69, 246, .12); }

/* «Аналитика MAX» — вариант 10 «Тёмный, как блок автора» (утверждён 26.10.2026):
   тёмный фон с фиолетовым свечением в углу, белое поле, фиолетовая кнопка,
   внизу слева каналов, справа публикаций */
.nw-amax, .nw-adark { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; padding: 24px 22px; border-radius: 20px; background: #1f1a3a; color: #f1effa; box-shadow: 0 12px 38px rgba(27, 18, 58, .12); }
.nw-amax::before, .nw-adark::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .55), transparent 70%); z-index: -1; }
[data-bs-theme=dark] .nw-amax, [data-bs-theme=dark] .nw-adark { background: #0f0d1c; }
.nw-amax__k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c9bdff; }
.nw-amax__t { font-size: 22px; line-height: 1.25; text-wrap: balance; }
.nw .nw-amax input { display: block; width: 100%; height: 46px; min-height: 0; padding: 0 14px; border: 0; border-radius: 8px; background: #fff; color: #2c2d2f; font: inherit; font-size: 15px; box-shadow: none; outline: 0; }
.nw .nw-amax input:focus { box-shadow: 0 0 0 3px rgba(178, 163, 245, .5); }
.nw-amax__btn { height: 46px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font: inherit; font-size: 16px; cursor: pointer; transition: background-color .2s; }
.nw-amax__btn:hover { background: var(--brand-dark, var(--brand)); }
/* Нижняя строка двух чисел — у «Аналитики MAX» и у карточки автора: левое слева, правое справа */
.nw-amax__nums, .nw-adark__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.nw-amax__nums div, .nw-adark__nums div { display: grid; gap: 2px; }
.nw-amax__nums div + div, .nw-adark__nums div + div { text-align: right; }
.nw-amax__nums b, .nw-adark__nums b { font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw-amax__nums small, .nw-adark__nums small { font-size: 13px; color: rgba(241, 239, 250, .6); }
/* «Популярное сейчас» (как на образце пользователя 26.10.2026): надзаголовок,
   заголовок, миниатюры 3:2, название до трёх строк 14 px, без просмотров */
.nw-pop { display: grid; gap: 6px; }
.nw-pop__k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-purple, var(--nw-brand-ink)); }
.nw-pop__h { font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.nw-pop__list { display: grid; gap: 16px; margin-bottom: 8px; }
.nw-pop__list a { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.nw .nw-pop__img { aspect-ratio: 3 / 2; border-radius: 12px; border: 1px solid var(--nw-line); transition: transform .2s; }
.nw-pop__list b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.35; font-weight: 400; }
.nw-pop__list a:hover b { color: var(--text-purple, var(--nw-brand-ink)); }
.nw-pop__list a:hover .nw-pop__img { transform: scale(1.04); }

/* 8. «Пусто» (номера страниц — общая «Таблетка» .dt-pager, datool.css) */
.nw-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 20px; }
.nw-empty__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--nw-hover); color: var(--nw-brand-ink); }
.nw-empty__ic svg.nw-i { width: 28px; height: 28px; }
.nw-empty p { margin: 0; color: var(--nw-muted); max-width: 460px; }

/* 9. Новость (утверждено 26.10.2026): белый лист — строка над заголовком,
   заголовок, анонс, обложка во всю ширину листа, текст, теги, «автор ·
   поделиться»; ниже «Читайте также» плитками */
.nw-preview { display: inline-block; margin: 0 0 16px; background: var(--nw-orange-bg); color: var(--nw-orange); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700; }
.nw-paper { min-width: 0; overflow: hidden; border-radius: 24px; background: var(--nw-surface); border: 1px solid var(--bp-line, var(--nw-line)); }
.nw-paper__in { display: flex; flex-direction: column; gap: 24px; padding: 36px 48px; }
.nw-paper__in:first-child { padding-bottom: 28px; }
/* Второй кусок листа: после обложки — отступ 32 px, без обложки — вплотную к анонсу */
.nw-cover + .nw-paper__in { padding-top: 32px; }
.nw-paper__in + .nw-paper__in { padding-top: 0; }
.nw-paper .nw-title { font-size: 40px; }
.nw-lead { margin: 0; font-size: 21px; line-height: 1.45; color: var(--bp-ink-2, var(--nw-ink)); }
.nw-cover { display: block; width: 100%; height: auto; }
.nw-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 16px; border-top: 1px solid var(--bp-line, var(--nw-line)); }
.nw .nw-info__by { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text-gray, var(--nw-muted)); }
.nw-info__by span { border-bottom: 1px solid currentColor; }
.nw .nw-info__by:hover { color: var(--text-purple, var(--nw-brand-ink)); }
.nw-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nw-share__t { margin-right: 4px; font-size: 14px; color: var(--text-gray, var(--nw-muted)); }
/* Значки «поделиться» — меньше, чем в панели справа (замечание пользователя 26.10.2026) */
.nw .nw-share .nw-si { width: 28px; height: 28px; }
.nw-share .nw-si svg { width: 14px; height: 14px; }
.nw-share__done { font-size: 13px; color: var(--nw-green); }
.nw-related { display: grid; gap: 16px; margin-top: 48px; }
.nw-tile { display: grid; gap: 10px; align-content: start; padding: 10px 10px 16px; }
.nw-tile .nw-cov { border-radius: 12px; }
.nw-tile__t { margin: 0; padding: 0 6px; font-size: 17px; line-height: 1.25; }
.nw-tile__t a:hover { color: var(--text-purple, var(--nw-brand-ink)); }
.nw-tile__m { padding: 0 6px; color: var(--nw-muted); font-size: 13px; }

/* 10. Текст новости: Markdown (apps/docs/render.py) — вид текста brain-pro:
   18 px, крупные подзаголовки, ссылки подчёркнуты, маркеры списков —
   фиолетовые точки; код, рисунки, таблицы и выноски — свои. Тот же вид — у
   предпросмотра в админке (static/css/admin_news_editor.css) */
.nw-prose { font-size: 18px; line-height: 1.5; color: var(--bp-ink, var(--nw-ink)); overflow-wrap: anywhere; }
.nw-prose > :first-child { margin-top: 0; }
.nw-prose > :last-child { margin-bottom: 0; }
.nw-prose p { margin: 0 0 1em; }
.nw-prose h2, .nw-prose h3, .nw-prose h4 { line-height: 1.2; letter-spacing: -.02em; scroll-margin-top: 100px; }
.nw-prose h2 { margin: 1em 0 .3em; font-size: clamp(27px, 3vw, 38px); }
.nw-prose h3 { margin: 1.65em 0 .65em; font-size: clamp(22px, 2.25vw, 29px); }
.nw-prose h4 { margin: 1.5em 0 .6em; font-size: 20px; }
.nw-prose ul, .nw-prose ol { margin: 0 0 1em; padding-left: 26px; }
.nw-prose ul { list-style: none; }
.nw-prose ul > li { position: relative; }
.nw-prose ul > li::before { content: ""; position: absolute; left: -21px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--text-purple, var(--nw-brand)); box-shadow: 0 0 0 3px var(--color-purple-shadow-rgba, rgba(104, 69, 246, .1)); }
.nw-prose ol { list-style: decimal; }
.nw-prose ol > li::marker { color: var(--text-purple, var(--nw-brand)); font-weight: 700; }
.nw-prose li { margin-bottom: .5em; }
.nw-prose a { color: var(--a-content, var(--nw-brand-ink)); text-decoration: underline 1px; text-underline-offset: 3px; }
.nw-prose code { font-family: 'PT Mono', ui-monospace, Menlo, monospace; font-size: .86em; background: var(--nw-code-bg); padding: 1px 6px; border-radius: 6px; }
.nw-prose pre { margin: 0 0 1em; background: var(--nw-code-bg); border: 1px solid var(--nw-line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font: 13.5px/1.6 'PT Mono', ui-monospace, Menlo, monospace; white-space: pre; }
.nw-prose pre code { background: none; padding: 0; font-size: inherit; }
.nw-prose blockquote { margin: 0 0 1em; padding: 20px 22px; border-radius: 16px; background: var(--nw-hover); font-size: 19px; line-height: 1.5; }
.nw-prose blockquote p { margin: 0 0 10px; }
.nw-prose blockquote p:last-child { margin: 0; }
.nw-prose table { margin: 0 0 1em; width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 15px; }
.nw-prose th, .nw-prose td { border-bottom: 1px solid var(--nw-line); padding: 8px 10px; text-align: left; }
.nw-prose .docs-figure { margin: 1.5em 0; }
.nw-prose .docs-figure img { display: block; max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--nw-line); }
.nw-prose .docs-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--nw-muted); }
.nw-prose .admonition { margin: 0 0 1em; padding: 14px 16px; border-radius: 12px; background: var(--nw-blue-bg); }
.nw-prose .admonition.warning { background: var(--nw-orange-bg); }
.nw-prose .admonition.danger { background: var(--nw-orange-bg); border: 1px solid var(--nw-orange); }
.nw-prose .admonition-title { font-weight: 700; margin: 0 0 6px; }

/* 11. Поиск — вариант 9 «Светлая с тёмной кнопкой» (26.10.2026): белая полоса
   с надписью, заголовком, полем и тёмной кнопкой «Искать» в одну строку (на
   телефоне кнопка — под полем во всю ширину); тег — цветная шапка с похожими тегами */
.nw-band { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 40px 24px; border-radius: 22px; background: var(--nw-surface); border: 1px solid var(--nw-line); box-shadow: 0 12px 38px rgba(27, 18, 58, .06); }
.nw-band h1 { margin: 0; font-size: 34px; line-height: 1.15; text-wrap: balance; }
.nw-band__k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nw-brand-ink); }
.nw-sform { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 720px; }
.nw-field { display: flex; flex: 1 1 280px; align-items: center; gap: 10px; min-width: 0; height: 54px; padding: 0 16px; border-radius: 12px; background: var(--nw-surface); border: 1px solid var(--nw-line); }
/* Кнопка: тёмно-фиолетовая на светлой теме; на тёмной такая слилась бы с фоном — там фирменный фиолетовый */
/* Кнопка «Искать» — фирменная фиолетовая (решение пользователя 26.10.2026) */
.nw-sbtn { height: 54px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--nw-brand); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .2s; }
.nw-sbtn:hover { background: var(--brand-dark, #5a34e8); }
.nw-field:focus-within { border-color: var(--nw-brand); box-shadow: 0 0 0 3px rgba(107, 69, 246, .12); }
/* Само поле внутри рамки — без своего оформления: на hi. общие поля кабинета
   (fields.css, .hi-cabinet main form input) дали бы ему серый фон, рамку и
   кольцо фокуса — в фокусе было две рамки (замечание пользователя 26.10.2026) */
.nw .nw-field input, .nw .nw-field input:hover, .nw .nw-field input:focus { display: block; flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; font: inherit; font-size: 17px; color: inherit; }
.nw-field svg { color: var(--nw-muted); }
.nw-band--tag { background-color: #5b3fe0; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 28px 28px; border: 0; box-shadow: none; color: #fff; }
.nw-band--tag h1 { font-size: 48px; }
.nw-band--tag p { margin: 0; color: rgba(255, 255, 255, .88); }
.nw-band--tag .nw-tag { background: rgba(255, 255, 255, .18); color: #fff; }
.nw-band--tag .nw-tag:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.nw-band--tag .nw-tag small { color: rgba(255, 255, 255, .75); }
.nw-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 11a. Поиск и тег (утверждено 26.10.2026): «Нашли N», рубрики кнопками — как
   «Каналы / Публикации» на поиске MAX (.search-tab), материалы «вразнобой»:
   без скрипта — CSS-колонки, со скриптом (news.js) — колонки-стопки, каждая
   карточка в самую короткую колонку, низ колонок выровнен */
.nw-found { margin: 0; font-size: 22px; line-height: 1.25; text-align: center; text-wrap: balance; }
.nw-stabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nw .nw-stab { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--bp-surface); color: var(--bp-ink); font-size: 15px; white-space: nowrap; transition: border-color .15s; }
.nw-stab svg { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nw-stab small { font-size: 13px; color: var(--bp-muted); font-variant-numeric: tabular-nums; }
.nw .nw-stab:hover { border-color: var(--brand); color: var(--text-purple); }
.nw .nw-stab[aria-current] { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700; }
.nw-stab[aria-current] small { color: rgba(255, 255, 255, .85); }
.nw-masonry { columns: 3 280px; column-gap: 16px; }
.nw-masonry.is-js { columns: auto; display: flex; gap: 16px; align-items: flex-start; }
.nw-mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.nw-mcard { display: grid; gap: 10px; margin: 0 0 16px; padding: 16px; break-inside: avoid; border: 1px solid var(--line); border-radius: 18px; background: var(--bp-surface); }
.nw-masonry.is-js .nw-mcard { margin: 0; }
.nw-mcard__img { display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; }
.nw-mcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-mcard .nw-meta { font-size: 14px; }
.nw-mcard__t { margin: 0; font-size: 19px; line-height: 1.25; }
.nw-mcard__t a:hover { color: var(--text-purple, var(--nw-brand-ink)); }
.nw-mcard__l { margin: 0; font-size: 15px; line-height: 1.45; color: var(--bp-ink-2, var(--nw-ink)); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.nw .nw-mcard__go { justify-self: end; font-size: 14px; color: var(--text-purple, var(--nw-brand-ink)); }

/* 12. Автор (утверждено 26.10.2026): тёмная карточка автора в боковой панели
   (общие фон, свечение и строка чисел — у «Аналитики MAX» выше) */
.nw-adark__head { display: flex; align-items: center; gap: 14px; }
.nw-adark__name { display: block; font-size: 20px; line-height: 1.2; }
.nw-adark__pos { display: block; margin-top: 4px; font-size: 14px; color: rgba(241, 239, 250, .65); }
.nw-adark__badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-top: 6px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #c9bdff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.nw-adark__bio { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(241, 239, 250, .8); }
.nw .nw-si--site { --nw-si-c: #6b6f76; background: rgba(255, 255, 255, .14); }

/* 13. Узкие экраны: панель уходит под ленту или лист и больше не закреплена */
@media (max-width: 1080px) {
  .nw-layout { grid-template-columns: minmax(0, 1fr); }
  .nw-aside, .nw-aside--long { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
  .nw-title { font-size: 38px; }
}
@media (max-width: 900px) {
  .nw-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .nw-title, .nw-paper .nw-title { font-size: 28px; }
  .nw .nw-stab { height: 38px; padding: 0 14px; font-size: 14px; }
  .nw-found { font-size: 19px; }
  .nw-menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 10px; }
  .nw-menu::-webkit-scrollbar { display: none; }
  .nw-list { gap: 14px; }
  .nw-item { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 18px 22px 20px; border-radius: 18px; }
  .nw-item__img { order: -1; }
  .nw-item::before { width: 3px; top: 22px; bottom: 22px; }
  .nw-item__t { font-size: 20px; }
  .nw-item__l { font-size: 15px; }
  .nw-paper { border-radius: 18px; }
  .nw-paper__in { padding: 22px 18px; }
  .nw-lead { font-size: 18px; }
  .nw-prose { font-size: 17px; line-height: 1.4; }
  .nw-info { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .nw-h1 { font-size: 26px; }
  .nw-g3 { grid-template-columns: minmax(0, 1fr); }
  .nw-band h1 { font-size: 26px; }
  .nw-band { padding: 28px 18px; }
  .nw-sbtn { flex: 1 1 100%; }
  .nw-band--tag h1 { font-size: 34px; }
}