.karma-body {
    background: linear-gradient(180deg, #f5f3ff 0%, #fefce8 100%);
    min-height: 100vh;
}

.karma-navbar {
    background: linear-gradient(90deg, #6c5ce7, #a855f7);
}

.text-karma {
    color: #6c5ce7;
}

/* Login user grid */
.user-card {
    border-radius: 1.25rem;
    transition: transform .1s ease-in-out;
    border-bottom: 4px solid var(--user-color, #6c5ce7) !important;
}

.user-card:hover, .user-card:focus {
    transform: scale(1.05);
}

.user-avatar {
    font-size: 3rem;
    line-height: 1;
}

/* PIN pad */
.pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 4.5rem);
    gap: .5rem;
    justify-content: center;
}

.pin-key {
    height: 4.5rem;
    font-size: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.letter-spaced {
    letter-spacing: .5rem;
}

/* Child task buttons */
.task-btn {
    border-radius: 1.25rem;
    transition: transform .1s ease-in-out;
    cursor: pointer;
}

.task-btn:hover, .task-btn:active {
    transform: scale(1.04);
    background: #fff7d6;
}

/* Reactions */
.reaction-btn {
    border-radius: 2rem;
}