* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    background:
            linear-gradient(
                    135deg,
                    #0b0d12 0%,
                    #121620 100%
            );

    color: #e8eaf0;
}


/* Основная карточка */

.container {
    width: min(900px, calc(100% - 40px));

    margin: 60px auto;
    padding: 36px;

    background: #171a22;

    border: 1px solid #292e3a;
    border-radius: 18px;

    box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.35);
}


/* Заголовок */

h1 {
    margin: 0 0 32px;

    font-size: 32px;
    font-weight: 700;

    letter-spacing: -1px;
}


h3 {
    margin-top: 30px;
    margin-bottom: 12px;

    font-size: 16px;
    font-weight: 600;

    color: #aeb4c2;
}


/* Блоки */

.algorithm-block,
.file-block,
.key-block {
    margin-bottom: 20px;
}


label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;

    color: #aeb4c2;
}


/* Select */

select {
    width: 100%;

    padding: 12px 14px;

    color: #f2f3f5;
    background: #10131a;

    border: 1px solid #303643;
    border-radius: 10px;

    font-size: 15px;

    outline: none;
    cursor: pointer;

    transition:
            border-color 0.2s,
            box-shadow 0.2s;
}

select:focus {
    border-color: #6d7cff;

    box-shadow:
            0 0 0 3px rgba(109, 124, 255, 0.15);
}


/* Поля ввода */

input[type="number"],
input[type="text"] {
    width: 100%;

    padding: 12px 14px;

    color: #f2f3f5;
    background: #10131a;

    border: 1px solid #303643;
    border-radius: 10px;

    font-size: 15px;

    outline: none;

    transition:
            border-color 0.2s,
            box-shadow 0.2s;
}


input[type="number"]:focus,
input[type="text"]:focus {
    border-color: #6d7cff;

    box-shadow:
            0 0 0 3px rgba(109, 124, 255, 0.15);
}


/* Выбор файла */

input[type="file"] {
    width: 100%;

    padding: 10px;

    background: #10131a;

    border: 1px dashed #3a4150;
    border-radius: 10px;

    color: #aeb4c2;

    cursor: pointer;
}


input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 8px 14px;

    border: 0;
    border-radius: 8px;

    background: #292f3d;
    color: #f2f3f5;

    cursor: pointer;

    transition: background 0.2s;
}


input[type="file"]::file-selector-button:hover {
    background: #373e4f;
}


/* Поле текста */

textarea {
    width: 100%;
    min-height: 230px;

    padding: 16px;

    margin-bottom: 20px;

    resize: vertical;

    background: #10131a;
    color: #f2f3f5;

    border: 1px solid #303643;
    border-radius: 12px;

    font-family:
            "JetBrains Mono",
            "Fira Code",
            monospace;

    font-size: 14px;
    line-height: 1.6;

    outline: none;

    transition:
            border-color 0.2s,
            box-shadow 0.2s;
}


textarea:focus {
    border-color: #6d7cff;

    box-shadow:
            0 0 0 3px rgba(109, 124, 255, 0.15);
}


textarea::placeholder {
    color: #626979;
}


/* Кнопки */

.buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 10px;
}


button {
    padding: 11px 18px;

    border: 0;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;

    color: white;
    background: #2c3240;

    cursor: pointer;

    transition:
            transform 0.15s,
            background 0.2s,
            box-shadow 0.2s;
}


button:hover {
    background: #3a4254;

    transform: translateY(-1px);
}


button:active {
    transform: translateY(0);
}


/* Главная кнопка */

.buttons button:first-child {
    background:
            linear-gradient(
                    135deg,
                    #6675ff,
                    #7b68ee
            );

    box-shadow:
            0 8px 20px rgba(102, 117, 255, 0.2);
}


.buttons button:first-child:hover {
    box-shadow:
            0 10px 28px rgba(102, 117, 255, 0.3);
}


/* Brute force */

#bruteForceButton {
    background: #8a5b2b;
}

#bruteForceButton:hover {
    background: #a36d35;
}


/* Результат */

#result {
    min-height: 120px;
    max-height: 420px;

    overflow-y: auto;

    padding: 18px;

    margin-bottom: 14px;

    background: #0e1117;

    border: 1px solid #292e3a;
    border-radius: 12px;

    color: #dfe3eb;

    white-space: pre-wrap;
    word-break: break-word;

    font-family:
            "JetBrains Mono",
            "Fira Code",
            monospace;

    font-size: 14px;
    line-height: 1.6;
}


/* Полоса прокрутки */

#result::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    width: 8px;
}


#result::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background: #333947;

    border-radius: 10px;
}


/* Скачать */

.container > button:last-of-type {
    background: transparent;

    border: 1px solid #394050;

    color: #cfd4df;
}


.container > button:last-of-type:hover {
    background: #222733;
}


/* Адаптация */

@media (max-width: 600px) {

    .container {
        width: calc(100% - 20px);

        margin: 20px auto;
        padding: 22px;
    }


    h1 {
        font-size: 26px;
    }


    .buttons {
        flex-direction: column;
    }


    .buttons button {
        width: 100%;
    }


    textarea {
        min-height: 180px;
    }
}