body {
    margin: 0;
    padding: 0;
    background: #000;
    font-family: 'Cascadia Code', monospace;
    color: #00d4ff;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Экран ожидания клика */
#start-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
}

/* Обводка и эффект для текста входа */
.enter-frame {
    position: relative;
    padding: 20px 60px;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #00d4ff;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid #00d4ff;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    backdrop-filter: blur(5px);
    user-select: none;
}

/* Hover-эффект: свечение + лёгкий подъём */
.enter-frame:hover {
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.7);
    transform: translateY(-4px);
    background: rgba(0, 212, 255, 0.15);
}

/* Пульсация в покое (чтобы текст "жил") */
.enter-frame {
    animation: pulse-glow 5s infinite ease-in-out;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
    50% { box-shadow: 0 0 35px rgba(0, 212, 255, 0.6); }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .enter-frame {
        font-size: 28px;
        padding: 16px 40px;
        letter-spacing: 4px;
        border-radius: 10px;
    }
}

/* Экран загрузки */
#loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

/* Спиннер */
.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 6px solid #fff;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Основной контент — полностью чёрный фон */
#content {
    opacity: 0;
    transition: opacity 1.5s ease-in;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #000;           /* Чёрный фон всей страницы */
}

/* Хедер IDE */
.ide-header {
    height: 80px;
    background: #000;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #333;
}

.logo-img {
    height: 6vh;                /* 6% от высоты экрана — масштабируется */
    min-height: 40px;           /* не меньше 40px на маленьких экранах */
    max-height: 80px;           /* не больше 60px на больших */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    /* filter: brightness(0) invert(1); */
}

/* Контейнер IDE */
.ide-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Sidebar — список файлов */
.file-sidebar {
    width: 280px;
    background: #000;
    border-right: 1px solid #333;
    overflow-y: auto;
}

.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-file-list {
    list-style: none;
    margin: 0;
    padding-left: 8px;
    padding-top: 8px;
}

.file-item {
    padding: 8px 20px;
    margin: 0;
    color: #00d4ff;
    cursor: pointer;
    transition: all 0.2s;
}

.file-item:hover, .file-item[data-type="folder"] .file-item:hover {
    background: #0a1f2e;
}

.file-item.active, .file-item[data-type="folder"] .file-item.active {
    background: #001f33;
    border-left: 4px solid #00d4ff;  /* Голубая обводка слева */
    padding-left: 16px;              /* Сдвигаем, чтобы линия была внутри */
}

/* Папки не получают active, только визуальное открытие */
.file-item[data-type="folder"] {
    font-weight: bold;              /* папки чуть жирнее для отличия */
}

.file-item[data-type="folder"].active {
    background: transparent;        /* убираем фон active у папок */
    border-left: 4px solid transparent;
}

/* Запрещаем hover на папке, когда курсор над её содержимым */
.file-item[data-type="folder"]:hover {
    background: transparent; /* или оставляем текущий фон */
}

/* Когда курсор над вложенным элементом — родительская папка НЕ меняет стиль */
.file-item:hover .file-item,
.sub-file-list:hover .file-item {
    background: transparent; /* предотвращаем "просачивание" hover вверх */
}

/* Если хочешь, чтобы открытая папка имела лёгкий фон (но без hover на содержимом) */
.file-item[data-type="folder"].open {
    background: rgba(0, 212, 255, 0.05); /* очень лёгкий фон для открытой папки */
}

/* Hover-звук и курсор только на листьях (файлах) и папках, но не на их детях */
.file-item[data-type="file"]:hover,
.file-item[data-type="folder"]:hover {
    cursor: pointer;
}

/* Редактор (правая часть) */
.editor-area {
    flex: 1;
    background: #000;
    padding: 20px;
    overflow-y: auto;
    color: #00d4ff;
}

.editor-area pre {
    margin: 0;
    font-family: 'Cascadia Code', monospace;
    white-space: pre-wrap;
    color: #00d4ff;
}

/* Редактор (правая часть) */
.editor-area {
    flex: 1;
    background: #000;
    padding: 20px;
    overflow-y: auto;
    color: #00d4ff;
}

.editor-area pre,
.editor-area code,
.editor-area p,
/* .editor-area h1, */
.editor-area h2,
.editor-area h3,
.editor-area ul,
.editor-area ol,
.editor-area li {
    margin: 0.4em 0; 
    line-height: 1.3;
    font-family: 'Cascadia Code', monospace;
    white-space: normal;
    color: #00d4ff;
    padding-top: 8px;
    padding-bottom: 8px;
}

.editor-area pre p,
.editor-area pre h1,
.editor-area pre h2,
.editor-area pre h3 {
    margin: 0.2em 0;
}

.editor-area ul,
.editor-area ol {
    margin: 0.1em 0;
    padding-left: 1.5em;
}

.editor-area li {
    margin: 0.1em 0;
}

/* Обтекние картинки текстом */
.editor-area img {
    max-width: 20%;               /* Картинка занимает до 40% ширины */
    height: auto;
    float: right;                 /* Картинка прижимается вправо */
    margin: 0 0 20px 20px;        /* Отступы: снизу и слева от картинки */
    border: 2px solid #00d4ff;    /* Голубая рамка в стиле сайта */
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* Чтобы текст не прилипал к картинке */
.editor-area p,
.editor-area h1,
.editor-area h2,
.editor-area h3,
.editor-area ul,
.editor-area ol,
.editor-area blockquote {
    overflow: hidden;             /* Предотвращает обтекание в странных местах */
}

/* Если картинка большая — она адаптируется */
.editor-area img.full-width {
    float: none;                  /* Для больших картинок — без обтекания */
    display: block;
    margin: 20px auto;
    max-width: 100%;
}

/* Мобильные — картинка на всю ширину */
@media (max-width: 768px) {
    .editor-area img {
        float: none;
        max-width: 100%;
        margin: 15px auto;
        display: block;
    }
}

/* Скрытые классы */
.hidden {
    display: none !important;
}

/* Когда загрузка завершена */
.loaded #loader {
    opacity: 0;
    visibility: hidden;
}

.loaded #content {
    opacity: 1 !important;
}

/* Модальное окно для пароля — центрирование и стили */
.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: #111;
    border: 2px solid #00d4ff;
    border-radius: 12px;
    padding: 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.modal-content h2 {
    margin: 0 0 25px;
    font-size: 28px;
    color: #00d4ff;
}

.modal-content h3 {
    color: #ff4444;
    margin: 15px 0 15px;
    font-size: 16px;
}

.modal-content p {
    margin-bottom: 20px;
    color: #cccccc;
    font-size: 18px;
}

.modal-content input[type="password"] {
    width: 100%;
    padding: 14px;
    margin: 20px 0;
    background: #000;
    border: 2px solid #00d4ff;
    border-radius: 8px;
    color: #00d4ff;
    font-family: 'Cascadia Code', monospace;
    font-size: 18px;
    font-weight: 400; /* обычный по умолчанию */
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* При фокусе — жирнее, но остаётся голубым и с голубой обводкой */
.modal-content input[type="password"]:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
    font-weight: 700; /* становится жирнее */
    background: #000; /* остаётся чёрным */
    color: #00d4ff;   /* остаётся голубым */
}

/* Тряска всего модального окна при ошибке */
@keyframes shake-modal {
    0% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

.modal.error-shake {
    animation: shake-modal 0.6s ease-in-out;
}

/* Тряска только внутреннего контейнера */
.modal.error-shake .modal-content {
    animation: shake-modal 0.6s ease-in-out;
    border-color: #ff4444 !important;
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.8) !important;
    background: rgba(30, 0, 0, 0.9) !important;
}

/* Убираем тряску с самого модала */
.modal.error-shake {
    animation: none;
}

/* Красный для всех внутренних элементов */
.modal.error-shake h2,
.modal.error-shake p,
.modal.error-shake .error,
.modal.error-shake input[type="password"],
.modal.error-shake button {
    color: #ff4444 !important;
}

.modal.error-shake input[type="password"] {
    border-color: #ff4444 !important;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.6) !important;
}

.modal.error-shake button {
    border-color: #ff4444 !important;
}

.modal.error-shake button:hover {
    background: #ff4444 !important;
    color: #000 !important;
}

/* Плавный возврат к нормальному состоянию при фокусе после ошибки */
.modal-content input[type="password"]:focus:not(.error) {
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
    animation: none;
}

.modal-content button {
    padding: 12px 30px;
    margin: 15px 10px;
    background: transparent;
    color: #00d4ff;
    border: 2px solid #00d4ff;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cascadia Code', monospace;
    font-size: 16px;
    transition: all 0.3s ease;
}

.modal-content button:hover {
    background: #00d4ff;
    color: #000;
}

/* Сообщение о зашифрованном файле */
#editor-content .encrypted-placeholder {
    color: #00d4ff;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-top: 100px;
    opacity: 0.6;
}

/* Иконки файлов и папок */
.file-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

.folder-icon {
    stroke: #00d4ff;
    fill: none;
}

.file-icon {
    stroke: #00d4ff;
    fill: none;
}

/* Текст файла рядом с иконкой */
.file-name {
    display: inline-block;
    vertical-align: middle;
}

/* Активная папка или файл — иконка ярче */
.file-item.active .file-icon {
    stroke: #00ffea; /* более яркий голубой для active */
    filter: drop-shadow(0 0 4px #00d4ff);
}

/* Hover — лёгкое свечение иконки */
.file-item:hover .file-icon {
    stroke: #00ffea;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Кастомный скроллбар для всего сайта */
::-webkit-scrollbar {
    width: 10px;             /* Ширина скроллбара (сделай 8px, если хочешь тоньше) */
    height: 10px;            /* Для горизонтального скролла */
}

::-webkit-scrollbar-track {
    background: #111;        /* Фон трека — тёмный, как твой стиль */
    border-radius: 10px;     /* Скруглённые углы */
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* Лёгкая тень для глубины */
}

::-webkit-scrollbar-thumb {
    background: #00d4ff;     /* Ползунок — голубой акцент */
    border: 2px solid #000;  /* Чёрная обводка для контраста */
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #00aaff;     /* Более тёмный голубой при наведении */
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); /* Свечение при hover */
}

::-webkit-scrollbar-thumb:active {
    background: #0077cc;     /* Ещё темнее при клике */
}