/* Общая навигация сайта. ВАЖНО: панели-плашки больше нет (правило владельца):
   верхняя стеклянная «таблетка» убрана, вместо неё — минимальные текстовые пункты
   РАЗДЕЛОВ вертикальным списком по правому краю (сверху вниз), в стиле
   activetheory.net. Слева на картах живёт своя колонка (#mapCtrls), поэтому
   навигацию держим справа. Язык/тема/вход — маленькой текстовой группой сверху.
   На узких экранах — кнопка «Меню» и полноэкранный список, пункты въезжают
   сверху вниз. Функции (вход через Telegram, RU/EN, тема, админ-бейдж) сохранены:
   их id и классы (snLogin, snLang, snTheme, snModal, snAdminBadge) не менялись. */

:root {
  /* ЕДИНАЯ СИСТЕМА СТЕКЛА. Значения совпадают с world.css (канон). */
  --canvas: #F5F5F7;
  --surface: rgba(255, 253, 247, .86);
  --surface-solid: rgba(255, 253, 247, .96);
  --border: rgba(118, 86, 32, .16);
  --text: #2B2110;
  --muted: #5E5648;
  --accent: #FF6A00;
  --accent-hover: #FF8A2B;
  --focus: #FF6A00;
  --radius: 14px;
  --shadow: 0 16px 40px -22px rgba(45, 29, 12, .42), 0 3px 10px -6px rgba(45, 29, 12, .20);
  --glass: blur(30px) saturate(190%);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 52%, rgba(255, 255, 255, 0));
  --glass-border: rgba(255, 255, 255, .72);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(45, 29, 12, .05);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --motion: 180ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-font: 'Rajdhani', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --nav-ink: rgba(43, 33, 16, .82);
  --nav-ink-strong: #2B2110;
  --nav-halo: 0 1px 2px rgba(255, 255, 255, .55), 0 1px 10px rgba(255, 255, 255, .35);
}

#am-app { display: contents; }

.sn {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  font-family: var(--nav-font);
  color: var(--nav-ink);
  box-sizing: border-box;
}
.sn * { box-sizing: border-box; }
.sn a, .sn button { pointer-events: auto; }
.sn a { text-decoration: none; color: inherit; }

/* Мягкий краевой скрим под навигацией: НЕ плашка, просто градиент у кромки —
   чтобы текст читался на светлых «фото»-страницах (граф, агенты) и на тёмной
   главной. Цвет инвертируется вместе с текстом (.sn--dark). */
.sn::before { content: none; }
.sn::after { content: none; }

/* ---------- левая панель: разделы + контролы (язык/тема/профиль), жидкое стекло ---------- */
.sn-panel {
  position: fixed;
  left: clamp(14px, 2.2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  backdrop-filter: blur(28px) saturate(185%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -12px 26px -18px rgba(120, 86, 32, .22), 0 26px 60px -30px rgba(30, 20, 10, .55);
  pointer-events: none;
}
.sn--dark .sn-panel {
  background: linear-gradient(180deg, rgba(20, 17, 30, .82), rgba(12, 10, 22, .68));
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 26px 60px -30px rgba(0, 0, 0, .7);
}
.sn-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: auto;
}

/* кнопка-гамбургер: только на мобильных */
.sn-toggle {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: 600 13px/1 var(--nav-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.sn-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.sn-toggle-bars i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--motion) var(--ease), opacity var(--motion) var(--ease); }
.sn.open .sn-toggle-bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sn.open .sn-toggle-bars i:nth-child(2) { opacity: 0; }
.sn.open .sn-toggle-bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.sn-toggle:hover { color: var(--accent); }

/* ---------- контролы: язык / тема / вход (минимальный текст) ---------- */
.sn-theme,
.sn-login,
.sn-lang > .sn-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 22px -12px rgba(0, 0, 0, .55);
  font: 500 13px/1 var(--nav-font);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion) var(--ease), background var(--motion) var(--ease), border-color var(--motion) var(--ease), transform var(--motion) var(--ease);
  text-shadow: var(--nav-halo);
}
.sn-theme:hover,
.sn-login:hover,
.sn-lang > .sn-lang-btn:hover { color: var(--accent); background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); border-color: rgba(255, 255, 255, .45); }
.sn-theme:active,
.sn-login:active,
.sn-lang > .sn-lang-btn:active { transform: scale(.97); }
.sn-theme { padding: 0; min-width: 36px; }
.sn-theme svg { width: 17px; height: 17px; }

.sn-lang { position: relative; }
.sn-lang > .sn-lang-btn { gap: 5px; }
.sn-lang > .sn-lang-btn > svg { width: 14px; height: 14px; opacity: .85; }
.sn-lang > .sn-lang-btn .chev { width: 10px; height: 10px; transition: transform var(--motion); }
.sn-lang.open > .sn-lang-btn .chev { transform: rotate(180deg); }
.sn-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background-color: var(--surface-solid);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow), var(--glass-edge);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  z-index: 5;
}
.sn-lang.open .sn-lang-menu { display: flex; }
.sn-lang-menu button {
  min-height: 38px;
  padding: 0 10px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: 500 13px var(--nav-font);
  letter-spacing: .06em;
  text-align: start;
  text-transform: none;
  cursor: pointer;
}
.sn-lang-menu button:hover { background: rgba(255, 255, 255, .48); }
.sn-lang-menu button.on { color: #2B2110; background: rgba(255, 255, 255, .58); font-weight: 650; }

.sn-login { letter-spacing: .13em; }
.sn-login svg { width: 15px; height: 15px; }
.sn-login-label { text-transform: uppercase; }
.sn-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(43, 33, 16, .35);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 11px;
  font-weight: 700;
}

/* ---------- список разделов: вертикально, по левому краю ---------- */
.sn-links {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.sn-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font: 500 14px/1.1 var(--nav-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: inherit;
  opacity: .82;
  text-shadow: var(--nav-halo);
  transition: opacity var(--motion) var(--ease), letter-spacing var(--motion) var(--ease), transform var(--motion) var(--ease), color var(--motion) var(--ease);
}
.sn-links a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: .9;
  transition: width var(--motion) var(--ease), margin var(--motion) var(--ease);
}
.sn-links a:hover { opacity: 1; color: var(--accent-hover); letter-spacing: .19em; transform: translateX(3px); }
.sn-links a:hover::before { width: 12px; }
.sn-links a.on { opacity: 1; color: var(--nav-ink-strong); font-weight: 600; }
.sn-links a.on::before { width: 20px; }
.sn-links a:active { transform: translateX(1px); }
.sn-links a:focus-visible,
.sn-theme:focus-visible,
.sn-login:focus-visible,
.sn-toggle:focus-visible,
.sn-lang > .sn-lang-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.sn-links a.sn-admin { display: inline-flex; align-items: center; gap: 6px; }
.sn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  color: #FFFFFF;
  background: #C0392B;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}
.sn-badge[hidden] { display: none; }

/* ---------- тёмная главная: светлый текст без плашки ---------- */
.sn--dark {
  --nav-ink: rgba(255, 246, 236, .82);
  --nav-ink-strong: #FFF6EC;
  --nav-halo: 0 1px 12px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .5);
}
.sn--dark .sn-theme:hover,
.sn--dark .sn-login:hover,
.sn--dark .sn-lang > .sn-lang-btn:hover { background: rgba(255, 255, 255, .12); }

/* ---------- мобильный: полноэкранный список, пункты въезжают сверху вниз ---------- */
@media (max-width: 900px) {
  .sn-toggle { display: inline-flex; }
  .sn::before, .sn::after { display: none; }
  .sn-panel {
    left: 0; right: 0; top: 0;
    transform: none;
    width: 100%;
    height: 100svh;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    padding: 96px 26px 44px;
    overflow: auto;
    background: color-mix(in srgb, var(--canvas) 97%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s var(--ease), visibility .32s var(--ease);
  }
  .sn.open .sn-panel { opacity: 1; visibility: visible; }
  .sn--dark .sn-panel { background: color-mix(in srgb, #0B0503 95%, transparent); }
  .sn-links a {
    font-size: clamp(24px, 7vw, 40px);
    letter-spacing: .06em;
    padding: 8px 0;
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
  }
  .sn.open .sn-links a { opacity: .92; transform: none; }
  .sn.open .sn-links a:nth-child(1) { transition-delay: .04s; }
  .sn.open .sn-links a:nth-child(2) { transition-delay: .09s; }
  .sn.open .sn-links a:nth-child(3) { transition-delay: .14s; }
  .sn.open .sn-links a:nth-child(4) { transition-delay: .19s; }
  .sn.open .sn-links a:nth-child(5) { transition-delay: .24s; }
  .sn.open .sn-links a:nth-child(6) { transition-delay: .29s; }
  .sn.open .sn-links a:nth-child(7) { transition-delay: .34s; }
  .sn.open .sn-links a:nth-child(8) { transition-delay: .39s; }
  .sn-lang-menu { left: 0; right: auto; }
}

/* ---------- окно входа (сохранено) ---------- */
.sn-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(53, 37, 17, .24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sn-modal.open { display: flex; }
.sn-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 30px 24px 22px;
  color: var(--text);
  text-align: center;
  background-color: var(--surface-solid);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  box-shadow: var(--shadow), var(--glass-edge);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
}
.sn-x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 14px;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.sn-x:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sn-opt--tg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 12px 16px;
  color: #FFFFFF;
  background: var(--accent);
  border: 0;
  border-radius: 16px;
  font: 650 14px Inter, sans-serif;
  cursor: pointer;
  transition: background var(--motion), transform var(--motion);
}
.sn-opt--tg:hover { background: var(--accent-hover); }
.sn-opt--tg:active { transform: scale(.96); }
.sn-status { min-height: 18px; margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }

@media (max-width: 560px) {
  .sn-login-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sn *, .sn *::before, .sn *::after { transition-duration: .01ms !important; }
}