/* ── T-FIN-SMOOTH-2: фон страницы до загрузки inline-стилей ──
   Чтобы избежать flash of white между рендером каркаса и применением
   per-page <style>. Значение совпадает с переменной --bg на светлой теме.
   Тёмная тема переопределит через :root[data-theme="dark"]. */
html, body {
  background: #F2F5F3;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-theme="dark"] html,
:root[data-theme="dark"] body,
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0F1A14;
}

/*
 * ══════════════════════════════════════════════════════════════
 *  LASTOP GROUP — Shell Layout (unified)
 *  Файл: web/assets/shell-layout.css
 *
 *  Единый каркас: левый сайдбар (nav) 240px, топбар 56px,
 *  правый сайдбар (right) 300px. Эталон — home-auth.html.
 *
 *  Применяется через класс .lt-shell на <html>. Повышенная
 *  специфичность (html.lt-shell .shell) гарантированно
 *  перекрывает любые .shell{} из inline <style> без !important.
 *
 *  Для двухколоночного каркаса (без правой панели, как chat.html)
 *  используется класс .lt-shell-2col.
 * ══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   ТРЁХКОЛОНОЧНЫЙ КАРКАС (по умолчанию, как на home-auth)
   ───────────────────────────────────────────────────────────── */
html.lt-shell .shell{
  display:grid;
  grid-template-columns:240px 1fr 300px;
  grid-template-rows:56px 1fr;
  grid-template-areas:
    "logo topbar topbar"
    "nav  main   right";
  height:100vh;
  height:100dvh;
  gap:10px;
  padding:10px;
}

/* iOS legacy: 100dvh не поддерживается, используем fill-available */
@supports (-webkit-touch-callout: none) and (not (height: 100dvh)){
  html.lt-shell{height:-webkit-fill-available}
  html.lt-shell body{min-height:-webkit-fill-available}
  html.lt-shell .shell{height:-webkit-fill-available}
}

/* Большие экраны 1201–1400 — без промежуточного сжатия.
   Исключаем ошибочные «1400px» брейкпоинты из некоторых страниц. */

/* Средние экраны: компактнее */
@media (max-width:1200px){
  html.lt-shell .shell{
    grid-template-columns:220px 1fr 260px;
  }
}

/* Узкие: прячем правую панель */
@media (max-width:1000px){
  html.lt-shell .shell{
    grid-template-columns:220px 1fr;
    grid-template-areas:
      "logo topbar"
      "nav  main";
  }
  html.lt-shell .right{display:none}
  html.lt-shell .search-wrap{max-width:100%}
}

/* Мобильный альбомный: иконочный nav */
@media (max-width:740px){
  html.lt-shell .shell{
    grid-template-columns:52px 1fr;
  }
  html.lt-shell .nav-item span,
  html.lt-shell .nav-group,
  html.lt-shell .logo-text{display:none}
  html.lt-shell .nav-item{justify-content:center;padding:10px}
}

/* 4K / large desktop — zoom для читаемости */
@media (min-width:1921px) and (min-height:1081px){
  html.lt-shell{zoom:1.18}
  html.lt-shell .shell{
    grid-template-columns:250px 1fr 340px;
    gap:12px;
    padding:12px;
    height:calc(100vh / 1.18);
  }
  html.lt-shell .nav{padding:14px 12px 12px}
}

/* ─────────────────────────────────────────────────────────────
   ДВУХКОЛОНОЧНЫЙ КАРКАС (chat.html)
   Никакой правой панели. nav + main.
   ───────────────────────────────────────────────────────────── */
html.lt-shell-2col .shell{
  display:grid;
  grid-template-columns:240px 1fr;
  grid-template-rows:56px 1fr;
  grid-template-areas:
    "logo topbar"
    "nav  main";
  height:100vh;
  height:100dvh;
  gap:10px;
  padding:10px;
}

@supports (-webkit-touch-callout: none) and (not (height: 100dvh)){
  html.lt-shell-2col{height:-webkit-fill-available}
  html.lt-shell-2col body{min-height:-webkit-fill-available}
  html.lt-shell-2col .shell{height:-webkit-fill-available}
}

@media (max-width:1200px){
  html.lt-shell-2col .shell{grid-template-columns:220px 1fr}
}

@media (max-width:1000px){
  html.lt-shell-2col .shell{grid-template-columns:220px 1fr}
}

@media (max-width:740px){
  html.lt-shell-2col .shell{grid-template-columns:52px 1fr}
  html.lt-shell-2col .nav-item span,
  html.lt-shell-2col .nav-group,
  html.lt-shell-2col .logo-text{display:none}
  html.lt-shell-2col .nav-item{justify-content:center;padding:10px}
}

@media (min-width:1921px) and (min-height:1081px){
  html.lt-shell-2col{zoom:1.18}
  html.lt-shell-2col .shell{
    grid-template-columns:250px 1fr;
    gap:12px;
    padding:12px;
    height:calc(100vh / 1.18);
  }
  html.lt-shell-2col .nav{padding:14px 12px 12px}
}

/* ─────────────────────────────────────────────────────────────
   ОБЩИЕ ПРАВИЛА ДЛЯ ЯЧЕЕК КАРКАСА
   (не размеры, но они должны быть едиными: назначение grid-area)
   ───────────────────────────────────────────────────────────── */
html.lt-shell .logo-cell,
html.lt-shell-2col .logo-cell{grid-area:logo}

html.lt-shell .topbar,
html.lt-shell-2col .topbar{grid-area:topbar}

html.lt-shell .nav,
html.lt-shell-2col .nav{grid-area:nav}

html.lt-shell .main,
html.lt-shell-2col .main{grid-area:main}

html.lt-shell .right{grid-area:right}

/* ═══════════════════════════════════════════════════════════════
   ТОПБАР — внутренняя сетка повторяет колонки .shell
   ───────────────────────────────────────────────────────────────
   Цель: правый край поиска совпадает с правым краем main,
         левый край карточки профиля совпадает с левым краем right.

   Сейчас в каждой странице .topbar объявлен через display:flex.
   Мы перекрываем его на display:grid с теми же двумя правыми
   колонками что и в .shell: 1fr 300px (на 1200px — 260px,
   на 1920+ — 340px). Колоночный gap совпадает с .shell (10px,
   на 1920+ — 12px).

   Селектор html.lt-shell .topbar даёт специфичность (0,1,1) и
   перекрывает inline .topbar{display:flex; ...} (0,1,0) без
   !important. flex: initial на потомках сбрасывает остаточные
   inline flex-grow.

   Двухколоночный каркас (.lt-shell-2col, chat.html) сохраняет
   flex — там нет правого сайдбара, к чему выравнивать профиль.
   ═══════════════════════════════════════════════════════════════ */

/* ── Базовый трёхколоночный каркас: 1fr 300px ── */
html.lt-shell .topbar{
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 100%;
  align-items: center;
  column-gap: 10px;
}

html.lt-shell .topbar > .search-wrap{
  grid-column: 1;
  flex: initial;
  width: 100%;
  min-width: 0;
}

html.lt-shell .topbar > .profile-dd-wrap{
  grid-column: 2;
  flex: initial;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px; /* зазор между колокольчиком и карточкой профиля */
}

/* ── Карточка профиля растягивается на всю ширину обёртки ── */
html.lt-shell .topbar .topbar-profile{
  min-width: 0;
  flex: 1 1 auto;
  /* По умолчанию padding 6px 52px 6px 12px — большой правый padding для стрелки.
     В растянутой карточке стрелка прижимается к правому краю автоматически
     через margin-left:auto на .tp-arrow, поэтому правый padding можно убавить. */
  padding-right: 12px;
}

/* Внутри растянутой карточки: имя+аватар слева, стрелка справа через margin auto */
html.lt-shell .topbar .topbar-profile .tp-arrow,
html.lt-shell-2col .topbar .topbar-profile .tp-arrow{
  margin-left: auto;
}

/* ── Средние экраны: 1fr 260px (как .shell) ── */
@media (max-width: 1200px){
  html.lt-shell .topbar{
    grid-template-columns: 1fr 260px;
  }
}

/* ── Узкие экраны: правый сайдбар скрыт, топбар одноколоночный ── */
@media (max-width: 1000px){
  html.lt-shell .topbar{
    grid-template-columns: 1fr auto;
  }
  /* На мобиле обёртка профиля остаётся, но карточка профиля скрыта — виден только колокольчик */
  html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile{
    display: none;
  }
  html.lt-shell .topbar > .profile-dd-wrap{
    width: auto;
  }
}

/* ── Мобильный: профиль уже скрыт правилом 1000px, добавлять ничего не нужно ── */

/* ── 4K / large desktop: 1fr 340px (как .shell) ── */
@media (min-width: 1921px) and (min-height: 1081px){
  html.lt-shell .topbar{
    grid-template-columns: 1fr 340px;
    column-gap: 12px;
  }
}

/* ── Двухколоночный каркас (chat.html): без grid внутри топбара ──
   В chat.html нет правого сайдбара под топбаром, поэтому нет
   границы куда выравнивать профиль. Оставляем flex и просто
   прижимаем профиль к правому краю.
*/
html.lt-shell-2col .topbar{
  display: flex;
  align-items: center;
  gap: 12px;
}

html.lt-shell-2col .topbar > .search-wrap{
  flex: 1 1 auto;
  min-width: 0;
}

html.lt-shell-2col .topbar > .profile-dd-wrap{
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Средние экраны: 260px (как .shell на 1200px) */
@media (max-width: 1200px){
  html.lt-shell-2col .topbar > .profile-dd-wrap{
    flex: 0 0 260px;
    width: 260px;
  }
}

/* Узкие: профиль скрывается, остаётся колокольчик в шапке */
@media (max-width: 1000px){
  html.lt-shell-2col .topbar > .profile-dd-wrap{
    flex: 0 0 auto;
    width: auto;
  }
}

/* 4K: 340px */
@media (min-width: 1921px) and (min-height: 1081px){
  html.lt-shell-2col .topbar > .profile-dd-wrap{
    flex: 0 0 340px;
    width: 340px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ВАРИАНТ B: топбар — две самостоятельные карточки
   ───────────────────────────────────────────────────────────────
   Топбар (.topbar) теряет свою плашку и становится чисто
   grid-контейнером. Поиск (.search-wrap) и обёртка профиля
   (.profile-dd-wrap) становятся отдельными белыми карточками
   шириной по своей grid-cell — то есть ровно по сетке колонок
   .shell под ним.

   Селекторы html.lt-shell X имеют специфичность (0,1,1) и
   гарантированно перекрывают inline-стили .topbar/.search-wrap/
   .topbar-profile из <style> каждой страницы (0,1,0) без
   !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── Общая плашка топбара становится прозрачной ── */
html.lt-shell .topbar,
html.lt-shell-2col .topbar{
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 10px;
  min-height: 56px;
}

/* ── Поиск — отдельная белая карточка ── */
html.lt-shell .topbar > .search-wrap,
html.lt-shell-2col .topbar > .search-wrap{
  background: var(--w);
  border: 1px solid var(--bdr);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  padding: 0 14px 0 14px;
  min-height: 56px;
  height: 56px;
  align-items: center;
  position: relative;
  display: flex;
}

/* Иконка лупы внутри новой карточки поиска — выровнять под padding */
html.lt-shell .topbar > .search-wrap > .search-icon,
html.lt-shell-2col .topbar > .search-wrap > .search-icon{
  left: 14px;
}

/* Сам input — без собственной обводки и фона, живёт внутри карточки */
html.lt-shell .topbar > .search-wrap > input,
html.lt-shell-2col .topbar > .search-wrap > input{
  background: transparent;
  border: none;
  border-radius: 0;
  height: 36px;
  padding: 0 0 0 22px;
  width: 100%;
  outline: none;
  box-shadow: none;
}
html.lt-shell .topbar > .search-wrap > input:focus,
html.lt-shell-2col .topbar > .search-wrap > input:focus{
  border: none;
  box-shadow: none;
}

/* ── Обёртка профиля — отдельная белая карточка ── */
html.lt-shell .topbar > .profile-dd-wrap{
  background: var(--w);
  border: 1px solid var(--bdr);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  padding: 6px 6px 6px 16px;
  min-height: 56px;
  height: 56px;
  align-items: center;
  /* существующие grid-cell правила оставляем как есть */
}

/* Сама карточка профиля внутри обёртки — теряет свою плашку,
   потому что родитель теперь белая карточка целиком */
html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile{
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  width: 100%;
  cursor: pointer;
  transition: background .15s;
}
html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile:hover{
  background: var(--gp);
}
html.lt-shell .topbar > .profile-dd-wrap > .topbar-profile.open{
  background: var(--gl);
}

/* Дропдаун профиля — позиционирование от обёртки-карточки */
html.lt-shell .topbar > .profile-dd-wrap > .profile-dd{
  top: calc(100% + 8px);
  right: 0;
}

/* ── Двухколоночный каркас (chat.html): обёртка профиля — отдельная белая карточка ── */
html.lt-shell-2col .topbar > .profile-dd-wrap{
  background: var(--w);
  border: 1px solid var(--bdr);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  padding: 6px 14px;
  min-height: 56px;
  height: 56px;
  align-items: center;
}

/* Сама карточка профиля внутри обёртки — теряет свою плашку (родитель уже белая карточка) */
html.lt-shell-2col .topbar > .profile-dd-wrap > .topbar-profile{
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  width: 100%;
  cursor: pointer;
  transition: background .15s;
  flex: 1 1 auto;
  min-width: 0;
}
html.lt-shell-2col .topbar > .profile-dd-wrap > .topbar-profile:hover{
  background: var(--gp);
}
html.lt-shell-2col .topbar > .profile-dd-wrap > .topbar-profile.open{
  background: var(--gl);
}

/* Дропдаун профиля — позиционирование от обёртки-карточки */
html.lt-shell-2col .topbar > .profile-dd-wrap > .profile-dd{
  top: calc(100% + 8px);
  right: 0;
}

/* ── Двухколоночный каркас (chat.html) ── */
/* В chat.html правого сайдбара под топбаром нет, профиль скрыт.
   Поиск — единственная карточка топбара. Она занимает всю ширину
   родителя через flex. */
html.lt-shell-2col .topbar > .search-wrap{
  flex: 1 1 auto;
}

/* ═══════════════════════════════════════════════════════════════
   ГЛОБАЛЬНЫЕ НАСТРОЙКИ — применяются по data-attr на <html>
   Управляются через global-settings.js
   ═══════════════════════════════════════════════════════════════ */

/* Гостевая навигация — заблокированные пункты с замочком */
.nav-item.locked{color:#C8D8D0!important;cursor:pointer}
.nav-item.locked:hover{background:transparent;color:#5A8A6A!important}
.nav-item.locked svg:not(.nav-lock){stroke:#C8D8D0}

/* Адаптивные сайдбары — на больших экранах автоматически расширяются */
@media (min-width: 1400px){
  .shell{
    grid-template-columns: 240px 1fr 240px;
  }
}
@media (min-width: 1700px){
  .shell{
    grid-template-columns: 260px 1fr 280px;
  }
}
@media (min-width: 1400px){
  html.lt-shell .topbar,
  html.lt-shell-2col .topbar{
    grid-template-columns: 1fr 300px;
  }
}

/* Скрытие кнопки «Написать» на профилях, если получатель не разрешает писать всем.
   Кнопка скрывается только если у текущего юзера в настройках стоит "только контакты" / "никто".
   Реальная проверка получателя делается в самой странице profile_user.html (см. часть E). */
html[data-msg-perm="contacts"] [data-action="write-message"],
html[data-msg-perm="none"] [data-action="write-message"]{
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   РЕКЛАМНАЯ ПЛАШКА — единый стиль для всех страниц
   Появляется в правом сайдбаре через global-settings.js
   ═══════════════════════════════════════════════════════════════ */
.ad-block{
  background:#F8F5FF;
  border:1px solid #DDD0F0;
  border-radius:var(--rxl, 14px);
  padding:14px;
  position:relative;
  overflow:hidden;
  margin-top:10px
}
.ad-label{
  position:absolute;
  top:10px;left:10px;
  background:#EAE0FA;
  color:#8060C0;
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:6px
}
.ad-content{
  margin-top:20px;
  text-align:center
}
.ad-title{
  font-size:13px;
  font-weight:700;
  color:#5040A0
}
.ad-sub{
  font-size:11px;
  color:#7060B0;
  margin-top:3px
}
.ad-btn{
  display:block;
  margin:10px auto 0;
  padding:7px 20px;
  border-radius:var(--rm, 10px);
  background:#7060B0;
  color:#fff;
  font-size:12px;font-weight:600;
  border:none;cursor:pointer;
  font-family:inherit;
  transition:opacity .15s
}
.ad-btn:hover{opacity:.88}

/* Тёмная тема — фиолетовый остаётся, фон чуть приглушаем */
html[data-theme="dark"] .ad-block{
  background:rgba(120,90,200,.08);
  border-color:rgba(120,90,200,.22)
}
html[data-theme="dark"] .ad-label{
  background:rgba(120,90,200,.22);
  color:#C8B0F0
}
html[data-theme="dark"] .ad-title{color:#C8B0F0}
html[data-theme="dark"] .ad-sub{color:#9080C0}

/* ═══════════════════════════════════════════════════════════════
   КОЛОКОЛЬЧИК УВЕДОМЛЕНИЙ — единый стиль на всех страницах
   ═══════════════════════════════════════════════════════════════ */
.notif-bell-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-shrink:0
}
.notif-bell{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:var(--rm, 10px);
  border:1.5px solid var(--bdr);
  background:var(--gp);
  cursor:pointer;
  transition:all .15s;
  user-select:none
}
.notif-bell:hover{border-color:var(--gb);background:var(--gl)}
.notif-bell.open{border-color:var(--gb);background:var(--gl)}
.notif-bell svg{
  width:18px;height:18px;
  fill:none;stroke:var(--t);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round
}
.notif-bell-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;
  border-radius:99px;
  background:var(--red);
  color:#fff;
  font-size:10px;font-weight:800;
  display:none;
  align-items:center;justify-content:center;
  padding:0 5px;
  border:2px solid var(--w);
  pointer-events:none;
  font-family:inherit
}
.notif-bell-badge.has-unread{display:inline-flex}

/* Dropdown */
.notif-dd{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:380px;
  max-width:calc(100vw - 32px);
  background:var(--w);
  border:1px solid var(--bdr);
  border-radius:var(--rl, 12px);
  box-shadow:0 12px 36px rgba(30,138,76,.15);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .2s,transform .2s;
  z-index:200;
  overflow:hidden
}
.notif-dd.open{opacity:1;pointer-events:all;transform:translateY(0)}
.notif-dd-head{
  padding:14px 16px;
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between
}
.notif-dd-title{
  font-size:13px;font-weight:800;color:var(--t)
}
.notif-mark-all{
  font-size:11px;font-weight:600;
  color:var(--g);
  background:none;border:none;
  cursor:pointer;
  font-family:inherit;
  padding:4px 8px;
  border-radius:6px;
  transition:background .15s
}
.notif-mark-all:hover{background:var(--gl)}
.notif-mark-all:disabled{color:var(--gmt);cursor:default}
.notif-list{
  max-height:420px;
  overflow-y:auto
}
.notif-item{
  display:flex;gap:12px;
  padding:12px 16px 12px 22px;
  border-bottom:1px solid var(--bdr);
  cursor:pointer;
  transition:background .12s;
  position:relative;
  text-decoration:none;
  color:inherit
}
.notif-item:hover{background:var(--gp)}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(30,138,76,.04)}
.notif-item.unread::before{
  content:'';
  position:absolute;left:8px;top:50%;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--g);
  transform:translateY(-50%)
}
.notif-av{
  width:36px;height:36px;
  border-radius:10px;
  flex-shrink:0;
  display:grid;place-items:center;
  font-size:13px;font-weight:800;
  color:#fff
}
.notif-av-system{
  background:var(--gl);
  color:var(--g);
  border:1px solid var(--gb)
}
.notif-body{flex:1;min-width:0}
.notif-title{
  font-size:12px;font-weight:600;
  color:var(--t);
  line-height:1.4;
  margin-bottom:2px
}
.notif-preview{
  font-size:11px;
  color:var(--gmt);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:3px
}
.notif-time{
  font-size:10px;
  color:var(--gmt);
  font-weight:500
}
.notif-empty{
  padding:36px 20px;
  text-align:center;
  font-size:12px;
  color:var(--gmt)
}
.notif-empty .nei{
  font-size:32px;
  margin-bottom:10px;
  display:block;
  opacity:.6
}
.notif-dd-foot{
  border-top:1px solid var(--bdr);
  padding:10px;
  text-align:center
}
.notif-dd-foot a{
  font-size:12px;font-weight:600;
  color:var(--g);
  text-decoration:none;
  padding:6px 12px;
  border-radius:var(--rm, 10px);
  display:inline-block;
  transition:background .15s
}
.notif-dd-foot a:hover{background:var(--gp)}

/* Тёмная тема */
html[data-theme="dark"] .notif-bell-badge{
  border-color:var(--w)
}
html[data-theme="dark"] .notif-item.unread{
  background:rgba(34,160,90,.08)
}

/* ═══════════════════════════════════════════════════════════════
   SHELL ELEMENTS — единые стили topbar+nav+dropdown.
   Префикс html.lt-shell для перебивания inline <style> страниц.
   Эталон — home-auth.html.
   ═══════════════════════════════════════════════════════════════ */

/* Search */
html.lt-shell .search-icon,
html.lt-shell-2col .search-icon{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;display:grid;place-items:center;
  pointer-events:none;flex-shrink:0
}
html.lt-shell .search-icon svg,
html.lt-shell-2col .search-icon svg{
  width:14px;height:14px;stroke:var(--g);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
html.lt-shell .search-wrap input,
html.lt-shell-2col .search-wrap input{
  width:100%;height:36px;padding:0 14px 0 30px;
  border:1.5px solid var(--bdr);border-radius:99px;background:#fff;
  font-family:inherit;font-size:13px;color:var(--t);outline:none;
  transition:border-color .2s
}
html.lt-shell .search-wrap input:focus,
html.lt-shell-2col .search-wrap input:focus{border-color:var(--gm)}
html.lt-shell .search-wrap input::placeholder,
html.lt-shell-2col .search-wrap input::placeholder{color:var(--gmt)}

/* Topbar profile button */
html.lt-shell .topbar-profile,
html.lt-shell-2col .topbar-profile{
  display:flex;align-items:center;gap:10px;padding:6px 12px;
  border-radius:var(--rm);border:1.5px solid var(--bdr);background:var(--gp);
  cursor:pointer;transition:all .15s;flex-shrink:0;user-select:none
}
html.lt-shell .topbar-profile:hover,
html.lt-shell-2col .topbar-profile:hover,
html.lt-shell .topbar-profile.open,
html.lt-shell-2col .topbar-profile.open{border-color:var(--gb);background:var(--gl)}
html.lt-shell .topbar-profile.open .tp-arrow,
html.lt-shell-2col .topbar-profile.open .tp-arrow{transform:rotate(180deg)}
html.lt-shell .tp-av,
html.lt-shell-2col .tp-av{
  width:30px;height:30px;border-radius:8px;background:var(--g);
  display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0
}
html.lt-shell .tp-info,
html.lt-shell-2col .tp-info{display:flex;flex-direction:column;line-height:1.25}
html.lt-shell .tp-name,
html.lt-shell-2col .tp-name{font-size:12px;font-weight:700;color:var(--t)}
html.lt-shell .tp-role,
html.lt-shell-2col .tp-role{font-size:10px;color:var(--gmt)}
html.lt-shell .tp-arrow,
html.lt-shell-2col .tp-arrow{
  width:14px;height:14px;stroke:var(--gmt);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;transition:transform .2s
}

/* Dropdown profile menu */
html.lt-shell .profile-dd-wrap,
html.lt-shell-2col .profile-dd-wrap{
  position:relative;display:flex;align-items:center;
  justify-content:flex-end;min-width:0;padding:0 16px
}
html.lt-shell .profile-dd,
html.lt-shell-2col .profile-dd{
  position:absolute;top:calc(100% + 8px);right:0;
  width:280px;background:var(--w);border:1px solid var(--bdr);
  border-radius:var(--rl);box-shadow:0 12px 36px rgba(30,138,76,.15);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .2s,transform .2s;z-index:200;overflow:hidden
}
html.lt-shell .profile-dd.open,
html.lt-shell-2col .profile-dd.open{opacity:1;pointer-events:all;transform:translateY(0)}
html.lt-shell .pdd-head,
html.lt-shell-2col .pdd-head{
  padding:14px;border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;gap:10px;background:var(--gp)
}
html.lt-shell .pdd-av,
html.lt-shell-2col .pdd-av{
  width:40px;height:40px;border-radius:10px;background:var(--g);
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0
}
html.lt-shell .pdd-info,
html.lt-shell-2col .pdd-info{min-width:0;flex:1}
html.lt-shell .pdd-name,
html.lt-shell-2col .pdd-name{
  font-size:13px;font-weight:800;color:var(--t);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html.lt-shell .pdd-role,
html.lt-shell-2col .pdd-role{
  font-size:10px;color:var(--gmt);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
html.lt-shell .pdd-view,
html.lt-shell-2col .pdd-view{
  display:block;margin:10px 14px 0;padding:6px;border-radius:var(--rm);
  background:var(--gl);border:1px solid var(--gb);color:var(--g);
  font-family:inherit;font-size:11px;font-weight:700;
  cursor:pointer;text-align:center;text-decoration:none;transition:all .15s
}
html.lt-shell .pdd-view:hover,
html.lt-shell-2col .pdd-view:hover{background:var(--g);color:#fff;border-color:var(--g)}
html.lt-shell .pdd-body,
html.lt-shell-2col .pdd-body{padding:6px}
html.lt-shell .pdd-item,
html.lt-shell-2col .pdd-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--r);cursor:pointer;text-decoration:none;
  color:var(--tm);font-size:13px;font-weight:500;
  transition:background .15s,color .15s
}
html.lt-shell .pdd-item:hover,
html.lt-shell-2col .pdd-item:hover{background:var(--gp);color:var(--g)}
html.lt-shell .pdd-item svg,
html.lt-shell-2col .pdd-item svg{
  width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round
}
html.lt-shell .pdd-item-label,
html.lt-shell-2col .pdd-item-label{flex:1}
html.lt-shell .pdd-count,
html.lt-shell-2col .pdd-count{
  font-size:10px;font-weight:700;color:var(--g);
  background:var(--gl);border:1px solid var(--gb);border-radius:99px;
  padding:1px 7px;flex-shrink:0
}
html.lt-shell .pdd-div,
html.lt-shell-2col .pdd-div{height:1px;background:var(--bdr);margin:4px 6px}
html.lt-shell .pdd-item.logout,
html.lt-shell-2col .pdd-item.logout{color:var(--red)}
html.lt-shell .pdd-item.logout:hover,
html.lt-shell-2col .pdd-item.logout:hover{background:#FFF5F5;color:var(--red)}

/* Nav body */
html.lt-shell .nav,
html.lt-shell-2col .nav{
  grid-area:nav;background:var(--w);border-radius:var(--rxl);
  border:1px solid var(--bdr);box-shadow:var(--sh);
  overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  padding:12px 10px 10px;gap:1px
}
html.lt-shell .nav::-webkit-scrollbar,
html.lt-shell-2col .nav::-webkit-scrollbar{display:none}
html.lt-shell .nav-group,
html.lt-shell-2col .nav-group{
  font-size:10px;font-weight:700;color:var(--gmt);
  letter-spacing:.1em;text-transform:uppercase;
  padding:10px 8px 5px;margin-top:2px
}
html.lt-shell .nav-group:first-child,
html.lt-shell-2col .nav-group:first-child{padding-top:2px;margin-top:0}
html.lt-shell .nav-div,
html.lt-shell-2col .nav-div{height:1px;background:var(--bdr);margin:6px 4px}
html.lt-shell .nav-item,
html.lt-shell-2col .nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--r);cursor:pointer;text-decoration:none;
  color:var(--tm);font-size:13px;font-weight:500;
  transition:background .15s,color .15s;white-space:nowrap
}
html.lt-shell .nav-item:hover,
html.lt-shell-2col .nav-item:hover{background:var(--gp);color:var(--g)}
html.lt-shell .nav-item.active,
html.lt-shell-2col .nav-item.active{background:var(--gl);color:var(--g);font-weight:700}
html.lt-shell .nav-item svg,
html.lt-shell-2col .nav-item svg{
  width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round
}
html.lt-shell .nav-bottom,
html.lt-shell-2col .nav-bottom{margin-top:auto;padding-top:8px;border-top:1px solid var(--bdr)}

/* Адаптив (повторяем существующие правила сжатия nav-item на узких экранах) */
@media (max-width:740px){
  html.lt-shell .nav-group,
  html.lt-shell-2col .nav-group{display:none}
}

/* Тёмная тема — не нужны явные правила, переменные --w/--gp/--bdr уже инвертируются */


/* ─────────────────────────────────────────────────────────────
   ГЛОБАЛЬНЫЙ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛБАР
   Помеченные [data-hw="1"] контейнеры (выставляется JS-хелпером
   из shell-injector.js) получают тонкий зелёный скроллбар
   и поддержку колеса мыши для горизонтального скролла.
   ───────────────────────────────────────────────────────────── */
[data-hw="1"]{
  scrollbar-width:thin !important;
  scrollbar-color:var(--gb,#C0DECA) transparent !important;
}
[data-hw="1"]::-webkit-scrollbar{
  height:6px !important;
  width:6px;
}
[data-hw="1"]::-webkit-scrollbar-track{
  background:transparent !important;
}
[data-hw="1"]::-webkit-scrollbar-thumb{
  background:var(--gb,#C0DECA) !important;
  border-radius:99px !important;
}
[data-hw="1"]::-webkit-scrollbar-thumb:hover{
  background:var(--gm,#22A05A) !important;
}


/* ── T14-C1: резервируем высоту для контейнеров фильтров,
   чтобы они не подпрыгивали при загрузке данных ── */
.filter-tabs,
.filter-row,
.filters-row,
.ftab-row{
  min-height: 32px
}
.ftab{
  min-height: 28px
}

/* ── T-FIN-SMOOTH-2: фон под не-загруженными картинками ──
   Если у <img> прописана высота (через style/CSS), но src ещё не пришёл,
   браузер покажет «дырку». Серый фон делает плейсхолдер незаметным. */
img[loading="lazy"]:not([src]),
img:not([src]) {
  background: var(--gp);
}
