.avatar {
    --avatar-size: 56px;

    display: inline-block;
    aspect-ratio: 1 / 1;
    inline-size: var(--avatar-size);
    border-radius: 50%;

    text-align: center;
    text-transform: uppercase;
    font-size: calc(var(--avatar-size) * 0.5);
    font-weight: 700;
    line-height: calc(var(--avatar-size) - 2px);
    user-select: none;

    color: oklch(from var(--avatar-color) calc(l + 0.2) c h);
    background-color: var(--avatar-color);
}

.red-avatar {
    --avatar-color: var(--c1);
}

.card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;

    background-color: oklch(from var(--panel-bg) calc(l - 0.05) c h);
    border-radius: var(--border-radius-lg);
    padding: 16px;

    .info {
        flex: 1 1;

        .name {
            font-weight: bold;
        }

        .id {
            color: var(--secondary);
            font-weight: normal;
        }
    }

    &.danger {
        display: block;
        background-color: oklch(from red 0.2 c h);
        border: 1px dashed red;
    }
}

.card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}