/* =========================================================================
 * dmitrov.org hp-topbar — единый эталон для ВСЕХ страниц кроме главной
 * Аналог inline-стиля templates/index.html (homepage v4), плюс:
 *  - иконка-лупа ВСЕГДА в шапке (mobile/tablet/desktop)
 *  - PWA-кнопка «Установить» САМАЯ ПРАВАЯ (display:none по умолчанию,
 *    JS добавляет .visible когда beforeinstallprompt)
 *  - search-bar — sticky под шапкой, появляется только после клика на лупу
 *
 * Главная / использует свою inline-шапку (без лупы, поиск в hero).
 * ========================================================================= */

/* ==== БАЗА ==== */
:root{
  --nws-topbar-bg:rgba(255,255,255,.86);
  --nws-topbar-border:rgba(0,0,0,.06);
  --nws-topbar-h:59px;
}
html.dark{
  --nws-topbar-bg:rgba(13,17,23,.86);
  --nws-topbar-border:rgba(255,255,255,.07);
}

.dm-btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;
  background:transparent;color:var(--color-text,#111);
  border:1px solid transparent;transition:background .15s;
  font-family:inherit;cursor:pointer;flex-shrink:0;
}
.dm-btn-icon:hover{background:rgba(0,0,0,.06)}
html.dark .dm-btn-icon:hover{background:rgba(255,255,255,.08)}

/* ==== SLIM TOPBAR — как на главной (sticky, blur-фон, z-30) ==== */
.hp-topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;
  background:var(--nws-topbar-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--nws-topbar-border);
}
@media(max-width:480px){
  .hp-topbar{gap:4px;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px 8px}
}

.hp-brand{
  font-weight:800;font-size:15px;letter-spacing:.03em;
  color:var(--color-text,#111);line-height:1.05;
  padding:2px 4px;flex-shrink:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.hp-brand small{
  display:block;font-weight:500;font-size:9px;
  color:var(--dm-muted,#8b949e);letter-spacing:.08em;
  text-transform:uppercase;margin-top:1px;
}
@media(max-width:380px){.hp-brand{font-size:14px}}

/* ==== ПОГОДА (между брендом и лупой/темой) ==== */
.hp-weather{
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  margin-left:auto; /* прижимает к правой стороне, иконки/кнопки ещё правее */
  background:var(--color-surface,#fff);
  border:1px solid rgba(0,0,0,.08);
  padding:6px 11px;border-radius:99px;
  font-size:12.5px;font-weight:700;
  color:var(--color-text,#111);text-decoration:none;
  cursor:pointer;transition:opacity .15s;
}
.hp-weather i{color:var(--color-primary,#007aff)}
.hp-weather:hover{opacity:.85}
@media(max-width:480px){.hp-weather{padding:4px 9px;font-size:12px}}

/* ==== DESKTOP-NAV (≥1024px) ==== */
.hp-desknav{display:none}
@media(min-width:1024px){
  .hp-desknav{
    display:flex;align-items:center;gap:2px;margin-left:12px;
  }
  .hp-desknav a{
    display:inline-flex;align-items:center;gap:5px;
    padding:7px 11px;border-radius:10px;
    font-size:12.5px;font-weight:600;
    color:var(--color-text,#111);opacity:.78;
    text-decoration:none;white-space:nowrap;
    transition:opacity .15s,background .15s,color .15s;
  }
  .hp-desknav a:hover{
    opacity:1;background:rgba(0,122,255,.10);
    color:var(--color-primary,#007aff);
  }
  html.dark .hp-desknav a{color:#e6edf3}
}

/* ==== ИКОНКА-ЛУПА в шапке (ВСЕГДА видна кроме search-bar открыт) ==== */
.hp-search-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;
  background:transparent;color:var(--color-text,#111);
  border:none;cursor:pointer;font-family:inherit;flex-shrink:0;
  transition:background .15s;
}
.hp-search-trigger:hover{background:rgba(0,0,0,.06)}
html.dark .hp-search-trigger:hover{background:rgba(255,255,255,.08)}
.hp-search-trigger:focus-visible{outline:2px solid var(--color-primary,#007aff)}
@media(max-width:480px){.hp-search-trigger{width:34px;height:34px}}

/* ==== PWA-кнопка «Установить» — САМАЯ ПРАВАЯ ==== */
/* По умолчанию СКРЫТА. JS добавляет .visible когда beforeinstallprompt */
.hp-pwa-btn{
  display:none;
  align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;border-radius:99px;border:none;cursor:pointer;
  background:var(--color-primary,#007aff);color:#fff;
  font-size:12.5px;font-weight:700;font-family:inherit;flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,122,255,.3);
  transition:transform .15s;
}
.hp-pwa-btn.visible{display:inline-flex}
.hp-pwa-btn:hover{transform:translateY(-1px)}
.hp-pwa-btn i{font-size:16px;line-height:1}
@media(max-width:640px){
  .hp-pwa-btn{
    width:36px;height:36px;min-width:36px;max-width:36px;
    padding:0;border-radius:50%;
    font-size:0;line-height:1;
    box-shadow:0 2px 8px rgba(0,122,255,.4);
  }
  .hp-pwa-btn i{font-size:17px}
  .hp-pwa-btn span{display:none}
}
@media(max-width:380px){
  .hp-pwa-btn{width:32px;height:32px;min-width:32px;max-width:32px}
  .hp-pwa-btn i{font-size:15px}
}

/* ==== SEARCH-BAR (sticky ПОД шапкой, появляется ТОЛЬКО после клика на лупу) ==== */
.hp-search-bar{
  position:fixed;
  left:0;right:0;
  top:var(--nws-topbar-h,59px);
  z-index:29;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transform:translateY(-100%);
  opacity:0;pointer-events:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1), opacity .15s;
}
html.dark .hp-search-bar{background:rgba(13,17,23,.96);border-bottom-color:rgba(255,255,255,.07)}
.hp-search-bar.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.hp-search-input-wrap{
  flex:1;display:flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--color-surface,#fff);
  border:1px solid var(--color-primary,#007aff);
  border-radius:14px;min-width:0;
}
html.dark .hp-search-input-wrap{background:var(--color-surface,#161b22)}
.hp-search-input-wrap:focus-within{box-shadow:0 0 0 3px rgba(0,122,255,.15)}
.hp-search-input-wrap i.ph-duotone.ph-magnifying-glass{
  color:var(--color-primary,#007aff);flex-shrink:0;
}
.hp-search-input-wrap input{
  flex:1;background:transparent;border:none;outline:none;
  font-size:15px;min-width:0;color:var(--color-text,#111);
  padding:2px 0;
}
.hp-search-input-wrap input::placeholder{color:var(--dm-muted,#8b949e)}
.hp-search-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:rgba(0,0,0,.06);border:none;cursor:pointer;
  color:var(--color-text,#111);font-size:18px;flex-shrink:0;
}
html.dark .hp-search-close{background:rgba(255,255,255,.10)}
.hp-search-go{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 14px;border-radius:10px;
  background:var(--color-primary,#007aff);color:#fff;
  font-weight:700;font-size:13px;
  border:none;cursor:pointer;font-family:inherit;flex-shrink:0;gap:6px;
}
.hp-search-go-label{display:none}
@media(min-width:520px){.hp-search-go-label{display:inline}}
@media(max-width:519px){
  .hp-search-go{padding:0 12px}
  .hp-search-go-label{display:none}
}


/* ==== WEATHER TOOLTIP — единый стиль для всех страниц (19-Oct-2026) ==== */
.hp-weather{position:relative}
.hp-wtooltip{
  display:none;
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:260px;
  background:var(--color-surface,#fff);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;padding:11px 13px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  font-size:11.5px;color:var(--dm-muted,#8b949e);
  text-align:left;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
html.dark .hp-wtooltip{background:#161b22;border-color:#2a3140}
.hp-weather:hover .hp-wtooltip,
.hp-weather:focus-within .hp-wtooltip,
.hp-wtooltip.show{display:block}
.hp-wtooltip b{color:var(--color-text,#111);font-weight:700}
html.dark .hp-wtooltip b{color:#e6edf3}
.hp-wtooltip .row{display:block;padding:3px 0;font-size:11px;line-height:1.4;overflow:hidden}
.hp-wtooltip .row>span{display:block;opacity:.6;font-size:10.5px}
.hp-wtooltip .row>b{display:block;font-weight:700;font-size:12px;margin-top:1px}
.hp-wtooltip .row:after{content:"";display:block;height:2px;clear:both}
.hp-wtooltip .more{margin-top:6px;text-align:right;font-size:10px;color:var(--dm-muted,#8b949e)}


/* ═══ ВАЖНО: тултип по умолчанию СКРЫТ, topbar — sticky (19-Oct-2026) ═══ */
.hp-wtooltip { display: none !important; }
.hp-wtooltip.show { display: block !important; }
.hp-topbar { position: sticky !important; top: 0 !important; z-index: 30 !important; height: 55px !important; overflow: visible !important; }
.hp-desknav { display: flex !important; align-items: center !important; height: 32px !important; }
.hp-search-bar { position: fixed !important; top: 55px !important; left: 0; right: 0; z-index: 29 !important; height: 48px !important; }


/* ═══ /lk/ ГЕРОЙ: 9PX ВМЕСТО py-10 + mb-5 (19-Oct-2026) ═══ */
.lk-guest > .text-center, .lk-guest > .text-center.py-10 {
  padding-top: 9px !important;
  padding-bottom: 24px !important;
}
.lk-guest > .text-center > .w-24 {
  margin-bottom: 16px !important;
}
.lk-guest h1 { margin-top: 0 !important; }

/* ═══ /mood/ ГЕРОЙ: убрать лишний padding ═══ */
.mood-wrap > *:first-child, .mood-wrap .text-h1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ═══ /afisha/ HERO: одинаковый отступ ═══ */
.af-hero-l, .af-hero-body {
  padding-top: 9px !important;
}

/* ═══ /weather/ HERO: одинаковый отступ ═══ */
.weather-wrap > h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ═══ /poisk/ HERO: одинаковый отступ ═══ */
.poisk-wrap > *:first-child {
  margin-top: 0 !important;
}

/* ═══ Общая высота topbar 55px для всех страниц ═══ */
body { padding-top: 0 !important; }


/* ═══ УБРАТЬ ОРАНЖЕВЫЙ ДЕКОР + ВЫРОВНЯТЬ ВСЕ СТРАНИЦЫ (19-Oct-2026 v3) ═══ */
/* Оранжевая пунктирная линия — ДЕКОР. Можно скрыть */
.tr-hero::before, .af-hero::before { display: none !important; }

/* /lk/ — самый глючный. Прямо правим. */
.lk-guest .text-center { padding-top: 9px !important; padding-bottom: 0 !important; }
.lk-guest .text-center > * { margin-top: 0 !important; }
.lk-guest .w-24 { margin-bottom: 16px !important; }
.lk-guest h1 { margin-bottom: 12px !important; }

/* /afisha/ — padding */
.af-hero { margin-top: 0 !important; }

/* /mood/ — убрать большие отступы */
.mood-wrap > h1, .mood-wrap > .text-h1 { margin-top: 0 !important; }

/* /weather/ — убрать */
.weather-wrap > h1 { margin-top: 0 !important; }

/* /poisk/ — убрать */
.poisk-wrap > h1 { margin-top: 0 !important; }

/* Все первые h1 в main имеют margin-top: 0 */
main > h1:first-child, main > .tr-shell > h1:first-child, main > h2:first-child {
  margin-top: 0 !important;
}


/* ═══ ХЛЕБНЫЕ КРОШКИ (19-Oct-2026) ═══ */
.dm-breadcrumbs {
  display: block;
  width: 100%;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
  color: var(--dm-muted, #6b7785);
  position: sticky;
  top: 55px;
  z-index: 28;
  padding: 8px 0;
  margin: 0;
}
.dark .dm-breadcrumbs {
  background: rgba(22,27,34,0.6);
  border-bottom-color: rgba(255,255,255,0.06);
  color: var(--dm-muted, #8b98a5);
}
.dm-bc-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.dm-bc-home, .dm-bc-item, .dm-bc-current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.3;
}
/* 20-Oct-2026: длинный leaf-заголовок (title новости) не должен расталкивать
   flex-строку хлебных крошек за пределы экрана — сжимаемся и ставим
   ellipsis вместо непереносимого nowrap span'а (источник hscroll на 390px). */
.dm-bc-current {
  min-width: 0;
  overflow: hidden;
}
.dm-bc-current > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 52vw;
  display: inline-block;
  vertical-align: bottom;
}
.dm-bc-item {
  min-width: 0;
  overflow: hidden;
}
.dm-bc-home:hover, .dm-bc-item:hover {
  background: rgba(0,0,0,0.05);
  color: var(--color-text, #111);
}
.dark .dm-bc-home:hover, .dark .dm-bc-item:hover {
  background: rgba(255,255,255,0.07);
}
.dm-bc-current {
  color: var(--color-text, #111);
  font-weight: 600;
  cursor: default;
}
.dark .dm-bc-current {
  color: var(--color-text, #e6edf3);
}
.dm-bc-sep {
  display: inline-flex;
  align-items: center;
  color: rgba(0,0,0,0.25);
  font-size: 10px;
  margin: 0 -2px;
}
.dark .dm-bc-sep { color: rgba(255,255,255,0.25); }
.dm-bc-home i, .dm-bc-item i, .dm-bc-current i {
  font-size: 13px;
  opacity: 0.7;
}
.dm-bc-current i { opacity: 1; color: var(--color-primary, #007aff); }

/* Mobile: hide home label, show only icon */
@media (max-width: 640px) {
  .dm-bc-home span { display: none; }
  .dm-bc-home { padding: 4px 6px; }
  .dm-bc-inner { padding: 0 12px; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  .dm-bc-home, .dm-bc-item, .dm-bc-current { font-size: 12px; padding: 4px 6px; }
  .dm-bc-current > span { max-width: 46vw; }
}


/* ═══ МОБИЛЬНАЯ АДАПТИВНОСТЬ (19-Oct-2026) ═══ */
@media (max-width: 1023px) {
  /* Скрыть desktop-nav на mobile */
  .hp-desknav { display: none !important; }
}
@media (max-width: 1023px) {
  .hp-topbar {
    height: 55px !important;
    padding: 0 8px !important;
  }
  .hp-brand { font-size: 16px !important; }
  .hp-brand small { display: none !important; }  /* hide "городской портал" subtitle */
  .hp-wtooltip { right: -50px !important; width: 180px !important; }
  .hp-pwa-btn span { display: none !important; }
  .hp-pwa-btn { padding: 8px !important; min-width: 36px !important; }
}
@media (max-width: 640px) {
  .hp-wtooltip { right: -80px !important; }
  .hp-search-bar { padding: 0 8px !important; }
  .hp-search-input-wrap { height: 36px !important; }
  .hp-search-go-label { display: none !important; }
  .hp-search-go { width: 36px !important; padding: 0 !important; }
}


/* ═══ СКРОЛЛ-СКРЫТИЕ КРОШЕК (19-Oct-2026) ═══ */
.dm-breadcrumbs {
  transition: transform 0.25s ease, opacity 0.2s ease;
  will-change: transform;
}
.dm-breadcrumbs.dm-bc-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}


/* ═══ ФИНАЛЬНЫЙ ФИКС TOPBAR + BREADCRUMBS (19-Oct-2026 v3) ═══ */
/* Topbar СТРОГО 55px (без padding-top), крошки точно под ним */
.hp-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  height: 55px !important;
  min-height: 55px !important;
  max-height: 55px !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.hp-search-bar {
  position: fixed !important;
  top: 55px !important;
  left: 0; right: 0;
  z-index: 29 !important;
  height: 48px !important;
  box-sizing: border-box !important;
}
/* Крошки: точно под topbar (y=55) и search-bar (y=103) */
.dm-breadcrumbs {
  position: sticky !important;
  top: 55px !important;
  z-index: 28 !important;
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  font-size: 13px !important;
  color: #6b7785 !important;
  transition: transform 0.25s ease, opacity 0.2s ease !important;
}
.dark .dm-breadcrumbs {
  background: rgba(22,27,34,0.85) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  color: #8b98a5 !important;
}
.dm-bc-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  height: 42px !important;
}
.dm-breadcrumbs.dm-bc-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ═══ FALLBACK: страницы БЕЗ slim topbar (old inline-шапка) ═══ */
/* Если на странице нет .hp-topbar — крошки НЕ sticky, а static */
body:not(:has(.hp-topbar)) .dm-breadcrumbs {
  position: relative !important;
  top: auto !important;
  z-index: 28 !important;
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ═══ MOBILE FIX (20-Oct-2026) — устранить наезд hero на крошки + h1 обрезку ═══ */
@media (max-width: 1023px) {
  /* 1. На ВСЕХ страницах с slim topbar — контент ниже крошек + зазор 16px */
  body:has(.hp-topbar) main,
  body:has(.hp-topbar) [class*="min-h-dvh"]:not(.hp-topbar):not(.dm-breadcrumbs) {
    padding-top: 16px !important;
  }
  
  /* 2. Убрать margin-top у первого child (чтобы не было лишнего зазора) */
  body:has(.hp-topbar) main > *:first-child,
  body:has(.hp-topbar) [class*="min-h-dvh"] > *:first-child {
    margin-top: 0 !important;
  }
  
  /* 3. hero-title — обрезка на правый край */
  .af-hero h1, .af-hero .af-h1, .af-hero .af-h-title,
  .tr-hero h1, .tr-hero .tr-h-title,
  .nws-hero h1, .nws-hero .nws-h-title,
  main > h1:first-child, main > h2:first-child {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
  
  /* 4. Чтобы крошки имели правильный padding и НЕ наезжали на hero */
  .dm-breadcrumbs {
    z-index: 28 !important;
  }
  
  /* 5. Cookie modal bottom safe-area */
  [id*="cookie"], [class*="cookie-banner"] {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
}

/* Универсальное (без media) — для экранов > 1024 тоже */
.af-hero h1, .af-hero .af-h1, .af-hero .af-h-title,
.tr-hero h1, .tr-hero .tr-h-title,
.nws-hero h1, .nws-hero .nws-h-title {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ═══ 20-Oct-2026 MOBILE FIX v2 — таргетированные фиксы ═══ */

/* Убрать перенос слов для больших заголовков, использовать break-all */
@media (max-width: 640px) {
  .af-hero h1, .af-hero .af-h1, .af-hero .af-h-title,
  .tr-hero h1, .tr-hero .tr-h-title,
  .nws-hero h1, .nws-hero .nws-h-title,
  .nws-content h1, .lk-content h1,
  .mood-content h1, .events-content h1,
  main > h1:first-child, main h1 {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    font-size: clamp(20px, 5vw, 28px) !important;
    line-height: 1.15 !important;
  }
  .af-hero-body, .tr-hero-body, .nws-hero-body {
    font-size: 14px !important;
    padding: 12px !important;
  }
  
  /* Список дней — горизонтальный скролл */
  .af-days, .af-cinema-days, [class*="day-list"], [class*="days-row"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    white-space: nowrap !important;
  }
  .af-days > *, .af-cinema-days > * { scroll-snap-align: start !important; }
  
  /* Унифицированные карточки: 2 в строке — БЕЗ overflow
     20-Oct-2026: main УБРАН из селектора — overflow-x:hidden на <main> по спецификации
     делает overflow-y:auto => <main> становился вложенным скролл-контейнером
     (двойной вертикальный скролл на мобиле). Защита от горизонтали есть на body
     (app.css FIX B 19-Oct: overflow-x:hidden). */
  [class*="min-h-dvh"] {
    overflow-x: hidden !important;
  }
  
  /* Cookie banner не должен перекрывать FAB / nav */
  [class*="cookie-banner"] {
    z-index: 40 !important;
  }
}

/* Десктопы: гипером нюансы для h1 */
@media (min-width: 1024px) {
  .af-hero h1, .tr-hero h1, .nws-hero h1 {
    font-size: clamp(32px, 4vw, 56px) !important;
  }
}

/* sr-only для skip-links (20-Oct-2026) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.focus\:not-sr-only:focus {
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  display: inline-block !important;
}

/* ==== Ф7: bell-счётчик непрочитанных в top-bar (SSR, 0 polling) ==== */
.hp-bell{position:relative;text-decoration:none}
.hp-bell-n{position:absolute;top:-1px;right:-1px;min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:#dc2626;color:#fff;font-size:9.5px;font-weight:800;line-height:15px;
  text-align:center;pointer-events:none;box-shadow:0 0 0 2px var(--color-surface,#fff)}
html.dark .hp-bell-n{box-shadow:0 0 0 2px #0d1117}
@media(max-width:480px){.hp-bell{width:34px;height:34px}}