body {
    background-color: var(--brand-primary);
    position: relative
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../img/bg_locked_blue.png') no-repeat center center;
    background-size: cover;
    filter: brightness(0.5) contrast(1.6) saturate(1.3);
    z-index: -3
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 12, 27, 0.85) 0%, rgba(0, 119, 182, 0.4) 100%);
    z-index: -2
}

.glow-bg::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.35) 0%, rgba(2, 12, 27, 0) 60%);
    pointer-events: none;
    z-index: -1;
    animation: pulseGlow 8s infinite alternate ease-in-out
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.8) translate(-10%, -10%);
        opacity: 0.5
    }

    100% {
        transform: scale(1.2) translate(10%, 10%);
        opacity: 1
    }
}

.auth-form-container {
    max-width: 450px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.auth-form-container.wide {
    max-width: 600px
}

.glass-panel {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background-color: rgba(2, 12, 27, 0.4);
    background-image: linear-gradient(135deg, oklch(100% 0 0/.06) 0%, oklch(0% 0 0/0) 100%), linear-gradient(100deg, oklch(100% 0 0/.03) 25%, oklch(0% 0 0/0) 25%);
    box-shadow: 0 0 0 1px oklch(100% 0 0/.1) inset, 0 20px 40px rgba(0, 0, 0, 0.5);
    border-radius: 1.5rem;
    padding: 2.5rem
}

.auth-logo {
    max-height: 50px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.auth-logo:hover {
    transform: scale(1.08)
}

.form-control,
.form-select,
.input-group-text {
    background-color: rgba(5, 11, 20, 0.6);
    color: var(--bs-light);
    border: 1px solid rgba(61, 106, 153, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease
}

.form-control,
.form-select {
    padding: 0.85rem 1.2rem;
    border-radius: 0.75rem
}

.input-group-text {
    cursor: pointer
}

.form-control:focus,
.form-select:focus,
.input-group:focus-within .input-group-text {
    background-color: rgba(5, 11, 20, 0.9);
    color: var(--bs-light);
    border-color: var(--bs-info)
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 4px rgba(61, 106, 153, 0.15);
    transform: translateY(-2px)
}

.form-control::placeholder {
    color: #5c7c9e;
    opacity: 0.8
}

.btn-primary {
    background: var(--gradient-primary);
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 20px rgba(30, 58, 95, 0.25);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-accent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px rgba(30, 58, 95, 0.4);
    color: #fff
}

.btn-primary:hover::before {
    opacity: 1
}

a {
    color: var(--bs-info);
    transition: all 0.3s ease;
    text-decoration: none
}

a:hover {
    color: var(--brand-light)
}

.form-check-input {
    background-color: rgba(5, 11, 20, 0.6);
    border-color: rgba(61, 106, 153, 0.5);
    transition: all 0.3s ease
}

.form-check-input:checked {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    box-shadow: 0 0 10px rgba(61, 106, 153, 0.5)
}