/* ── L2KM Shell — общая оболочка для всех страниц ── */
/* Подключается на всех standalone-страницах ПОСЛЕ их собственных стилей, */
/* чтобы гарантировать идентичную шапку, меню и фон. */

:root {
  --bg: #06061a;
  --panel: rgba(255,255,255,.035);
  --panel-2: rgba(255,255,255,.05);
  --elev: #0c0c26;
  --border: rgba(255,255,255,.1);
  --border-soft: rgba(255,255,255,.07);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --faint: #64748b;
  --violet: #a78bfa;
  --violet-deep: #7c3aed;
  --cyan: #06b6d4;
}

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

html, body {
  min-height: 100%;
  background: var(--bg); color: var(--text);
  font-family: 'Inter','Segoe UI', system-ui, Arial, sans-serif;
  font-size: 1rem;
}
body { overflow-x: hidden; }

/* ── Фон ── */
.bg-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 40%, rgba(124,58,237,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(6,182,212,.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 55% 85%, rgba(139,92,246,.10) 0%, transparent 55%),
    var(--bg);
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .03;
  background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Шапка сайта ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 clamp(12px,2vw,24px);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(6,6,26,.75);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.5px; text-decoration: none;
  background: linear-gradient(135deg, #a78bfa, #06b6d4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; white-space: nowrap;
}
.site-header .logo svg { flex-shrink: 0; }
.header-title {
  color: var(--muted); font-weight: 700; font-size: .95rem; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.header-title b { color: var(--violet); }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 10px; text-decoration: none;
  font-size: .85rem; font-weight: 700; cursor: pointer;
  color: var(--violet); background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.35); transition: background .18s, color .18s;
}
.back-link:hover { background: rgba(124,58,237,.28); color: #fff; }

/* ── Меню инструментов (второй уровень) ── */
.page-nav {
  position: sticky; top: 60px; z-index: 49;
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(6,6,26,.75);
  border-bottom: 1px solid var(--border-soft);
}
.page-nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 7px clamp(12px,2vw,24px);
  overflow-x: auto; scrollbar-width: none;
}
.page-nav-inner::-webkit-scrollbar { display: none; }
/* центрируем содержимое; auto-отступы у краёв схлопываются при переполнении */
.page-nav-inner > :first-child { margin-left: auto; }
.page-nav-inner > :last-child { margin-right: auto; }
.page-nav-label {
  color: var(--faint); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; margin-right: 4px;
}
.page-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 10px; white-space: nowrap;
  font-size: .8rem; font-weight: 700; text-decoration: none;
  color: #c4b5fd; background: rgba(124,58,237,.12);
  border: 1px solid rgba(167,139,250,.3);
  transition: background .18s, color .18s;
}
.page-nav a:hover { background: rgba(124,58,237,.28); color: #fff; }
.page-nav a.active {
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.2));
  color: #fff; border-color: rgba(167,139,250,.55);
}

/* ── Переключатель языка ── */
.lang-switch { display:inline-flex; gap:2px; padding:2px; background:rgba(148,163,184,.1);
  border:1px solid rgba(148,163,184,.2); border-radius:9px; }
.lang-switch .lang-opt { background:transparent; border:0; color:#94a3b8; font-size:.74rem;
  font-weight:700; letter-spacing:.3px; padding:5px 8px; border-radius:7px; cursor:pointer; transition:all .15s; }
.lang-switch .lang-opt:hover { color:#e2e8f0; }
.lang-switch .lang-opt.active { background:rgba(124,58,237,.9); color:#fff; }

/* ── Адаптив ── */
@media (max-width: 560px) { .header-title { display: none; } }
@media (max-width: 600px) { .lang-switch .lang-opt { padding:5px 6px; font-size:.7rem; } }

/* ── Узкие экраны: шапка не должна распирать страницу ──
   На 360px логотип + переключатель языка + «Назад к трекеру» не помещались,
   и весь документ уезжал вбок на ~22px: страницу можно было таскать влево-вправо.
   Ужимаем содержимое, а не полагаемся на overflow-x: hidden — обрезка спрятала бы
   симптом, оставив кнопку недосягаемой. */
@media (max-width: 440px) {
  .site-header { gap: 8px; padding: 0 10px; }
  .site-header .logo { font-size: 1rem; gap: 6px; min-width: 0; }
  .back-link { padding: 8px 11px; font-size: .8rem; }
}
/* Обрезанное многоточием «L2 КМ Трек…» выглядит поломкой — вместо этого
   оставляем только значок: он и так ведёт на главную, а в меню ниже есть «🏠 Главная» */
@media (max-width: 410px) {
  .site-header .logo span { display: none; }
}
/* Совсем узкие: язык прячем — он есть в самом низу страниц, а кнопка возврата важнее */
@media (max-width: 380px) {
  .lang-switch { display: none; }
}