/* =============================================================================
   mp4.krypta.li // FILE INDEX  —  тема для ngx_http_fancyindex_module
   -----------------------------------------------------------------------------
   Разметка листинга жёстко зашита в модуле, стилизуемые хуки:
     #list                     — <table>
     #list thead th            — 3 заголовка (первый colspan=2)
     #list thead th a          — ссылки сортировки (?C=N|S|M & O=A|D)
     #list tbody tr            — строки
     td.link / td.size / td.date
   Всё остальное (иконки, типы файлов, крошки, фильтр) навешивает JS из footer.html.
   Файл работает и без JS — деградирует в статичную тёмную тему.
   ============================================================================= */

/* ---------------------------------------------------------------- 0. ШРИФТЫ */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;                 /* variable-файл, ось wght */
  font-display: swap;
  src: url('fonts/orbitron-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;                 /* variable-файл */
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/rajdhani-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/rajdhani-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/rajdhani-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/rajdhani-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/rajdhani-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/rajdhani-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ 1. ПЕРЕМЕННЫЕ */

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* базовая палитра из base_theme.html */
  --cyber-blue:      #00d4ff;
  --cyber-blue-dark: #00c2ea;
  --dark-bg:         #000000;
  --dark-red:        #300000;
  --card-bg:         rgba(0, 20, 30, 0.7);
  --border-color:    #00d4ff;
  --text-primary:    #00d4ff;
  --text-secondary:  #7fc7d9;
  --hover-shadow:    #00d4ff;

  /* расширение палитры */
  --blue-deep:   #00323f;
  --blue-ghost:  rgba(0, 212, 255, 0.08);
  --blue-line:   rgba(0, 212, 255, 0.22);
  --red-hot:     #ff2a4d;
  --red-glow:    rgba(255, 42, 77, 0.55);
  --amber:       #ffb454;
  --violet:      #b26bff;
  --green:       #29ff9b;
  --ink:         #04080b;

  /* геометрия: крупная — под VR-панель и контроллерный луч */
  --row-h:       46px;
  --fs-base:     17px;
  --gap:         18px;
  --panel-pad:   clamp(14px, 2.2vw, 34px);

  /* тайминги */
  --t-fast:  .16s;
  --t-med:   .32s;
  --t-slow:  .8s;

  /* позиция курсора, пишется из JS (спотлайт / тилт) */
  --mx: 50vw;
  --my: 40vh;
}

/* -------------------------------------------------------------- 2. СБРОС */

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

html {
  height: 100%;
  font-size: var(--fs-base);
  scrollbar-color: var(--cyber-blue) #050d12;
  scrollbar-width: thin;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--dark-bg);
  color: var(--text-primary);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cyber-blue); color: var(--ink); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #050d12; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyber-blue), var(--blue-deep));
  border: 2px solid #050d12;
}

a { color: var(--cyber-blue); text-decoration: none; }

/* ------------------------------------------------- 3. ФОНОВЫЕ СЛОИ (FX) */

.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 3.1 Тёмно-красное свечение в середине экрана + синий подпор снизу.
   Отдельный fixed-слой вместо background-attachment: fixed —
   в мобильном Chromium (Quest Browser) fixed-attachment тормозит. */
.fx-glow {
  background:
    radial-gradient(60vmax 60vmax at 50% 46%, var(--dark-red) 0%, rgba(48,0,0,.55) 32%, transparent 68%),
    radial-gradient(90vmax 50vmax at 50% 120%, rgba(0, 60, 80, .45) 0%, transparent 70%),
    var(--dark-bg);
  animation: glow-breathe 9s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: .82; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* 3.2 Перспективная сетка-горизонт (CSS-3D, без WebGL) */
.fx-grid {
  perspective: 340px;
  perspective-origin: 50% 0%;
  overflow: hidden;
  opacity: .45;
}

.fx-grid::before {
  content: '';
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -40%;
  height: 130%;
  background-image:
    linear-gradient(to right,  var(--blue-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blue-line) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotateX(76deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
  animation: grid-run 5.5s linear infinite;
}

@keyframes grid-run {
  from { background-position: 0 0; }
  to   { background-position: 0 64px; }
}

/* 3.3 Scanlines */
.fx-scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 212, 255, 0.035) 2px,
    rgba(0, 212, 255, 0.035) 4px
  );
  z-index: 1000;
  animation: scan-drift 8s linear infinite;
}

@keyframes scan-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}

/* 3.4 Пробегающая полоса развёртки CRT */
.fx-rollbar {
  z-index: 1001;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 212, 255, .05) 42%,
    rgba(255, 255, 255, .10) 50%,
    rgba(0, 212, 255, .05) 58%,
    transparent 100%
  );
  height: 22vh;
  inset: auto 0 auto 0;
  animation: rollbar 7s linear infinite;
  mix-blend-mode: screen;
}

@keyframes rollbar {
  from { transform: translateY(-30vh); }
  to   { transform: translateY(130vh); }
}

/* 3.5 Плёночное зерно */
.fx-grain {
  z-index: 1002;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-6%, -2%); }
  80%  { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

/* 3.6 Виньетка */
.fx-vignette {
  z-index: 1003;
  background: radial-gradient(120vmax 90vmax at 50% 45%, transparent 45%, rgba(0,0,0,.75) 100%);
}

/* 3.7 Спотлайт за курсором / лучом контроллера */
.fx-spotlight {
  z-index: 1;
  background: radial-gradient(
    26vmax 26vmax at var(--mx) var(--my),
    rgba(0, 212, 255, .10) 0%,
    rgba(0, 212, 255, .04) 38%,
    transparent 70%
  );
  transition: background-position var(--t-fast) linear;
}

/* ---------------------------------------------------- 4. BOOT-ПОСЛЕДОВАТЕЛЬНОСТЬ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: var(--dark-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .82rem;
  color: var(--green);
  gap: .35em;
  transition: opacity .45s ease, visibility .45s;
}

.boot b { color: var(--cyber-blue); font-weight: 700; }
.boot i { color: var(--red-hot); font-style: normal; }

.boot__line {
  opacity: 0;
  animation: boot-in .18s steps(2) forwards;
}

@keyframes boot-in { to { opacity: 1; } }

.boot__bar {
  margin-top: .8em;
  height: 6px;
  width: min(420px, 60vw);
  border: 1px solid var(--blue-line);
  position: relative;
  overflow: hidden;
}

.boot__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue-deep), var(--cyber-blue));
  transform-origin: left;
  animation: boot-fill .95s ease-out forwards;
}

@keyframes boot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

body.booted .boot { opacity: 0; visibility: hidden; }

/* без JS оверлей не должен закрывать страницу навсегда */
.no-js .boot { display: none; }

/* ------------------------------------------------------------------ 5. HUD */

.hud {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(0,20,30,.85), rgba(0,8,12,.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 34px rgba(0, 212, 255, .12), inset 0 -1px 0 rgba(0,212,255,.35);
  flex-shrink: 0;
  overflow: hidden;
}

.hud--bottom {
  border-bottom: 0;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
  background: linear-gradient(0deg, rgba(0,20,30,.85), rgba(0,8,12,.55));
}

.hud__bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 14px clamp(14px, 3vw, 40px);
}

/* 5.1 Логотип + глитч (чистый CSS, работает без JS) */
.hud__brand {
  position: relative;
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  letter-spacing: .16em;
  color: var(--cyber-blue);
  text-shadow:
     0 0 6px rgba(0,212,255,.9),
     0 0 22px rgba(0,212,255,.45),
     0 0 48px rgba(0,212,255,.25);
  animation: brand-flicker 6s infinite steps(1);
  white-space: nowrap;
}

.hud__brand::before,
.hud__brand::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  background: var(--dark-bg);
  overflow: hidden;
  pointer-events: none;
}

.hud__brand::before {
  color: var(--red-hot);
  text-shadow: 2px 0 var(--red-glow);
  animation: glitch-a 3.4s infinite steps(2);
}

.hud__brand::after {
  color: #35fff0;
  text-shadow: -2px 0 rgba(53,255,240,.6);
  animation: glitch-b 2.7s infinite steps(2);
}

@keyframes glitch-a {
  0%, 82%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
  84%  { clip-path: inset(10% 0 72% 0); transform: translate(-4px, -1px); }
  88%  { clip-path: inset(48% 0 30% 0); transform: translate(5px, 1px); }
  92%  { clip-path: inset(72% 0 8% 0);  transform: translate(-3px, 2px); }
  96%  { clip-path: inset(26% 0 56% 0); transform: translate(2px, -2px); }
}

@keyframes glitch-b {
  0%, 76%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  78%  { clip-path: inset(62% 0 18% 0); transform: translate(4px, 1px); }
  84%  { clip-path: inset(18% 0 66% 0); transform: translate(-5px, -2px); }
  90%  { clip-path: inset(38% 0 44% 0); transform: translate(3px, 2px); }
}

@keyframes brand-flicker {
  0%, 88%, 100% { opacity: 1; }
  89% { opacity: .35; }
  90% { opacity: 1; }
  93% { opacity: .55; }
  94% { opacity: 1; }
}

.hud__sub {
  color: var(--text-secondary);
  letter-spacing: .18em;
  font-size: .82rem;
  text-transform: uppercase;
  opacity: .8;
  white-space: nowrap;
}

.hud__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 5.2 Кнопки и поле фильтра */
.btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyber-blue);
  background: rgba(0, 20, 30, .6);
  border: 1px solid var(--blue-line);
  padding: 9px 14px;
  min-height: 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(0,212,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--t-slow) ease;
}

.btn:hover, .btn:focus-visible {
  color: var(--ink);
  background: var(--cyber-blue);
  border-color: var(--cyber-blue);
  box-shadow: 0 0 18px rgba(0,212,255,.6), 0 0 46px rgba(0,212,255,.25);
  outline: none;
}

.btn:hover::after { transform: translateX(120%); }

.filter {
  position: relative;
  display: flex;
  align-items: center;
}

.filter::before {
  content: '>';
  position: absolute;
  left: 12px;
  color: var(--cyber-blue);
  font-family: 'JetBrains Mono', monospace;
  opacity: .7;
  animation: caret 1.1s steps(2) infinite;
}

@keyframes caret { 50% { opacity: .15; } }

.filter input {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  color: var(--cyber-blue);
  background: rgba(0, 12, 18, .75);
  border: 1px solid var(--blue-line);
  padding: 9px 12px 9px 30px;
  min-height: 40px;
  width: clamp(160px, 22vw, 300px);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}

.filter input::placeholder { color: rgba(127,199,217,.45); }

.filter input:focus {
  outline: none;
  border-color: var(--cyber-blue);
  box-shadow: 0 0 16px rgba(0,212,255,.45), inset 0 0 22px rgba(0,212,255,.12);
}

.no-js .js-only { display: none !important; }

/* 5.3 Бегущая строка логов */
.ticker {
  border-top: 1px solid rgba(0,212,255,.18);
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
  white-space: nowrap;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker__track {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem;
  color: var(--text-secondary);
  opacity: .75;
  animation: ticker-run 64s linear infinite;
}

.ticker--rev .ticker__track { animation-name: ticker-run-rev; }

@keyframes ticker-run {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

@keyframes ticker-run-rev {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100vw); }
}

/* -------------------------------------------------------------- 6. КОНТЕНТ */

.idx {
  position: relative;
  z-index: 5;
  flex: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 40px) clamp(12px, 3vw, 40px) 48px;
  perspective: 1400px;                 /* база для 3D-тилта строк */
}

/* 6.1 Хлебные крошки (строит JS) */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  margin-bottom: 12px;
  min-height: 1.2em;
}

.crumbs a, .crumbs span {
  padding: 4px 8px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: all var(--t-fast);
}

.crumbs a:hover {
  color: var(--ink);
  background: var(--cyber-blue);
  border-color: var(--cyber-blue);
  box-shadow: 0 0 14px rgba(0,212,255,.55);
}

.crumbs .sep { color: rgba(0,212,255,.35); padding: 0; }
.crumbs .cur { color: var(--cyber-blue); border-color: var(--blue-line); background: var(--blue-ghost); }

/* 6.2 Панель со списком */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,26,38,.72), rgba(0,10,16,.82));
  border: 1px solid var(--blue-line);
  padding: var(--panel-pad);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 0 60px rgba(0, 212, 255, .10),
    inset 0 0 90px rgba(0, 60, 90, .28);
}

/* бегущий неоновый контур */
.panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    var(--cyber-blue) 22deg,
    transparent 60deg,
    transparent 180deg,
    var(--red-hot) 202deg,
    transparent 240deg,
    transparent 360deg
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: border-run 7s linear infinite;
  pointer-events: none;
}

@keyframes border-run { to { --angle: 360deg; } }

/* уголки HUD */
.panel__c {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cyber-blue);
  box-shadow: 0 0 12px rgba(0,212,255,.8);
  pointer-events: none;
}

.panel__c--tl { top: -3px; left:  -3px; border-right: 0; border-bottom: 0; }
.panel__c--tr { top: -3px; right: -3px; border-left:  0; border-bottom: 0; }
.panel__c--bl { bottom: -3px; left:  -3px; border-right: 0; border-top: 0; }
.panel__c--br { bottom: -3px; right: -3px; border-left:  0; border-top: 0; }

/* 6.3 Заголовок пути.
   ВАЖНО: модуль сам дописывает сюда экранированный URI и закрывающий </h1>,
   поэтому в header.html <h1> остаётся незакрытым. */
.idx__path {
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  letter-spacing: .06em;
  color: #fff;
  word-break: break-all;
  line-height: 1.35;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--blue-line);
  text-shadow: 0 0 10px rgba(0,212,255,.55), 0 0 30px rgba(0,212,255,.25);
}

.idx__kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62em;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--red-hot);
  text-shadow: 0 0 12px var(--red-glow);
  margin-right: .6em;
  vertical-align: middle;
  animation: kicker-pulse 3.6s ease-in-out infinite;
}

@keyframes kicker-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* глитч на самом пути — обёртку ставит JS */
.glx { position: relative; display: inline-block; }

.glx::before,
.glx::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.glx::before {
  color: var(--red-hot);
  clip-path: inset(100% 0 0 0);
  animation: glitch-a 5.1s infinite steps(2);
}

.glx::after {
  color: #35fff0;
  clip-path: inset(0 0 100% 0);
  animation: glitch-b 4.3s infinite steps(2);
}

/* ------------------------------------------------ 7. ТАБЛИЦА ЛИСТИНГА */

#list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
  table-layout: fixed;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .86rem;
}

/* колонки: имя (colspan=2) / размер / дата */
#list thead th:nth-child(1) { width: auto; }
#list thead th:nth-child(2) { width: 130px; }
#list thead th:nth-child(3) { width: 190px; }

#list thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  text-align: left;
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 14px;
  background: linear-gradient(180deg, #04222e, #021017);
  border-bottom: 1px solid var(--cyber-blue);
  box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 0 24px rgba(0,212,255,.10);
  white-space: nowrap;
}

#list thead th a {
  color: var(--text-secondary);
  transition: color var(--t-fast), text-shadow var(--t-fast);
}

#list thead th a:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--cyber-blue), 0 0 26px rgba(0,212,255,.6);
}

/* активная сортировка — класс вешает JS по ?C= / ?O= */
#list thead th.is-sorted a:first-child {
  color: var(--cyber-blue);
  text-shadow: 0 0 12px rgba(0,212,255,.75);
}

#list thead th.is-sorted::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--cyber-blue);
  box-shadow: 0 0 12px var(--cyber-blue), 0 0 30px rgba(0,212,255,.7);
  animation: sort-bar 2.4s ease-in-out infinite;
}

@keyframes sort-bar {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* 7.1 Строки */
#list tbody tr {
  background: rgba(0, 18, 26, .5);
  transform-style: preserve-3d;
  transition:
    background var(--t-fast),
    box-shadow var(--t-med),
    filter var(--t-fast);
  will-change: transform;
}

#list tbody tr:nth-child(even) { background: rgba(0, 10, 16, .5); }

#list tbody td {
  padding: 0 14px;
  height: var(--row-h);
  vertical-align: middle;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  position: relative;
}

#list tbody td.link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid rgba(0,212,255,.18);
}

#list tbody td.size,
#list tbody td.date {
  color: var(--text-secondary);
  font-size: .78rem;
  white-space: nowrap;
}

#list tbody td.link a {
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  transition: color var(--t-fast), text-shadow var(--t-fast), transform var(--t-fast);
}

/* появление строк каскадом (--i выставляет JS) */
.js #list tbody tr {
  opacity: 0;
  animation: row-in .42s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 26ms + 120ms);
}

@keyframes row-in {
  from { opacity: 0; transform: translateX(-18px) rotateY(-8deg); filter: brightness(2.4); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* 7.2 Ховер: подсветка, блик-развёртка, 3D-тилт */
#list tbody tr:hover,
#list tbody tr.is-cursor {
  background: linear-gradient(90deg, rgba(0,212,255,.18), rgba(0,212,255,.04) 60%, transparent);
  box-shadow:
    0 0 0 1px rgba(0,212,255,.55),
    0 0 26px rgba(0,212,255,.28),
    inset 0 0 34px rgba(0,212,255,.10);
  filter: brightness(1.35);
  z-index: 3;
}

#list tbody tr:hover td.link,
#list tbody tr.is-cursor td.link {
  border-left-color: var(--cyber-blue);
  box-shadow: -2px 0 14px rgba(0,212,255,.8);
}

#list tbody tr:hover td.link a,
#list tbody tr.is-cursor td.link a {
  color: #fff;
  text-shadow: 0 0 8px var(--cyber-blue), 0 0 24px rgba(0,212,255,.65);
}

/* блик, пробегающий по строке */
#list tbody td.date::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}

#list tbody tr:hover td.date::after { animation: sweep .55s ease-out; }

@keyframes sweep {
  from { opacity: 1; transform: translateX(-100%); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* тилт: --tx/--ty пишет JS на строке */
.fx-full #list tbody tr:hover {
  transform:
    perspective(900px)
    rotateX(calc(var(--ty, 0) * -3deg))
    rotateY(calc(var(--tx, 0) * 4deg))
    translateZ(14px);
}

/* 7.3 Иконки типов (SVG-спрайт из header.html, вставляет JS) */
.ic {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 6px currentColor);
  transition: transform var(--t-med);
}

tr:hover .ic { transform: rotate(-8deg) scale(1.18); }

/* Цветовая кодировка по типу.
   Префикс #list tbody обязателен: без него правило проигрывает
   по специфичности базовому "#list tbody td.link a". */
#list tbody tr[data-kind="dir"]     td.link a { color: var(--amber); }
#list tbody tr[data-kind="parent"]  td.link a { color: var(--text-secondary); }
#list tbody tr[data-kind="image"]   td.link a { color: var(--green); }
#list tbody tr[data-kind="video"]   td.link a { color: var(--violet); }
#list tbody tr[data-kind="audio"]   td.link a { color: #ff8bd0; }
#list tbody tr[data-kind="archive"] td.link a { color: #ffd166; }
#list tbody tr[data-kind="disk"]    td.link a { color: #ff9f6b; }
#list tbody tr[data-kind="code"]    td.link a { color: #6bffea; }
#list tbody tr[data-kind="doc"]     td.link a { color: #9fb4ff; }
#list tbody tr[data-kind="font"]    td.link a { color: #d5c2ff; }
#list tbody tr[data-kind="3d"]      td.link a { color: #7dff5e; }
#list tbody tr[data-kind="exec"]    td.link a { color: var(--red-hot); }

/* каталоги — отдельный «янтарный» ховер, чтобы отличались от файлов */
#list tbody tr[data-kind="dir"] td.link { border-left-color: rgba(255,180,84,.45); }

#list tbody tr[data-kind="dir"]:hover,
#list tbody tr[data-kind="dir"].is-cursor {
  background: linear-gradient(90deg, rgba(255,180,84,.16), rgba(255,180,84,.03) 60%, transparent);
  box-shadow:
    0 0 0 1px rgba(255,180,84,.5),
    0 0 26px rgba(255,180,84,.22),
    inset 0 0 34px rgba(255,180,84,.08);
}

#list tbody tr[data-kind="dir"]:hover td.link,
#list tbody tr[data-kind="dir"].is-cursor td.link {
  border-left-color: var(--amber);
  box-shadow: -2px 0 14px rgba(255,180,84,.85);
}

#list tbody tr[data-kind="dir"]:hover td.link a,
#list tbody tr[data-kind="dir"].is-cursor td.link a {
  color: #fff;
  text-shadow: 0 0 8px var(--amber), 0 0 24px rgba(255,180,84,.6);
}

/* ховер добивает имя до белого поверх любого типового цвета
   (правило идёт последним, поэтому выигрывает при равной специфичности) */
#list tbody tr:hover td.link a,
#list tbody tr.is-cursor td.link a { color: #fff; }

/* 7.4 Полоска размера файла */
.bar {
  display: block;
  height: 2px;
  margin-top: 3px;
  width: 100%;
  background: rgba(0,212,255,.12);
  position: relative;
  overflow: hidden;
}

.bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fill, 0) * 100%);
  background: linear-gradient(90deg, var(--blue-deep), var(--cyber-blue));
  box-shadow: 0 0 8px rgba(0,212,255,.7);
}

tr:hover .bar::after { background: linear-gradient(90deg, var(--cyber-blue), #fff); }

/* 7.5 Подсветка совпадений фильтра */
mark {
  background: rgba(0,212,255,.28);
  color: #fff;
  text-shadow: 0 0 8px var(--cyber-blue);
  padding: 0 1px;
}

tr.is-hidden { display: none; }

/* 7.6 Точечный глитч на случайной строке (навешивает JS) */
tr.is-glitching td {
  animation: cell-glitch .3s steps(2) 2;
}

@keyframes cell-glitch {
  0%   { transform: translateX(0);    filter: none; }
  25%  { transform: translateX(-6px); filter: hue-rotate(90deg) brightness(1.8); }
  50%  { transform: translateX(5px);  filter: invert(1); }
  75%  { transform: translateX(-3px); filter: hue-rotate(-60deg) saturate(3); }
  100% { transform: translateX(0);    filter: none; }
}

/* --------------------------------------------------------- 8. СТАТИСТИКА */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(0,212,255,.16);
  background: rgba(0, 12, 18, .55);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.stats b {
  color: var(--cyber-blue);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0,212,255,.6);
}

.stats .dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: kicker-pulse 1.8s ease-in-out infinite;
}

/* подсказка по хоткеям */
.keys { margin-left: auto; opacity: .6; }
.keys kbd {
  font-family: inherit;
  border: 1px solid var(--blue-line);
  padding: 1px 6px;
  margin: 0 2px;
  color: var(--cyber-blue);
}

/* ---------------------------------------------------------- 9. FX-РЕЖИМЫ */

/* LITE: без blur/backdrop-filter и тяжёлых постоянных анимаций.
   Именно они дороже всего во встроенном браузере шлема. */
.fx-lite .fx-grain,
.fx-lite .fx-rollbar,
.fx-lite .fx-grid,
.fx-lite .fx-spotlight { display: none; }

.fx-lite .hud,
.fx-lite .panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0, 12, 18, .92);
}

.fx-lite .fx-glow { animation: none; }
.fx-lite .panel::before { display: none; }
.fx-lite .hud__brand::before,
.fx-lite .hud__brand::after,
.fx-lite .glx::before,
.fx-lite .glx::after { display: none; }
.fx-lite .hud__brand { animation: none; }
.fx-lite #list tbody tr:hover { transform: none; filter: brightness(1.2); }
.fx-lite .ticker__track { animation-duration: 120s; }

/* OFF: только тема, никакого движения */
.fx-off .fx-layer:not(.fx-glow) { display: none; }
.fx-off .fx-glow { animation: none; }
.fx-off *, .fx-off *::before, .fx-off *::after {
  animation: none !important;
  transition: none !important;
}
.fx-off .hud, .fx-off .panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0, 12, 18, .94);
}
.fx-off #list tbody tr { opacity: 1; }
.fx-off .panel::before { display: none; }

/* ------------------------------------------------------- 10. АДАПТИВНОСТЬ */

/* VR-панель и большие экраны: крупнее строки, читаемость важнее плотности */
@media (min-width: 1600px) {
  :root { --fs-base: 19px; --row-h: 52px; }
}

@media (max-width: 900px) {
  :root { --fs-base: 16px; }
  #list thead th:nth-child(3),
  #list tbody td.date { display: none; }
  #list thead th:nth-child(2) { width: 110px; }
  .hud__sub { display: none; }
  .hud__tools { margin-left: 0; width: 100%; }
  .filter input { width: 100%; }
}

@media (max-width: 560px) {
  .keys { display: none; }
  .idx__kicker { display: block; margin-bottom: 4px; }
}

/* Уважаем системную настройку: она — явный запрос пользователя.
   Переключателем FX в HUD её можно перебить вручную. */
@media (prefers-reduced-motion: reduce) {
  .fx-grain, .fx-rollbar, .fx-spotlight { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}