.age-credential-card {
    max-width: 720px;
}

.age-credential-badge {
    background: rgba(45, 212, 191, .14);
    border: 1px solid rgba(45, 212, 191, .38);
    color: #9ff7e7;
}

.age-credential-validity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(167, 139, 250, .28);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.age-credential-validity span {
    opacity: .72;
}

.age-credential-validity strong {
    color: #fff;
}

.age-credential-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
}

.age-credential-actions form {
    margin: 0;
}

.age-credential-delete {
    appearance: none;
    border: 1px solid rgba(248, 113, 113, .42);
    border-radius: 999px;
    background: rgba(248, 113, 113, .08);
    color: #fecaca;
    padding: .7rem 1rem;
    cursor: pointer;
}

.landing-age-status {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .9rem;
    margin: 1.25rem 0;
    padding: .9rem 1rem;
    border: 1px solid rgba(45, 212, 191, .36);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(45, 212, 191, .10), rgba(124, 58, 237, .08));
    box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
}

.landing-age-status > span {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(45, 212, 191, .18);
    color: #9ff7e7;
    font-weight: 800;
}

.landing-age-status strong,
.landing-age-status p {
    display: block;
    margin: 0;
}

.landing-age-status p {
    margin-top: .2rem;
    font-size: .88rem;
    opacity: .72;
}

.landing-age-status a {
    color: #c4b5fd;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .landing-age-status {
        grid-template-columns: auto 1fr;
    }

    .landing-age-status a {
        grid-column: 1 / -1;
        margin-left: 3.15rem;
    }

    .age-credential-validity {
        align-items: flex-start;
        flex-direction: column;
    }
}