* {
    box-sizing: border-box;
}

body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

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

    color: white;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(199, 125, 255, 0.22),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(255, 105, 180, 0.18),
            transparent 35%
        ),

        #0d0a12;

}

.card {

    width: min(92%, 520px);

    padding: 42px;

    text-align: center;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 28px;

    background:
        rgba(25,18,32,0.86);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,0.45);

    backdrop-filter:
        blur(18px);

}

.logo,
.success,
.denied {

    width: 72px;

    height: 72px;

    margin:
        0 auto 22px;

    display: grid;

    place-items: center;

    border-radius: 22px;

    font-size: 34px;

    background:
        linear-gradient(
            135deg,
            #c77dff,
            #f08acb
        );

    box-shadow:
        0 12px 35px
        rgba(199,125,255,0.25);

}

.success {

    background:
        linear-gradient(
            135deg,
            #9be15d,
            #45b649
        );

}

.denied {

    background:
        linear-gradient(
            135deg,
            #ff758c,
            #ff4d6d
        );

}

h1 {

    margin:
        0 0 12px;

    font-size: 31px;

}

p {

    color: #c8bdcf;

    line-height: 1.6;

}

.info {

    display: flex;

    gap: 14px;

    text-align: left;

    margin: 15px 0;

    padding: 16px;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.05);

}

.info span {

    font-size: 24px;

}

.info strong,
.info small {

    display: block;

}

.info small {

    margin-top: 4px;

    color: #9e91a7;

}

.button {

    display: block;

    margin-top: 25px;

    padding: 16px 20px;

    border-radius: 14px;

    color: white;

    text-decoration: none;

    font-weight: 700;

    background:
        linear-gradient(
            90deg,
            #c77dff,
            #e783d5
        );

    transition:
        0.2s;

}

.button:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

}

.secondary {

    background:
        rgba(255,255,255,0.08);

}

.result {

    margin-top: 20px;

    padding: 16px;

    border-radius: 14px;

    background:
        rgba(120,220,120,0.08);

}

footer,
.small {

    margin-top: 25px;

    color: #807486;

    font-size: 13px;

}

.everness-logo {
    width: 220px;
    max-width: 80%;
    height: auto;
    margin-bottom: 25px;

    filter:
        drop-shadow(
            0 0 20px
            rgba(199, 125, 255, 0.45)
        );
}