/* Иконка для .exe */
a[href$=".exe"]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('icon/exe.png') no-repeat center; /* Путь к картинке в папке icon */
    background-size: contain;
    margin-right: 8px;
    vertical-align: middle;
}



/* Дизайн: Светлый Графит (High-Tech Console) */
:root {
    --bg-main: #32353b;         /* Глубокий серый фон */
    --bg-panel: #2a2d32;        /* Фон панелей (темнее) */
    --accent-orange: #ff7b00;   /* Основной оранжевый неон */
    --accent-dim: rgba(255, 123, 0, 0.15); /* Тусклое свечение */
    --text-bright: #f0f0f0;     /* Яркий текст */
    --text-dim: #9da1ab;        /* Серый текст */
    --border-line: #454952;     /* Цвет разделителей */
}

body {
    background-color: var(--bg-main) !important;
    color: var(--text-bright) !important;
    font-family: 'Segoe UI', 'Orbitron', sans-serif !important;
    margin: 0;
    padding: 20px !important;
}

/* Верхняя панель (Header) */
.head {
    background: var(--bg-panel) !important;
    border-bottom: 2px solid var(--accent-orange) !important;
    padding: 15px 25px !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

/* Навигация (Домик и путь) */
.breadcrumb {
    color: var(--text-bright) !important;
    font-weight: 500 !important;
}

.breadcrumb a:hover {
    color: var(--accent-orange) !important;
}

/* Основная таблица файлов */
.paths-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--bg-panel) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Заголовки таблицы */
.paths-table thead th {
    background: #25282c !important;
    color: var(--accent-orange) !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 12px !important;
    border-bottom: 1px solid var(--border-line) !important;
}

/* Строки таблицы */
.paths-table tr {
    border-bottom: 1px solid var(--border-line) !important;
    transition: background 0.3s !important;
}

.paths-table tr:hover {
    background-color: var(--accent-dim) !important;
}

.paths-table td {
    padding: 12px 15px !important;
}

/* Названия файлов (ссылки) */
.paths-table a {
    color: var(--text-bright) !important;
    text-decoration: none !important;
    transition: 0.2s;
}

.paths-table tr:hover a {
    color: var(--accent-orange) !important;
    padding-left: 5px; /* Небольшой сдвиг текста при наведении */
}

/* Иконки */
svg {
    fill: var(--text-dim) !important;
    transition: 0.3s;
}

tr:hover svg {
    fill: var(--accent-orange) !important;
    filter: drop-shadow(0 0 5px var(--accent-orange));
}

/* Кнопки управления (Инструменты) */
.toolbox .control {
    border: 1px solid var(--border-line) !important;
    background: transparent !important;
    border-radius: 4px !important;
    padding: 8px !important;
    margin-left: 10px !important;
}

.toolbox .control:hover {
    border-color: var(--accent-orange) !important;
    box-shadow: 0 0 10px var(--accent-dim) !important;
}

/* Кастомизация полосы прокрутки */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border-line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }

/* Увеличиваем иконки в таблице файлов */
.paths-table svg {
    width: 24px !important;  /* Желаемый размер (по умолчанию обычно 16px) */
    height: 24px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* Если нужно увеличить иконки и в кнопках управления (toolbox) */
.toolbox svg {
    width: 20px !important;
    height: 20px !important;
}

/* Центрируем содержимое ячейки для красоты при больших иконках */
.paths-table td {
    line-height: 24px !important; 
    vertical-align: middle !important;
}
/* ----------------------------------------------------------------------------------------------------------------------------------*/

:root {
    --blurple: #5865f2;
    --bg-darker: #1e1f22;
    --bg-lighter: #2b2d31;
}
body { background-color: var(--bg-darker) !important; color: #dbdee1 !important; }
.head { background: var(--bg-lighter) !important; border: none !important; border-radius: 8px !important; }
.main { background: var(--bg-lighter) !important; border-radius: 8px !important; border: none !important; }
/* Акцент при наведении на всю строку */
.paths-table tr:hover {
    background: rgba(78, 80, 88, 0.3) !important;
    border-radius: 4px !important;
}
/* Яркая кнопка поиска */
#search:focus {
    border: 2px solid var(--blurple) !important;
    box-shadow: 0 0 10px var(--blurple) !important;
}
svg { fill: #b5bac1 !important; }
tr:hover svg { fill: #fff !important; }

/* Увеличиваем иконку домика и стрелки в пути */
.breadcrumb svg {
    width: 24px !important;  /* Стандартно около 16px, делаем крупнее */
    height: 24px !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
    transition: transform 0.2s ease, fill 0.2s ease !important;
}

/* Эффект при наведении на домик */
.breadcrumb a:hover svg {
    fill: var(--blurple) !important; /* Цвет Discord при наведении */
    transform: scale(1.15);         /* Легкое увеличение */
}

/* Делаем сам текст пути чуть крупнее, чтобы соответствовал иконке */
.breadcrumb {
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
}
/* Свечение для иконок папок */
a[href$="/"] svg {
    fill: #ff9800 !important;
    filter: drop-shadow(0 0 5px rgba(255, 152, 0, 0.4));
}

/* Изменение веса шрифта для папок */
a[href$="/"] {
    font-weight: 700 !important;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1e1e1e;
}
::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange); /* Ваш оранжевый цвет */
}
.paths-table tr:hover {
    outline: 1px solid rgba(255, 109, 0, 0.3) !important;
    background-color: rgba(255, 109, 0, 0.05) !important;
}
/* Общий стиль для полупрозрачных индикаторов */
.paths-table a[href*="."]::after {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    margin-left: 12px;
    border-radius: 4px;
    text-transform: uppercase;
    vertical-align: middle;
    letter-spacing: 0.8px;
    
    /* Эффект прозрачности и размытия */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

/* При наведении на строку бейдж становится ярче */
.paths-table tr:hover a::after {
    opacity: 1 !important;
    transform: scale(1.05);
}

/* 1. Видео (Оранжевый прозрачный) */
a[href$=".mkv"]::after, a[href$=".mp4"]::after, a[href$=".avi"]::after {
    content: "VIDEO";
    background: rgba(255, 109, 0, 0.15) !important;
    color: #ffb74d !important;
    border-color: rgba(255, 109, 0, 0.3) !important;
}

/* 2. Аудио (Фиолетовый прозрачный) */
a[href$=".mp3"]::after, a[href$=".wav"]::after, a[href$=".flac"]::after {
    content: "AUDIO";
    background: rgba(156, 39, 176, 0.15) !important;
    color: #ce93d8 !important;
    border-color: rgba(156, 39, 176, 0.3) !important;
}

/* 3. Архивы (Зеленый прозрачный) */
a[href$=".zip"]::after, a[href$=".rar"]::after, a[href$=".7z"]::after {
    content: "ARCHIVE";
    background: rgba(76, 175, 80, 0.15) !important;
    color: #a5d6a7 !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
}

/* 4. Изображения (Голубой прозрачный) */
a[href$=".jpg"]::after, a[href$=".png"]::after, a[href$=".webp"]::after {
    content: "IMAGE";
    background: rgba(0, 188, 212, 0.15) !important;
    color: #80deea !important;
    border-color: rgba(0, 188, 212, 0.3) !important;
}

/* 5. Документы (Серый прозрачный) */
a[href$=".pdf"]::after, a[href$=".txt"]::after, a[href$=".docx"]::after {
    content: "DOC";
    background: rgba(255, 255, 255, 0.05) !important;
    color: #9da1ab !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}



.paths-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01) !important;
}






/* ----------------------------------------------------------------------------------------------------------------------------------*/
/* Скрываем колонку даты/времени в заголовке и в строках */
.paths-table th:nth-child(3), 
.paths-table td:nth-child(3) {
    display: none !important;
}

/* Если у вас колонка времени третья (после размера), используйте nth-child(3) */

/* Полностью скрываем шапку таблицы */
.paths-table thead {
    display: none !important;
}

/* Опционально: убираем лишний отступ сверху у первой строки файлов */
.paths-table {
    border-top: none !important;
    margin-top: 0 !important;
}

/* Адаптация под смартфоны */
@media (max-width: 600px) {
    /* Делаем шапку меньше и в один ряд */
    .head {
        padding: 10px !important;
        flex-direction: row !important; 
        justify-content: space-between !important;
        margin-bottom: 10px !important;
    }

    /* Скрываем лишние колонки (Дату и Размер), оставляем только Имя */
    .cell-type, .cell-mtime, .cell-size {
        display: none !important;
    }

    /* Название файла делаем на всю ширину */
    .cell-name {
        width: 100% !important;
        font-size: 14px !important;
    }

    /* Увеличиваем область клика для пальца */
    .paths-table td {
        padding: 15px 10px !important;
    }

    /* Прячем длинные названия, чтобы не ломали экран */
    .cell-name a {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 200px !important;
    }

    /* Делаем кнопки инструментов крупнее */
    .toolbox .control {
        padding: 10px !important;
        margin-left: 5px !important;
    }

    /* Скрываем поиск, если он мешает (опционально) */
    .searchbar {
        display: none !important;
    }
}




html {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #24292e;
}

body {
  /* prevent premature breadcrumb wrapping on mobile */
  min-width: 538px;
  margin: 0;
}

.hidden {
  display: none !important;
}

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.6em 1em;
  position: sticky;
  top: 0;
  background-color: white;
}

.breadcrumb {
  font-size: 1.25em;
  padding-right: 0.6em;
  word-break: break-all;
}

.breadcrumb>a {
  color: #0366d6;
  text-decoration: none;
}

.breadcrumb>a:hover {
  text-decoration: underline;
}

/* final breadcrumb */
.breadcrumb>b {
  color: #24292e;
}

.breadcrumb>.separator {
  color: #586069;
  padding: 0 0.25em;
}

.breadcrumb svg {
  height: 100%;
  fill: rgba(3, 47, 98, 0.5);
}

.toolbox {
  display: flex;
  margin-right: 10px;
}

.toolbox>a,
.toolbox>div {
  /* vertically align with breadcrumb text */
  height: 1.1rem;
}

.toolbox .control {
  cursor: pointer;
  padding-left: 0.25em;
}

.upload-file input {
  display: none;
}

.upload-file label {
  cursor: pointer;
}

.searchbar {
  display: flex;
  flex-wrap: nowrap;
  width: 246px;
  height: 22px;
  background-color: #fafafa;
  transition: all .15s;
  border: 1px #ddd solid;
  border-radius: 15px;
  margin-bottom: 2px;
}

.searchbar #search {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 16px;
  padding: 1px;
  background-color: transparent;
  border: none;
  outline: none;
}

.searchbar .icon {
  color: #9a9a9a;
  padding: 3px 3px;
  cursor: pointer;
}

.main {
  padding: 0 1em;
}

.empty-folder {
  font-style: italic;
}

.uploaders-table th,
.paths-table th {
  text-align: left;
  font-weight: unset;
  color: #5c5c5c;
  white-space: nowrap;
}

.uploaders-table td,
.paths-table td {
  white-space: nowrap;
}

.uploaders-table .cell-status {
  width: 80px;
  padding-left: 0.6em;
}

.cell-status span {
  display: inline-block;
}

.paths-table thead a {
  color: unset;
  text-decoration: none;
}

.paths-table thead a>span {
  padding-left: 2px;
}

.paths-table tbody tr:hover {
  background-color: #fafafa;
}

.paths-table .cell-actions {
  width: 90px;
  display: flex;
  padding-left: 0.5em;
}

.paths-table .cell-mtime {
  width: 120px;
  padding-left: 0.5em;
  font-variant-numeric: tabular-nums;
}

.paths-table .cell-size {
  text-align: right;
  width: 70px;
  padding-left: 0.5em;
  font-variant-numeric: tabular-nums;
}

.path svg {
  height: 16px;
  fill: rgba(3, 47, 98, 0.5);
  padding-right: 0.5em;
  vertical-align: text-top;
}

.path {
  list-style: none;
}

.path a {
  color: #0366d6;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-decoration: none;
  max-width: calc(100vw - 375px);
  min-width: 170px;
}

.path a:hover {
  text-decoration: underline;
}

.action-btn {
  padding-right: 0.3em;
  cursor: pointer;
}

.uploaders-table {
  padding: 0.5em 0;
}

.uploader {
  padding-right: 1em;
}

.editor {
  width: 100%;
  height: calc(100vh - 5rem);
  border: 1px solid #ced4da;
  outline: none;
  padding: 5px;
}

.toolbox-right {
  margin-left: auto;
  margin-right: 2em;
}

.login-btn {
  cursor: pointer;
}

.save-btn {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.logout-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.user-name {
  padding-left: 3px;
}

.not-editable {
  font-style: italic;
}

.retry-btn {
  cursor: pointer;
}

@media (min-width: 768px) {
  .path a {
    min-width: 400px;
  }
}

/* dark theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }

  html,
  .breadcrumb>b,
  .searchbar #search {
    color: #fff;
  }

  .uploaders-table th,
  .paths-table th {
    color: #ddd;
  }

  svg,
  .path svg,
  .breadcrumb svg {
    fill: #fff;
  }

  .head {
    background-color: #111;
  }

  .searchbar {
    background-color: #111;
    border-color: #fff6;
  }

  .searchbar svg {
    fill: #fff6;
  }

  .path a {
    color: #3191ff;
  }

  .paths-table tbody tr:hover {
    background-color: #1a1a1a;
  }

  .editor {
    background: black;
    color: white;
  }
}
/* Скрываем текстовое содержимое в хлебных крошках, оставляя только иконки */
.breadcrumb {
    font-size: 0 !important; /* Делаем текст невидимым */
}

.breadcrumb a, .breadcrumb span {
    font-size: 16px !important; /* Возвращаем размер только ссылкам-папкам */
}

/* Если вы хотите полностью убрать слово SKR, но оставить домик */
.breadcrumb::before {
    display: none !important;
}



@media (max-width: 600px) {
    /* 1. ПОЛНОСТЬЮ СКРЫВАЕМ КОЛОНКУ ДЕЙСТВИЙ И ЗАГОЛОВОК */
    .cell-actions, 
    .paths-table thead th.cell-actions {
        display: none !important;
    }

    /* 2. ТЕКСТ ДЕЛАЕМ КРУПНЫМ И ЧИТАЕМЫМ */
    .cell-name {
        width: 100% !important; /* Название занимает всю ширину строки */
        padding: 18px 10px !important; /* Увеличиваем высоту строки для удобства нажатия */
    }

    .cell-name a {
        font-size: 18px !important; /* Увеличиваем шрифт названия */
        font-weight: 500 !important;
        display: block !important;
        max-width: 90vw !important; /* Почти на всю ширину экрана */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 3. УВЕЛИЧИВАЕМ ИКОНКИ ТИПА ФАЙЛА (папка/видео) СЛЕВА */
    .cell-name svg {
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px !important;
        vertical-align: middle !important;
    }

    /* 4. УБИРАЕМ ЛИШНИЕ ОТСТУПЫ ПО БОКАМ САЙТА */
    body, .main {
        padding: 5px !important;
    }

    .paths-table td {
        border-bottom: 1px solid var(--border-line) !important;
    }
}

/* Скрываем 4-ю кнопку в блоке действий */
.cell-actions > *:nth-child(4) {
    display: none !important;
}
/* Уменьшаем размер иконок действий справа */
.toolbox .control svg, 
.action-btn svg {
    width: 20px !important;  /* Желаемый размер (стандартно ~20-22px) */
    height: 20px !important;
    transition: transform 0.2s ease !important;
}

/* Уменьшаем область самой кнопки, чтобы они стояли плотнее */
.toolbox .control, 
.action-btn {
    padding: 4px !important; /* Уменьшаем внутренний отступ */
    margin-left: 5px !important; /* Расстояние между кнопками */
}

/* Эффект при наведении (пусть немного увеличиваются для удобства) */
.toolbox .control:hover svg {
    transform: scale(1.1);
}
/* 1. Отключаем прозрачность и устанавливаем базовый размер */
.toolbox .control svg, 
.action-btn svg {
    opacity: 1 !important;        /* Всегда 100% яркости */
    width: 16px !important;       /* Ваш размер */
    height: 16px !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* 2. Раскрашиваем каждую кнопку по её назначению */

/* Кнопка "Поделиться / Копировать ссылку" — Неоновый Голубой */
.toolbox .control[title*="Copy"] svg, 
.toolbox .control[title*="Share"] svg,
.toolbox .control:first-child svg {
    fill: #00a8fc !important;
    filter: drop-shadow(0 0 2px rgba(0, 168, 252, 0.4));
}

/* Кнопка "Скачать" — Сочный Зеленый */
.toolbox .control[title*="Download"] svg, 
.action-btn[title*="Download"] svg,
.toolbox .control:nth-child(2) svg {
    fill: #23a559 !important;
    filter: drop-shadow(0 0 2px rgba(35, 165, 89, 0.4));
}

/* Кнопка "Перейти / Открыть" — Яркий Оранжевый */
.toolbox .control:last-child svg, 
.action-btn:last-child svg {
    fill: #ff6d00 !important;
    filter: drop-shadow(0 0 2px rgba(255, 109, 0, 0.4));
}

/* 3. Эффект при наведении на саму иконку (усиление свечения) */
.toolbox .control:hover svg, 
.action-btn:hover svg {
    transform: scale(1.2); /* Увеличение */
    filter: drop-shadow(0 0 8px currentColor) !important; /* Неоновое сияние */
    cursor: pointer;
}

/* 1. Базовые настройки темы */
body {
    background-color: #1a1b1e !important;
    color: #c1c2c5 !important;
}

/* 2. Кнопки справа (уже работают) */
.action-btn svg, .toolbox svg {
    fill: #ff7b00 !important;
}

/* 3. УНИВЕРСАЛЬНАЯ ПОКРАСКА (Иконка + Текст) */

/* Функция для покраски иконки через маску/фон */
.cell-name svg {
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 24px !important;
    height: 24px !important;
}

/* РАСКРАСКА ФАЙЛОВ И ПАПОК (БЕСКОНЕЧНЫЙ ЦИКЛ) */

/* 1-я строка — Бирюзовый */
.paths-table tr:nth-child(8n+1) .cell-name a { color: #00e5ff !important; }

/* 2-я строка — ЗАМЕНА: Ярко-Розовый (вместо стального) */
.paths-table tr:nth-child(8n+2) .cell-name a { color: #ff4081 !important; }

/* 3-я строка — Оранжевый */
.paths-table tr:nth-child(8n+3) .cell-name a { color: #ff9800 !important; }

/* 4-я строка — Красный */
.paths-table tr:nth-child(8n+4) .cell-name a { color: #ff4444 !important; }

/* 5-я строка — Желтый */
.paths-table tr:nth-child(8n+5) .cell-name a { color: #ffeb3b !important; }

/* 6-я строка — Пурпурный */
.paths-table tr:nth-child(8n+6) .cell-name a { color: #9c27b0 !important; }

/* 7-я строка — Голубой */
.paths-table tr:nth-child(8n+7) .cell-name a { color: #00bcd4 !important; }

/* 8-я строка — Зеленый */
.paths-table tr:nth-child(8n+8) .cell-name a { color: #4caf50 !important; }

/* ------------------------------------------------------------------------------------------------------- */

/* 1. КОНТЕЙНЕР ЦИФР */
.cell-size {
    position: relative !important;
    min-width: 110px !important;
    text-align: right !important;
    padding-right: 15px !important;
    font-family: 'Consolas', monospace !important; /* Моноширинный шрифт как в консоли */
    font-weight: bold !important;
    z-index: 1;
}

/* 2. ГРАФИЧЕСКАЯ ШКАЛА (PROGRESS BAR) */
.cell-size::after {
    content: "" !important;
    position: absolute !important;
    top: 20%;
    right: 5px;
    height: 60%;
    /* Цвет берется автоматически от текста строки */
    background: linear-gradient(90deg, transparent, currentColor) !important;
    border-radius: 4px;
    opacity: 0.2;
    z-index: -1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Базовая ширина шкалы */
    width: 35px !important; 
}

/* 3. ИНТЕРАКТИВНОСТЬ: ШКАЛА "ОЖИВАЕТ" */
.paths-table tr:hover .cell-size::after {
    opacity: 0.5 !important;
    width: 80% !important; /* При наведении шкала расширяется */
    box-shadow: 0 0 10px currentColor; /* Неоновое свечение */
}

/* 4. ДОПОЛНИТЕЛЬНАЯ ВИЗУАЛИЗАЦИЯ ДЛЯ ТЯЖЕЛЫХ ФАЙЛОВ (GB) */
/* Если в строке есть GB, шкала изначально чуть длиннее */
.cell-size[title*="GB"]::after {
    width: 60px !important;
    opacity: 0.3 !important;
}
/* ЭФФЕКТ СЧИТЫВАНИЯ ДАННЫХ */
.paths-table tr:hover .cell-size::after {
    animation: pulse-glow 1.5s infinite ease-in-out;
}

@keyframes pulse-glow {
    0% { filter: brightness(1); opacity: 0.5; }
    50% { filter: brightness(1.8); opacity: 0.8; box-shadow: 0 0 15px currentColor; }
    100% { filter: brightness(1); opacity: 0.5; }
}




/* 1. ПРАВИЛЬНАЯ КРУПНАЯ СЕТКА */
body, #main, .main {
    background-color: #1a1b1e !important;
    /* Увеличиваем размер до 100px и делаем линии почти прозрачными */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
    background-size: 100px 100px !important; 
    background-attachment: fixed !important;
}

/* 3. ЭФФЕКТ "ПОДСВЕТКИ" СТРОКИ */
.paths-table tr {
    transition: all 0.2s ease !important;
}

/* Стиль самой полоски загрузки */
.custom-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff7b00, #ffaa00);
    box-shadow: 0 0 10px rgba(255, 123, 0, 0.5);
    transition: width 0.4s ease-in-out;
    z-index: 10;
}

/* Эффект «пульсации» для активной строки */
tr:has(.custom-progress-bar) {
    background-color: rgba(255, 123, 0, 0.05) !important;
}
/* Основная полоска под строкой файла */
.custom-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px; /* Сделаем чуть тоньше для элегантности */
    background: linear-gradient(90deg, #ff7b00, #ffaa00);
    box-shadow: 0 -2px 10px rgba(255, 123, 0, 0.6);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}

/* Эффект для всей строки во время загрузки */
tr:has(.custom-progress-bar) {
    background-color: rgba(255, 123, 0, 0.03) !important;
}

/* Скрываем стандартные скучные полоски, если они появятся */
progress {
    display: none !important;
}
/* ВАРИАНТ С ВНУТРЕННЕЙ ПРОКРУТКОЙ */

/* Ограничиваем высоту всего приложения по размеру экрана */
html, body, #app {
    height: 100vh !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Шапка просто стоит сверху (не фиксированная, а первая в списке) */
.topbar, header {
    flex: 0 0 auto;
}

/* А вот область с файлами заставляем крутиться отдельно */
.main, .paths-table-container {
    flex: 1 1 auto;
    overflow-y: auto !important;
    padding-bottom: 50px;
}

/* 1. ГЛАЗ ТОЛЬКО ДЛЯ ПРОСМОТРЕННЫХ ВИДЕО */
.paths-table tr .cell-name a[href$=".mp4"]:visited::before,
.paths-table tr .cell-name a[href$=".mkv"]:visited::before,
.paths-table tr .cell-name a[href$=".avi"]:visited::before {
    content: "👁️ " !important;
    color: #888888 !important; /* Серый цвет глаза */
    margin-right: 8px;
    display: inline-block;
}

/* 2. ЦВЕТ ТЕКСТА ПРОСМОТРЕННЫХ СЕРИЙ */
.paths-table tr .cell-name a[href$=".mp4"]:visited,
.paths-table tr .cell-name a[href$=".mkv"]:visited,
.paths-table tr .cell-name a[href$=".avi"]:visited {
    color: #888888 !important; /* Серый цвет текста */
}

/* 3. ЗАЩИТА: ПАПКИ ВООБЩЕ НЕ ТРОГАЕМ */
/* Мы не прописываем для них :visited, поэтому они останутся 
   такими, какими их сделал сервер (синими, оранжевыми и т.д.) */
   
   
/* Добавь это в конец style.css */
.paths-table tr .cell-name a {
    transition: all 0.3s ease; /* Плавный переход */
}

.paths-table tr .cell-name a:hover {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor !important;
    filter: brightness(1.2);
}

.paths-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    cursor: pointer;
}

/* Пометка [HD] для видеофайлов */
.paths-table tr .cell-name a[href$=".mp4"]::after,
.paths-table tr .cell-name a[href$=".mkv"]::after {
    content: "HD";
    font-family: sans-serif;
    font-size: 9px;
    font-weight: bold;
    margin-left: 10px;
    padding: 1px 4px;
    border: 1px solid currentColor;
    border-radius: 3px;
    vertical-align: middle;
    opacity: 0.5;
}

/* ПРЕВРАЩАЕМ ТЕКСТ В ВЕРХНЕЙ ПАНЕЛИ В ЯРКУЮ КНОПКУ */
div:contains("Открыть сайт в Edge"), 
.edge-fix-button {
    background: linear-gradient(45deg, #0078d4, #00bcf2) !important;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    margin: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 15px rgba(0, 120, 212, 0.4);
    animation: pulse-edge 2s infinite;
}

@keyframes pulse-edge {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); box-shadow: 0 4px 25px rgba(0, 188, 242, 0.6); }
    100% { transform: scale(1); }
}