html,
body {
  margin: 0;
  height: 100%;
  overflow-y: hidden !important;
  background: #000000;
  color: #fff;
  font-family: Arial, sans-serif;
}

.page {
  display: grid;
  grid-template-rows: 116px minmax(0, 1fr);
  grid-template-columns:
    minmax(260px, 300px)
    minmax(380px, 450px)
    minmax(0, 1fr)
    minmax(260px, 300px);
  height: calc(100dvh - 13px);
  min-height: 0;
  overflow: hidden;
  transform: translateX(-252px) translateY(-2px);
}

.page > * {
  min-width: 0;
}

.left {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.right {
  grid-column: 4;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.header {
  grid-column: 2 / 4;
  grid-row: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  padding-bottom: 12px;
  outline: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  min-width: 0;
}

.content {
  --content-track-width: calc(100% - 245px);
  --content-grid-width: var(--content-track-width);
  grid-column: 3;
  grid-row: 2;
  margin-top: 14px;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 4px;
  min-height: 0;
  min-width: 0;
}

.content > :last-child {
  min-height: 0;
  min-width: 0;
  height: 100%;
}

.content-area {
  width: var(--content-track-width);
  max-width: var(--content-track-width);
  min-height: 0;
  min-width: 0;
  justify-self: start;
}

.toolbar {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px 90px 150px;
  gap: 4px;
  min-width: 0;
}

.line-box {
  box-sizing: border-box;
  min-width: 0;
}

.left-text {
  display: flex;
  align-items: center;
  padding-left: 8px;
  min-width: 0;
}

.center-text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

@media (max-width: 1200px) {
  .page {
    grid-template-columns:
      minmax(240px, 300px)
      minmax(340px, 450px)
      minmax(0, 1fr);
  }

  .right {
    display: none;
  }

  .header {
    grid-column: 2 / 4;
  }
}

@media (max-width: 1000px) {
  .page {
    grid-template-columns:
      minmax(210px, 280px)
      minmax(280px, 400px)
      minmax(0, 1fr);
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr) 80px 80px 80px 80px 120px;
  }

  .content {
    --content-track-width: calc(100% - 245px);
  }
}

@media (max-width: 800px) {
  .page {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    grid-template-rows: 98px minmax(0, 1fr);
  }

  .left {
    display: none;
  }

  .header {
    grid-column: 1 / 3;
  }

  .content {
    grid-template-rows: 36px 28px 28px 56px minmax(0, 1fr);
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr) 72px 72px 72px 72px 96px;
  }
}

@media (max-width: 999px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 116px auto minmax(0, 1fr);
  }

  .left,
  .right {
    display: none;
  }

  .header {
    grid-column: 1;
    grid-row: 1;
  }

  .menu {
    grid-column: 1;
    grid-row: 2;
  }

  .content {
    --content-track-width: 100%;
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }
}

@media (min-width: 1000px) and (max-width: 1400px) {
  .page {
    grid-template-columns:
      minmax(220px, 260px)
      minmax(240px, 300px)
      minmax(0, 1fr);
  }

  .right {
    display: none;
  }

  .header {
    grid-column: 2 / 4;
  }

  .content {
    --content-track-width: calc(100% - 245px);
    width: 100%;
    min-width: 0;
  }
}

.search-highlight {
  color: #ffc400;
  font-weight: 600;
}

/* =========================
   SITE TOP HEADER
   декоративный верхний хедер без влияния на логику
   ========================= */

.site-top-header {
  width: 100%;
  min-height: 110px;
  margin: 0 0 10px 0;
  padding: 22px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  background:
  radial-gradient(
    ellipse at center top,
    rgba(120, 150, 190, 0.18) 0%,
    rgba(70, 90, 120, 0.10) 34%,
    transparent 68%
  ),
  linear-gradient(
    180deg,
    rgba(50, 60, 72, 0.98) 0%,
    rgba(24, 30, 38, 0.98) 38%,
    rgba(9, 12, 18, 0.99) 70%,
    rgba(0, 0, 0, 0.99) 100%
  ) !important;

box-shadow:
  0 14px 34px rgba(0, 0, 0, 0.52),
  0 5px 12px rgba(0, 0, 0, 0.44),
  inset 0 1px 0 rgba(255, 255, 255, 0.12),
  
  inset 0 -18px 28px rgba(0, 0, 0, 0.50) !important;

  box-sizing: border-box;
}

.site-top-header + .page {
  margin-top: -105px !important;
  padding-top: 0 !important;
}

.site-top-header__brand {
  position: relative;

  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.site-top-header__logo {
  position: relative;
  display: inline-block;
  isolation: isolate;

  pointer-events: none;
  user-select: none;

  font-family: "Orbitron", "Bank Gothic", "Eurostile Extended", "Microgramma", "Segoe UI", Arial, sans-serif;
  font-size: 55px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1;

  transform: scaleX(1.45) scaleY(0.75);
  transform-origin: left center;

  color: transparent;
  -webkit-text-fill-color: transparent;

  white-space: nowrap;

  text-shadow: none;
  filter: none;
  opacity: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Надпись "Медиаархив" рядом с C.S.I. в том же металлическом стиле */


.site-top-header__logo-caption {
  position: absolute;

  left: 250px;
  top: 61%;

  transform: translateY(-50%) scaleX(1.18) scaleY(0.82);
  transform-origin: left center;

  pointer-events: none;
  user-select: none;

  font-family: "Orbitron", "Bank Gothic", "Eurostile Extended", "Microgramma", "Segoe UI", Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;

  color: transparent;
  -webkit-text-fill-color: transparent;

  white-space: nowrap;

  text-shadow: none;
  filter: none;
  opacity: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ЗАДНИЙ СЛОЙ: объём / толщина букв */
.site-top-header__logo-caption::before {
  content: "media archive";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;

  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  color: rgba(10, 13, 17, 0.96);
  -webkit-text-fill-color: rgba(10, 13, 17, 0.96);

  text-shadow:
    1px 1px 0 rgba(90, 100, 112, 0.34),
    2px 2px 0 rgba(4, 6, 9, 0.98),
    3px 3px 0 rgba(3, 5, 8, 0.92),
    4px 4px 0 rgba(2, 3, 5, 0.78),
    6px 7px 5px rgba(0, 0, 0, 0.82);

  pointer-events: none;
}

/* ПЕРЕДНИЙ СЛОЙ: металлическая лицевая часть букв */
.site-top-header__logo-caption::after {
  content: "media archive";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;

  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  color: transparent;

  background: linear-gradient(
    180deg,
    rgba(245, 248, 252, 0.96) 0%,
    rgba(198, 206, 216, 0.94) 18%,
    rgba(126, 137, 150, 0.96) 34%,
    rgba(58, 66, 76, 0.98) 52%,
    rgba(25, 29, 35, 1) 72%,
    rgba(82, 92, 104, 0.92) 88%,
    rgba(18, 21, 26, 1) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.18);

  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.34),
    0 1px 0 rgba(0, 0, 0, 0.88),
    0 2px 1px rgba(0, 0, 0, 0.60);

  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.58));

  pointer-events: none;
}

/* ЗАДНИЙ СЛОЙ: объём / толщина букв */
.site-top-header__logo::before {
  content: "C.S.I.";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;

  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  color: rgba(10, 13, 17, 0.96);
  -webkit-text-fill-color: rgba(10, 13, 17, 0.96);

  text-shadow:
    1px 1px 0 rgba(90, 100, 112, 0.34),
    2px 2px 0 rgba(4, 6, 9, 0.98),
    3px 3px 0 rgba(3, 5, 8, 0.92),
    4px 4px 0 rgba(2, 3, 5, 0.78),
        6px 7px 5px rgba(0, 0, 0, 0.82);

  pointer-events: none;
}

/* ПЕРЕДНИЙ СЛОЙ: металлическая лицевая часть букв */
.site-top-header__logo::after {
  content: "C.S.I.";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;

  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  color: transparent;

  background: linear-gradient(
    180deg,
    rgba(245, 248, 252, 0.96) 0%,
    rgba(198, 206, 216, 0.94) 18%,
    rgba(126, 137, 150, 0.96) 34%,
    rgba(58, 66, 76, 0.98) 52%,
    rgba(25, 29, 35, 1) 72%,
    rgba(82, 92, 104, 0.92) 88%,
    rgba(18, 21, 26, 1) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-text-stroke: 0.9px rgba(255, 255, 255, 0.22);

  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.34),
    0 1px 0 rgba(0, 0, 0, 0.88),
    0 2px 1px rgba(0, 0, 0, 0.60);

  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.58));

  pointer-events: none;
}

.site-top-header__meta {
  display: none;
}

.site-top-header__status {
  opacity: 0.82;
}

.site-top-header__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;

  background: rgba(112, 166, 126, 0.88);
  box-shadow:
    0 0 0 1px rgba(112, 166, 126, 0.16),
    0 0 10px rgba(112, 166, 126, 0.34);
}

@media (max-width: 900px) {
  .site-top-header {
    width: calc(100% - 32px);
    min-height: 58px;
    margin: 14px 16px 10px 16px;
    padding: 12px 16px;
    border-radius: 20px;
  }

  .site-top-header__meta {
    display: none;
  }
}
  
/* =========================
   LEFT MENU TEXT GLOW STRONGER
   более светящиеся и живые названия разделов
   без фоновой панели и без дымки
   ========================= */

.menu .menu-btn {
  color: rgba(205, 220, 240, 0.78);
  font-weight: 600;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.90),
    0 0 9px rgba(130, 165, 210, 0.13),
    0 0 20px rgba(110, 145, 190, 0.075);

  transition:
    color 0.18s ease,
    text-shadow 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* Наведение: заметное, но без кислотного неона */
.menu .menu-btn:hover {
  color: rgba(232, 244, 255, 0.9);

  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.92),
    0 0 12px rgba(155, 190, 235, 0.26),
    0 0 28px rgba(130, 165, 215, 0.16),
    0 0 44px rgba(100, 135, 185, 0.08);

  transform: translateX(1px);
}

/* Активный раздел: самый выразительный */
.menu .menu-btn.active {
  color: rgba(242, 255, 242, 0.98);
  font-weight: 700;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.94),
    0 0 14px rgba(170, 205, 245, 0.32),
    0 0 32px rgba(145, 180, 230, 0.20),
    0 0 52px rgba(110, 150, 205, 0.10);
}