:root {
            --bg: #080a0f;
            --panel: #141821;
            --panel2: #191e28;
            --panel3: #202632;

            --line: #2b3240;
            --line2: #343c4b;

            --text: #f5f6f8;
            --muted: #8f97a6;

            --green: #35d58a;
            --green-bg: #123324;

            --red: #ef4147;
            --red-bg: #321619;
        }


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


        body {
            min-height: 100vh;

            background:
                radial-gradient(
                    circle at 50% -15%,
                    #171c29 0,
                    transparent 35%
                ),
                linear-gradient(
                    180deg,
                    #080a0f,
                    #090b10 55%,
                    #06070a
                );

            color: var(--text);

            font-family:
                Arial,
                Helvetica,
                sans-serif;

                color: white;
        }


   

        .container {
            width: min(1100px, 100%);

            margin: auto;

            padding:
                25px
                20px
                60px;
        }




        header {
            height: 70px;

            display: flex;

            align-items: center;
            justify-content: space-between;

            padding: 10px 16px;

            background: rgba(20, 24, 33, .95);

            border: 1px solid var(--line);

            border-radius: 18px;

            margin-bottom: 45px;

            box-shadow:
                0 18px 55px rgba(0, 0, 0, .35);
        }


        .logo {
            display: flex;

            align-items: center;

            gap: 12px;
        }




        .logo-name {
            font-size: 21px;

            font-weight: 800;
        }


        .logo-name span {
            color: var(--red);
        }


        .header-text {
            color: var(--muted);

            font-size: 13px;
        }



        .title {
            margin-bottom: 30px;
        }


        .title-small {
            color: var(--muted);

            font-size: 11px;

            font-weight: bold;

            letter-spacing: .17em;

            margin-bottom: 8px;
        }


        .title h1 {
            font-size: 32px;

            margin-bottom: 10px;
        }


        .title p {
            color: var(--muted);

            font-size: 14px;
        }



        .cards {
            display: grid;

            grid-template-columns:
                1fr
                1fr;

            gap: 22px;
        }


        .main-card {
            min-height: 300px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            padding: 27px;

            background:
                linear-gradient(
                    145deg,
                    var(--panel2),
                    var(--panel)
                );

            border: 1px solid var(--line);

            border-radius: 22px;

            box-shadow:
                0 12px 35px rgba(0, 0, 0, .22);

            transition: .25s;
        }


        .main-card:hover {
            transform: translateY(-3px);

            border-color: #414a59;

            box-shadow:
                0 18px 45px rgba(0, 0, 0, .35);
        }


        .card-top {
            display: flex;

            align-items: center;

            justify-content: space-between;
        }


        .big-icon {
            width: 58px;
            height: 58px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 15px;

            font-size: 27px;

            font-weight: bold;
        }


        .approved .big-icon {
            color: var(--green);

            background: var(--green-bg);

            border: 1px solid #286d4e;
        }


        .rejected .big-icon {
            color: var(--red);

            background: var(--red-bg);

            border: 1px solid #71343d;
        }


        .number {
            color: var(--muted);

            font-size: 13px;
        }


        .main-card h2 {
            margin-top: 25px;

            font-size: 25px;
        }


        .main-card p {
            margin-top: 9px;

            color: var(--muted);

            font-size: 13px;

            line-height: 1.5;
        }



        .open-button {
            width: 100%;

            height: 48px;

            margin-top: 25px;

            border-radius: 11px;

            cursor: pointer;

            font-size: 13px;

            font-weight: bold;

            transition: .2s;
        }


        .approved .open-button {
            color: var(--green);

            background: var(--green-bg);

            border: 1px solid #286d4e;
        }


        .approved .open-button:hover {
            background: #17452f;
        }


        .rejected .open-button {
            color: #ff9297;

            background: var(--red-bg);

            border: 1px solid #71343d;
        }


        .rejected .open-button:hover {
            background: #482025;
        }



        .modal {
            position: fixed;

            inset: 0;

            display: none;

            align-items: center;

            justify-content: center;

            padding: 20px;

            background: rgba(0, 0, 0, .75);

            z-index: 1000;

            backdrop-filter: blur(5px);
        }


        .modal.active {
            display: flex;
        }


        .modal-window {
            width: min(700px, 100%);

            max-height: 85vh;

            display: flex;

            flex-direction: column;

            background:
                linear-gradient(
                    145deg,
                    #191e28,
                    #11151c
                );

            border: 1px solid var(--line);

            border-radius: 20px;

            box-shadow:
                0 30px 90px rgba(0, 0, 0, .6);

            animation:
                modalOpen .2s ease;
        }


        @keyframes modalOpen {

            from {
                opacity: 0;

                transform:
                    scale(.96)
                    translateY(10px);
            }

            to {
                opacity: 1;

                transform:
                    scale(1)
                    translateY(0);
            }

        }


  

        .modal-header {
            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 20px 22px;

            border-bottom:
                1px solid var(--line);
        }


        .modal-title {
            display: flex;

            align-items: center;

            gap: 11px;
        }


        .modal-icon {
            width: 38px;
            height: 38px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 10px;

            font-weight: bold;

            font-size: 17px;
        }


        .approved-modal .modal-icon {
            color: var(--green);

            background: var(--green-bg);
        }


        .rejected-modal .modal-icon {
            color: var(--red);

            background: var(--red-bg);
        }


        .modal-title h2 {
            font-size: 18px;
        }


        .modal-title p {
            color: var(--muted);

            font-size: 11px;

            margin-top: 3px;
        }


        .close {
            width: 35px;
            height: 35px;

            background: var(--panel3);

            border: 1px solid var(--line);

            border-radius: 9px;

            color: var(--muted);

            cursor: pointer;

            font-size: 19px;
        }


        .close:hover {
            color: white;

            background: #292f3a;
        }


      

        .modal-body {
            padding: 18px;

            overflow-y: auto;
        }


        .candidate-list {
            display: grid;

            gap: 9px;
        }




        .candidate {
            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;

            padding: 14px;

            background: #10151c;

            border: 1px solid #2a303a;

            border-radius: 13px;

            transition: .2s;
        }


        .candidate:hover {
            background: #171d26;

            border-color: #424b5b;
        }


        .candidate-left {
            display: flex;

            align-items: center;

            gap: 12px;

            min-width: 0;
        }


        .avatar {
            width: 43px;
            height: 43px;

            flex: 0 0 43px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background: #202632;

            border: 1px solid #3a4351;

            color: #d5dae3;

            font-size: 12px;

            font-weight: bold;
        }


        .candidate-info {
            min-width: 0;
        }


        .candidate-name {
            font-size: 14px;

            font-weight: bold;

            margin-bottom: 5px;

            word-break: break-word;
        }


        .candidate-reason {
            color: var(--muted);

            font-size: 11px;

            line-height: 1.4;
        }


        .candidate-status {
            flex-shrink: 0;

            font-size: 10px;

            font-weight: bold;

            padding: 6px 9px;

            border-radius: 7px;
        }


        .status-approved {
            color: var(--green);

            background: var(--green-bg);
        }


        .status-rejected {
            color: #ff9297;

            background: var(--red-bg);
        }


       

        .empty {
            min-height: 250px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            color: var(--muted);

            text-align: center;
        }


        .empty-icon {
            font-size: 35px;

            margin-bottom: 12px;

            opacity: .5;
        }


        .empty p {
            font-size: 13px;
        }


       

        .modal-body::-webkit-scrollbar {
            width: 7px;
        }


        .modal-body::-webkit-scrollbar-track {
            background: transparent;
        }


        .modal-body::-webkit-scrollbar-thumb {
            background: #343c4b;

            border-radius: 10px;
        }


      

        @media (max-width: 750px) {

            .cards {
                grid-template-columns: 1fr;
            }


            .header-text {
                display: none;
            }

        }


        @media (max-width: 500px) {

            .container {
                padding:
                    12px
                    10px
                    40px;
            }


            header {
                margin-bottom: 30px;
            }


            .title h1 {
                font-size: 27px;
            }


            .main-card {
                min-height: 260px;

                padding: 22px;
            }


            .modal-window {
                max-height: 90vh;
            }


            .candidate {
                align-items: flex-start;
            }


            .candidate-status {
                display: none;
            }

        }



       
body,
body * {
    color: #ffffff;
}


.logo-name span {
    color: var(--red);
}

.approved .big-icon,
.approved .open-button,
.status-approved {
    color: var(--green);
}

.rejected .big-icon,
.rejected .open-button,
.status-rejected {
    color: #ff9297;
}

/* Второстепенный текст */
.header-text,
.title-small,
.title p,
.main-card p,
.number,
.modal-title p,
.candidate-reason,
.empty {
    color: var(--muted);
}

/* Кнопка закрытия */
.close {
    color: var(--muted);
}

.close:hover {
    color: white;
}

/* Информационный блок */

.info-block {
    margin-top: 35px;
    padding: 28px;
    background: linear-gradient(
        145deg,
        var(--panel2),
        var(--panel)
    );
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .22);
}

.info-block h2 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 16px;
}

.info-block p {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.info-block ol {
    color: #ffffff;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.8;
}

.info-block strong {
    color: #ffffff;
}

.bot-button {
    display: inline-block;
    margin: 5px 0 18px;
    padding: 12px 20px;

    background: var(--green-bg);
    border: 1px solid #286d4e;
    border-radius: 10px;

    color: var(--green);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;

    transition: .2s;
}

.bot-button:hover {
    background: #17452f;
}

.not-passed {
    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--line);

    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
}

.not-passed strong {
    color: #ffffff;
}

@media (max-width: 500px) {
    .info-block {
        padding: 22px;
    }
}

/* Стили для ссылки */
        .btn-link {
            display: inline-block;
            padding: 12px 24px;
            background-color: #007bff; /* Синий цвет фона */
            color: #ffffff;             /* Белый цвет текста */
            text-decoration: none;     /* Убираем нижнее подчеркивание */
            border-radius: 6px;        /* Скругление углов */
            font-family: Arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s ease; /* Плавное изменение цвета */
        }

        /* Эффект при наведении курсора */
        .btn-link:hover {
            background-color: #0056b3; /* Более темный синий при наведении */
            cursor: pointer;
        }