.ckn-login-page {
    min-height: 100vh;
    background:
        radial-gradient(900px 420px at 10% 12%, rgba(255, 255, 255, 0.75), transparent 60%),
        linear-gradient(145deg, #fff6f6 0%, #ffe0e0 35%, #ffd1d1 100%);
    color: #1f2937;
}

.ckn-login-shell {
    min-height: 100vh;
}

.ckn-login-card {
    border: 1px solid #fecaca;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(153, 27, 27, 0.12);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(3px);
}

.ckn-login-brand {
    width: 95px;
}

.ckn-login-subtext {
    color: #6b7280;
    font-size: 0.875rem;
}

.ckn-login-input {
    border-color: #fecaca;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.ckn-login-input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.15);
}

.ckn-login-btn {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border: 0;
    color: #fff;
    font-weight: 600;
    padding: 0.65rem 0.9rem;
}

.ckn-login-btn:hover {
    color: #fff;
    filter: brightness(0.96);
}

.ckn-login-note {
    background: #fff1f2;
    border: 1px dashed #fca5a5;
    border-radius: 0.75rem;
    color: #9f1239;
    font-size: 0.875rem;
}

.ckn-login-step-hidden {
    display: none;
}

.ckn-login-identity {
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fff7f7;
}

.ckn-login-step-enter {
    animation: ckn-login-step-enter 0.28s ease forwards;
}

.ckn-login-step-enter-reverse {
    animation: ckn-login-step-enter-reverse 0.28s ease forwards;
}

.ckn-login-step-exit {
    animation: ckn-login-step-exit 0.22s ease forwards;
}

.ckn-login-step-exit-reverse {
    animation: ckn-login-step-exit-reverse 0.22s ease forwards;
}

.ckn-login-card-signing-in {
    animation: ckn-login-card-signing-in 0.45s ease forwards;
}

@keyframes ckn-login-step-enter {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ckn-login-step-enter-reverse {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ckn-login-step-exit {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-14px);
    }
}

@keyframes ckn-login-step-exit-reverse {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(14px);
    }
}

@keyframes ckn-login-card-signing-in {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-14px) scale(0.98);
    }
}