html,
body,
#root {
    min-height: 100%;
    background-color: #000 !important;
}

body,
#root,
#root > div {
    background-image: url("/background.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    background-attachment: fixed !important;
}


/* Карточка авторизации */
#root form {
    background: rgba(15, 18, 28, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 18px !important;
    padding: 32px !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(120, 150, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Поля ввода */
#root form input {
    border-radius: 8px !important;
}

/* Кнопка входа */
#root form button {
    border-radius: 8px !important;
}

/* Плавное появление */
#root form {
    animation: auth-appear 0.35s ease-out;
}

@keyframes auth-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* Цвет обычного текста карточки */
#root form {
    color: #e8ecf5;
}

#root form p,
#root form a {
    color: #c5d6ff;
}

#root form a:hover {
    color: #ffffff;
}

/* Более светлый текст карточки */
#root form {
    color: #f5f7ff;
}

#root form p {
    color: #f0f3ff;
}

#root form a {
    color: #bcd2ff;
}

#root form a:hover {
    color: #ffffff;
}

/* Светлые подписи Username и Password */
#root form label {
    color: #e8ecf5;
}

/* Заголовок Sign in */
#root h1 {
    display: inline-block;
    color: #f5f7ff !important;
    background: rgba(15, 18, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 8px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Заголовок страницы авторизации */
#root h1,
#root h2,
#root [class*="header"] {
    color: #f5f7ff !important;
}

/* Заголовок Sign in — подложка и рамка */
#root h1,
#root h2 {
    display: inline-block;
    background: rgba(15, 18, 28, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 8px 18px;
}

/* Заголовок Sign in */
#root h5.text-2xl {
    display: inline-block !important;
    color: #f5f7ff !important;
    background: rgba(15, 18, 28, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}